DateField
Widget

A Date field widget consisting of a date input field + a date picker.

It can be configured to allow user typing dates, or to only allow selection from the date picker (see editable). It can also validate that the date is within a specified range (see min -> max). It also optionally show step triggers to increment or decrement the date (see step & stepTriggers):

This field can be used as an editor for a grid column. It is used as the default editor for the DateColumn class.

// minimal DateField config with date format specified
const dateField = new DateField({
  format: 'YYMMDD'
});

Accessibility

This widget can be operated using the keyboard. When the field is focused, ArrowDown opens the date picker, which itself is keyboard navigable. Shift+ArrowDown activates the step back trigger. Shift+ArrowUp activates the step forwards trigger.

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

format : StringL

Format for date displayed in field. Defaults to using long date format, as defined by current locale (L)

Has a corresponding runtime format property.
keepTime : Boolean/Date/Stringfalse
A flag which indicates what time should be used for selected date. false by default which means time is reset to midnight.

Possible options are:
- false to reset time to midnight
- true to keep original time value
- '17:00' a string which is parsed automatically
- new Date(2020, 0, 1, 17) a date object to copy time from
- 'entered' to keep time value entered by user (in case format includes time info)
max : String/Date

Max value

Has a corresponding runtime max property.
min : String/Date

Min value

Has a corresponding runtime min property.
partner : String/TimeField

A reference to a partner TimeField which this DateField should sync its value with. When the TimeField's value is changed, this DateField's value is updated to match. When this DateField's value is changed, the TimeField's value is updated to match.

When a string is passed, this is taken to be the widget's reference property and the actual TimeField is looked up in the same owner container as this TimeField. If the reference cannot be found there, the string is used as a widget id.

Has a corresponding runtime partner property.

picker : DatePickerConfig

A config object used to configure the datePicker.

dateField = new DateField({
    picker : {
        tbar : {
            items : {
                // Remove the prev year and next year buttons by setting them to null.
                // Move the prev month button to just before the next month button by increasing its weight
                prevYear  : null,
                nextYear  : null,
                prevMonth : {
                    weight : 390
                }
            }
        }
    }

pickerFormat : String

Format for date in the picker. Uses localized format per default
step : String/Number/DurationConfig

Time increment duration value. If specified, forward and back triggers are displayed. The value is taken to be a string consisting of the numeric magnitude and the units. The units may be a recognised unit abbreviation of this locale or the full local unit name. For example '1d' or '1w' or '1 week'. This may be specified as an object containing two properties: magnitude, a Number, and unit, a String

Has a corresponding runtime step property.
stepTriggers : Booleantrue

Set to false to hide the forward and backward date step triggers. These triggers are only shown when step is set.
strictParsing : Booleanfalse

A flag which indicates whether the date parsing should be strict - meaning if the date is missing a year/month/day part - parsing fails.

Turned off by default, meaning default values are substituted for missing parts.
triggers : Object<String, FieldTriggerConfig>
Widgets that trigger functionality upon click. Each trigger icon is a Widget instance which may be hidden, shown and observed and styled just like any other widget.
- expand : FieldTriggerConfig
  
  Expands the date picker to select a date
- back : FieldTriggerConfig
  
  Subtracts the step from the current date
- forward : FieldTriggerConfig
  
  Adds the step to the current date
- clear : FieldTriggerConfig
  
  Clears the field value, only available if this field is clearable
Has a corresponding runtime triggers property.
validateDateOnly : Boolean

internal

Set to true to first clear time of the field's value before comparing it to the max value
value : String/Date

Value, which can be a Date or a string. If a string is specified, it will be converted using the specified format

Has a corresponding runtime value property.
weekStartDay : Number

The week start day in the picker, 0 meaning Sunday, 6 meaning Saturday. Uses localized value per default.

Properties

Properties are getters/setters or publicly accessible variables on this class

isDateField : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of DateField class, or subclass thereof.

format : String

Get / set format for date displayed in field (see format for formatting options).

Has a corresponding format config.
max : String/Date

Get/set max value, which can be a Date or a string. If a string is specified, it will be converted using the specified format.

Has a corresponding max config.
min : String/Date

Get/set min value, which can be a Date or a string. If a string is specified, it will be converted using the specified format.

Has a corresponding min config.
partner : String/TimeField

A reference to a partner TimeField which this DateField should sync its value with. When the TimeField's value is changed, this DateField's value is updated to match. When this DateField's value is changed, the TimeField's value is updated to match.

When a string is passed, this is taken to be the widget's reference property and the actual TimeField is looked up in the same owner container as this TimeField. If the reference cannot be found there, the string is used as a widget id.

Has a corresponding partner config.
step : String/Number/DurationConfig

The step property may be set in object form specifying two properties, magnitude, a Number, and unit, a String.

If a Number is passed, the step's current unit is used (or day if no current step set) and just the magnitude is changed.

If a String is passed, it is parsed by parseDuration, for example '1d', '1 d', '1 day', or '1 day'.

Upon read, the value is always returned in object form containing magnitude and unit.

Has a corresponding step config.
triggers : Object<String, FieldTriggerConfig>
Widgets that trigger functionality upon click. Each trigger icon is a Widget instance which may be hidden, shown and observed and styled just like any other widget.
- expand : FieldTriggerConfig
  
  Expands the date picker to select a date
- back : FieldTriggerConfig
  
  Subtracts the step from the current date
- forward : FieldTriggerConfig
  
  Adds the step to the current date
- clear : FieldTriggerConfig
  
  Clears the field value, only available if this field is clearable
Has a corresponding triggers config.
value : String/Date

Get/set value, which can be set as a Date or a string but always returns a Date. If a string is specified, it will be converted using the specified format

Has a corresponding value config.
isDateField : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of DateField class, or subclass thereof.

Functions

Functions are methods available for calling on the class

changePicker( )

internal

Creates default picker widget

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

change

Fired when this field's value changes.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onChange

Called when this field's value changes.

type: datefield

Source path

Core/widget/DateField.js

DateField
Widget

Accessibility

Configs

Properties

Functions

Events

Event handlers

Source path

Inheritance tree6

Mixins9

Contents

DateField Widget

Accessibility

Configs

Properties

Functions

Events

Event handlers

Source path

Inheritance tree6

Mixins9

Contents

DateField
Widget