B4J Tutorial [Web][SithasoDaisy] The eye opening truth about the FlatPickr Date / Time Picker

Hi Fam

Key: Let's keep it simple.

NB: If you choose to use a display format, the date picker INTERNALLY creates 2 inputs, one for the actual value and one for the display value. This is done by using your existing input and then creating another one. This newly created input gets to copy the "class" attribute details to the new one created.

Side Note: This second input has been rather challenging in some use cases and we have hopefully cleared these issues. If you experience any issues please send us word.

DATA: For this example, the data used for dates has been CAPTURED and STORED in this format.

"dob":"1999-04-20", "tob":"20:04", "dod":"2004-04-20", "doo":"2004-04-20 10:04"

1. Using the date time picker on the Table.

You can add this as a date picker, a time picker, a date time picker etc. This will allow you to select a date, time, or both time and time.

In the example above, we have activated the "display" format for both Date of Birth and Date of Death. How?

This is done by activating the Display/Alt Format of the date.

This is how these columns are created.

tb4.AddColumnDatePicker("dob", "Date of Birth", False, "Y-m-d", "F j, Y", False, False, False)
    tb4.AddColumnTimePicker("tob", "Time of Birth", False, "H:i", True)
    tb4.AddColumnDatePicker1("dod", "Date of Death", False, "Y-m-d", "d/m/Y", False, False, False, "it")

Date of Birth

tb4.AddColumnDatePicker("dob", "Date of Birth", False, "Y-m-d", "F j, Y", False, False, False)

The INTERNAL date format is 1999-04-20 i.e. Y-m-d, this is what will be stored in the database.
The DISPLAY date format is F j, Y - displaying the date as April 20, 1999

In your records and database, the date SHOULD BE STORED as YYYY-MM-DD, i.e. 1999-04-20 for example. When you enter the date on the input field, you should enter it as YYYY-MM-DD format also.

Time of Birth

tb4.AddColumnTimePicker("tob", "Time of Birth", False, "H:i", True)

The INTERNAL time format is 20:04 i.e. H:i, this is what will be stored in the database.
The DISPLAY time format is H;I - displaying the date as April 20:04, times have been hard coded to follow this format.

In your records and database, the time SHOULD BE STORED as HH:mm, i.e. 20:04 for example. When you enter the time on the input field, you should enter it as HH:mm format also.

Date of Death

  tb4.AddColumnDatePicker1("dod", "Date of Death", False, "Y-m-d", "d/m/Y", False, False, False, "it")

[/code]

The INTERNAL date format is 1999-04-20 i.e. Y-m-d, this is what will be stored in the database.
The DISPLAY date format is d/m/Y - displaying the date as 20/04/2004

This also has a locale of "it", changing the calendar to use that locale.

In your records and database, the date SHOULD BE STORED as YYYY-MM-DD, i.e. 2004-04-20 for example. When you enter the date on the input field, you should enter it as YYYY-MM-DD format also.

Date Time Picker

To use a date time picker, your INTERNAL format should be "Y-m-d H:i" and your output format can be anything you want. For more formats, see this link.

Let's add another column to demonstrate this which will also use the "es" locale

tb4.AddColumnDateTimePicker1("doo", "Date of Opening", False, "Y-m-d H:i", "d/m/Y H:i", False, False, False, "es")

2. Using a different INTERNAL date time format.

Let's assume that you decided to swap these around

from

tb4.AddColumnDatePicker("dob", "Date of Birth", False, "Y-m-d", "F j, Y", False, False, False)

to

tb4.AddColumnDatePicker("dob", "Date of Birth", False, "F j, Y",  "Y-m-d", False, False, False)

This means that the INTERNAL date format will now be, "April 20, 1999", meaning that when you enter your dates and save them in the database, you need to type in "April 20, 1999" and not "1999-04-20" like before. Your DISPLAY date will be 1999-04-20 though in this case.

Remember, its easy to sort dates stored in YYYY-MM-DD / "Y-m-d" (FlatPickr format) when stored as strings.

For more examples see the demo app, Tables - Code > Table 5

NB: If you dont want the date to be displayed in a different output format, you can leave the Display / AltFormat blank.

If the date format is not specified, it will take a format of YYYY-MM-DD HH:MM, and will assume your data follows that structure.

3. Using the Date Time Picker on Forms.

Date Time Picker Via Code

txtFlickDate7 = page.Cell(8, 1).AddDateTimePicker1("flatpickdate7", "Flat Pick Date Locale", "", "", "", True, "Y-m-d H:i", "none", True, "F j, Y H:i", False, False, "es")

For more examples see the demo app, Form Controls - Code > FlatPicker Date

One can also "refresh" the datepicker for those added by code, e.g.

txtFlickDate = page.Cell(2, 1).AddFlatPickDateTime("flatpickdate1", "Flat Pick Date", "", "", "", False)
txtFlickDate.Size = txtFlickTime.SizeSM
txtFlickDate.Color = app.COLOR_PRIMARY
txtFlickDate.RefreshDateTimePicker

This ensures that its formatted to suit the provided parameters.

Date Time Picker via the Abstract Designer

For more examples see the demo app, Form Controls - Designer > AD DatePicker

In the abstract designer, these are the properties that have been set including the locale settings.

 

[Mashiane]

Supported Locales

There are a variety of localed supposed by the date-time picker, these are:

var l10n = {
        ar: Arabic,
        at: Austria,
        az: Azerbaijan,
        be: Belarusian,
        bg: Bulgarian,
        bn: Bangla,
        bs: Bosnian,
        ca: Catalan,
        ckb: Kurdish,
        cat: Catalan,
        cs: Czech,
        cy: Welsh,
        da: Danish,
        de: German,
        default: __assign({}, english),
        en: english,
        eo: Esperanto,
        es: Spanish,
        et: Estonian,
        fa: Persian,
        fi: Finnish,
        fo: Faroese,
        fr: French,
        gr: Greek,
        he: Hebrew,
        hi: Hindi,
        hr: Croatian,
        hu: Hungarian,
        hy: Armenian,
        id: Indonesian,
        is: Icelandic,
        it: Italian,
        ja: Japanese,
        ka: Georgian,
        ko: Korean,
        km: Khmer,
        kz: Kazakh,
        lt: Lithuanian,
        lv: Latvian,
        mk: Macedonian,
        mn: Mongolian,
        ms: Malaysian,
        my: Burmese,
        nl: Dutch,
        nn: NorwegianNynorsk,
        no: Norwegian,
        pa: Punjabi,
        pl: Polish,
        pt: Portuguese,
        ro: Romanian,
        ru: Russian,
        si: Sinhala,
        sk: Slovak,
        sl: Slovenian,
        sq: Albanian,
        sr: Serbian,
        sv: Swedish,
        th: Thai,
        tr: Turkish,
        uk: Ukrainian,
        vn: Vietnamese,
        zh: Mandarin,
        zh_tw: MandarinTraditional,
        uz: Uzbek,
        uz_latn: UzbekLatin,
    };

use the key to specify your locale for it.