Date Picker

Default Date Picker

By default, date pickers will be rendered as a combination of three select boxes + one button:

Single Field Date Picker

If you want a single field date picker instead, you can turn any datetime field into a dropdown datepicker now.


This will work on datetime fields only, not on date fields. So please ensure you turn the fields you want to change into DateTime first. See Step 1 below.

For table view you will have to change the date format to get rid of the time-part which otherwise will always show up as 00:00:00. See Step 2 below.

Step 1

Create a new datetime field or change an existing date field into a datetime field:

After changing a datatype and re-generating your app, you should open Rebuild fields in Admin-Area and ensure that your datatype changes have been applied to your database correctly.

Step 2

In Table View, DateTime fields will be displayed including the selected time, for example
2008-03-28 13:41:12. When turning a datetime field into a datepicker, the time-part will always show up as 00:00:00 in table view.

To remove the time part in table view, please change the data format for the field:

Please note:
If you don't have a suitable format (without time part) in the list, yet, you may follow the next steps:

  1. Save your AppGini project and close AppGini
  2. Open your AppGini installation directory on your PC, which usually is
    C:\Program Files (x86)\AppGini_5.80\
    then open the subdirectory add-ons. There is a file named dataFormats.cfg inside.
  3. Create a backup of dataFormats.cfg
  4. Download the attachedZIP-file
    (see download link below)
  5. Extract and copy dataFormats.cfg from the ZIP-file into the add-ons-directory, overwrite the existing file
  6. Start AppGini and load your project
  7. Select the datetime field you wish to change and chose one of the new date formats


This will work on datetime fields only, not on date fields


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

Do you like it?