Date time pickers


Components

Appframe Web provides you with a set of components that you can use you easily create more complex UI elements.

For Date field, the picked, saved and displayed value always is the same. The day will always be the same no matter the user current time zone.

For DateTime field, the picked and shown date is localized, however in a database DateTime field is saved in UTC format.


Date/time pickers

To add a date or time picker dropdown to your input element you must add an attribute. To get a date picker for example you should add: data-datepicker. Use data-timepicker to get a time picker.

    
<input data-datepicker="" 
    data-field="Established" 
    data-object-id="dsArtists0" 
    type="text" 
    class="form-control">
    

Optional attributes

  • data-max-date="2020-12-24" - Sets the maximum date that can be selected
  • data-min-date="2019-01-01" - Sets the minimum date that can be selected
  • data-year-range="[2019,2050]" - Sets the range of years that will be shown in the dropdown. This example will show years from 2019 to 2050
  • data-year-range="5" - Sets the range of years that will be shown in the dropdown. This example will show 5 years back and 5 years forward.
  • data-datepicker-utc="true" - Default true. Defines if picked value will return UTC or localized values.

Date picker methods

Picker supports additional events:

  • data-callback="someFnc" - will fire after date is picked. It will return date object as a parameter.
  • data-onshow="someFnc" - will fire before picker is shown on the screen. Will return picker object with method to set date for picker and shared object which contains: activePicker, containerpicker (datepicker documentation can be found here) and yearRangeSpecific objects. Through picker object advanced functionality can be added, e.g. min/max dates can be dynamically changed.
    
<input data-datepicker 
    data-field="Established" 
    data-callback="dateCallbackFnc" 
    data-onshow="dateOnShowFnc" 
    data-object-id="dsArtists3" 
    type="text" 
    class="form-control" 
    style="max-width: 200px;">
    
    
function dateCallbackFnc(pDate){ 
    console.log(pDate);  
} 
function dateOnShowFnc(pPicker){ 
    pPicker.setDate(new Date("2012-12-12")); 
    console.log(pPicker); 
    pPicker.shared.picker.setMinDate(new Date("2012-01-01"))
}

Changing field type to date

If there is a need for DateTime type fields to behave as Date, it is possible to convert field type:

To convert field type to Date when using view model:
dsDataSourceExample.getFields("FieldName").type = 'date'

To convert field type to Date without view model:
 dsDataSourceExample.getIinitialFields().find(function(x){return x.name === "FieldName"}).type = 'date'

Using Date and Time pickers together

It is possible to have separate date picker and time picker inputs for same field. Example:

<div data-object-id="dsArtists3">
    <div class="input-group">
        <input data-field="Established" class="form-control" data-datepicker data-format="yyyy/MM/dd" style="max-width: 120px;">
        <input data-field="Established" class="form-control" data-timepicker style="max-width: 80px;">
    </div>
</div>

Related articles

Placeholder "LocalizeWeb2016" failed