Datepicker

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Datepicker

Post by jsetzer » 2019-11-27 08:10

If you wish to turn the default date picker (3 selects + 1 button) ...

chrome_hNNUyL2cst.png
chrome_hNNUyL2cst.png (1.78 KiB) Viewed 8760 times

... into a single line datepicker ...

chrome_AdK7kmILkc.png
chrome_AdK7kmILkc.png (15.86 KiB) Viewed 8760 times

... with only one line of javascript code ...

Code: Select all

// file: hooks/TABLENAME-dv.js
new AppGiniField("duedate").toDatepicker();

... you should have a look here:
https://appgini.bizzworxx.de/products/j ... atepicker/

Attention
This will work for datetime fields and not for date fields. So you need to change the field type first, re-generate your app and check Rebuild Fields in admin-Area.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

G Belgrado
Veteran Member
Posts: 61
Joined: 2017-03-12 09:24

Re: Datepicker

Post by G Belgrado » 2019-11-27 08:44

hi Jan
but in this case
being the datetime field; how is the data entered?
'2019-11-20 00:00:00'
or '2019-11-20' only?

thanks

G Belgrado
Veteran Member
Posts: 61
Joined: 2017-03-12 09:24

Re: Datepicker

Post by G Belgrado » 2019-11-27 11:51

sorry, I asked a stupid question, it's obvious that it's 2019-11-20 00:00:00.
but if we need to display only the date in table-view?

thanks

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Datepicker

Post by jsetzer » 2019-11-27 20:31

It's not a stupid question at all, thank you for pointing that out!

You can format your table view values in "Data format" in the field properties:
AppGini_a0W6ORcBND.png
AppGini_a0W6ORcBND.png (44.01 KiB) Viewed 8724 times

If there is no suitable format inside the list, feel free to create your custom format.

AppGini_qcQ5TEFftA.png
AppGini_qcQ5TEFftA.png (22.04 KiB) Viewed 8724 times

Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Datepicker

Post by jsetzer » 2019-11-27 21:59

G Belgrado wrote:
2019-11-27 11:51
sorry, I asked a stupid question, it's obvious that it's 2019-11-20 00:00:00.
but if we need to display only the date in table-view?
I have updated the documentation. There is a short description of how to change the data format in table view.
https://appgini.bizzworxx.de/products/j ... atepicker/

There is also a modified dataFormats.cfg file for download (zip-file) which already includes formats y/m/d, y-m-d and d.m.y
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

G Belgrado
Veteran Member
Posts: 61
Joined: 2017-03-12 09:24

Re: Datepicker

Post by G Belgrado » 2019-11-27 22:07

now it's okay
Thanks Jan


other question:
in my project. apx with bootstrap theme
I have the localization settings as I need. (time zone europe\rome ; date format day month year)

in your code

Code: Select all

    new AppGiniField( "fieldname" ).toDatepicker();
Is it possible to have the datepicker in another language?

or it depends on
AppGini\files\resources\bootstrap-datetimepicker\bootstrap-datetimepicker.min.js


thanks a lot for your time

G Belgrado
Veteran Member
Posts: 61
Joined: 2017-03-12 09:24

Re: Datepicker

Post by G Belgrado » 2019-11-28 11:13

Solved.
Need to set in language.php

Code: Select all

$Translation['datetimepicker locale'] = 'en'; 
on 'it'

thanks again Jan

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Datepicker

Post by jsetzer » 2019-11-28 12:26

That's right. The code will use the locale setting as it has been configured in your AppGini project.

Anyway, you can pass a different locale as first argument (string) to the .toDatepicker method.

But be careful: the value has to be converted and stored in your datetime database field. Both formats, MySQL and Javascript must match. Try carefully before using a different locale!
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

G Belgrado
Veteran Member
Posts: 61
Joined: 2017-03-12 09:24

Re: Datepicker

Post by G Belgrado » 2019-11-28 14:24

jsetzer wrote:
2019-11-28 12:26
Anyway, you can pass a different locale as first argument (string) to the .toDatepicker method.
you mean .toDatepicker() .toDatepicker('it')

Code: Select all

new AppGiniField( "fieldname" ).toDatepicker('it');
true?

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Datepicker

Post by jsetzer » 2019-11-28 14:34

Yes, I have just checked the underlying moment.js library and your locale should be "it".

Code: Select all

new AppGiniField("duedate").toDatepicker('it');
This is the datepicker with Italian UI:
chrome_V2wlAFO5yM.png
chrome_V2wlAFO5yM.png (12.98 KiB) Viewed 8674 times

Please also have a look at your project settings:

AppGini_wL1ILiNTO8.png
AppGini_wL1ILiNTO8.png (5.22 KiB) Viewed 8674 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

pfrumkin
Veteran Member
Posts: 157
Joined: 2020-02-18 17:58
Location: Albuquerque, New Mexico USA

Re: Datepicker

Post by pfrumkin » 2020-05-12 23:14

Hi Jan, All,

I can't seem to get the .toDatepicker() to take. I have the following line of code
new AppGiniField("Donation_Date").toDatepicker();

I have specified the type DateTime. I can see it in FF debugger go to the AppGiniHelper.min.js library but it seems to get overwritten because the image shows the time (in addition to date) and it puts the time in the textbox after selection. I have applied the Data Formats as you have documented. I have another DateTime field on the form that for now I'm using as a control, not using AppGiniHelper, and it behaves the same way, shows some other datepicker. I know the AppGiniHelper libary is working because I have changed the title and icon on the main menu, and I even added a .hide() line right below this line, just to test, and the field does get hidden. My problem seems to be specific to toDatepicker.

I'm not good enough at JQuery to do much debugging. It seems to me that there is some order of operations and the datepicker from the helper is superceded. I did a view source and I see

jQuery('#Donation_Date').addClass('always_shown').parents('.input-group').datetimepicker({ toolbarPlacement: 'top', sideBySide: true, showClear: true, showTodayButton: true, showClose: true, icons: { close: 'glyphicon glyphicon-ok' }, format: AppGini.datetimeFormat('dt') , locale: 'en' });

identical except for the field name to the other DateTime field on the form.

Any help appreciated. Thanks.

Paul

Using BigProf AppGini 5.82

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Datepicker

Post by jsetzer » 2020-05-13 03:27

Hi Paul,

thanks for your detailed bug report. I confirm there is a problem with toDatepicker() with generated code of latest AppGini version. Gonna do some research.

Regards,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Datepicker

Post by D Oliveira » 2020-05-13 14:54

A little work but thats how I manage datetime pickers:

https://www.hongkiat.com/blog/jquery-ui-datepicker/

pfrumkin
Veteran Member
Posts: 157
Joined: 2020-02-18 17:58
Location: Albuquerque, New Mexico USA

Re: Datepicker

Post by pfrumkin » 2020-06-16 20:54

I found out how to use the AppGini native to get what I want (at least I think it works), thanks to another post of yours, https://bigprof.com/blog/appgini/how-to ... ime-field/ :)

The format of the field needs to be DateTime.
In the _dv hook, add

Code: Select all

		$html = str_replace('format: AppGini.datetimeFormat(\'dt\')', 'format: \'MM/DD/YYYY\'', $html);

Post Reply