Clear Up
SharpKit Reference

Date Class

Provides a date input field with a date picker dropdown and automatic date validation.

This field recognizes and uses the JavaScript Date object as its main value type. In addition, it recognizes string values which are parsed according to the format and/or altFormats configs. These may be reconfigured to use date formats appropriate for the user's locale.

The field may be limited to a certain range of dates by using the minValue, maxValue, disabledDays, and disabledDates config parameters. These configurations will be used both in the field's validation, and in the date picker dropdown by preventing invalid dates from being selected.

Example usage

  
    Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 300,
            bodyPadding: 10,
            title: 'Dates',
            items: [{
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'From',
            name: 'from_date',
            maxValue: new Date()  // limited to the current date or prior
            }, {
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'To',
            name: 'to_date',
            value: new Date()  // defaults to today
            }]
            });
            

Date Formats Examples

This example shows a couple of different date format parsing scenarios. Both use custom date format configurations; the first one matches the configured format while the second matches the altFormats.

  
    Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 300,
            bodyPadding: 10,
            title: 'Dates',
            items: [{
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'Date',
            name: 'date',
            // The value matches the format; will be parsed and displayed using that format.
            format: 'm d Y',
            value: '2 4 1978'
            }, {
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'Date',
            name: 'date',
            // The value does not match the format, but does match an altFormat; will be parsed
            // using the altFormat and displayed using the format.
            format: 'm d Y',
            altFormats: 'm,d,Y|m.d.Y',
            value: '2.4.1978'
            }]
            });
            

Namespace: Ext.form.field

Constructors

Fields

Name Description
altFormats Multiple date formats separated by "|" to try when parsing a user input value and it does not match the defined format. Defaults to: "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j"
disabledDates An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular expression so they are very powerful. Some examples:
// disable these exact dates:
            disabledDates: ["03/08/2003", "09/16/2003"]
            // disable these days for every year:
            disabledDates: ["03/08", "09/16"]
            // only match the beginning (useful if you are using short years):
            disabledDates: ["^03/08"]
            // disable every day in March 2006:
            disabledDates: ["03/../2006"]
            // disable every day in every March:
            disabledDates: ["^03"]
            
Note that the format of the dates included in the array should exactly match the format config. In order to support regular expressions, if you are using a date format that has "." in it, you will have to escape the dot when restricting dates. For example: ["03\\.08\\.03"].
disabledDatesText The tooltip text to display when the date falls on a disabled date. Defaults to: "Disabled"
disabledDays An array of days to disable, 0 based. Some examples:
// disable Sunday and Saturday:
            disabledDays:  [0, 6]
            // disable weekdays:
            disabledDays: [1,2,3,4,5]
            
disabledDaysText The tooltip to display when the date falls on a disabled day. Defaults to: "Disabled"
format The default date format string which can be overriden for localization support. The format must be valid according to Ext.Date.parse. Defaults to: "m/d/Y"
maxText The error text to display when the date in the cell is after maxValue. Defaults to: "The date in this field must be equal to or before {0}"
maxValue The maximum allowed date. Can be either a Javascript date object or a string date in a valid format.
minText The error text to display when the date in the cell is before minValue. Defaults to: "The date in this field must be equal to or after {0}"
minValue The minimum allowed date. Can be either a Javascript date object or a string date in a valid format.
showToday false to hide the footer area of the Date picker containing the Today button and disable the keyboard handler for spacebar that selects the current date. Defaults to: true
startDay Day index at which the week should begin, 0-based. Defaults to 0 (Sunday).
submitFormat The date format string which will be submitted to the server. The format must be valid according to Ext.Date.parse. Defaults to format.
useStrict True to enforce strict date parsing to prevent the default Javascript "date rollover". Defaults to the useStrict parameter set on Ext.Date See Ext.Date.parse.

Methods

Name Description
safeParse(JsString, JsString) Attempts to parse a given string value using a given date format.
setDisabledDates(JsArray<T>) Replaces any existing disabled dates with new values and refreshes the Date picker.
setDisabledDays(JsArray<T>) Replaces any existing disabled days (by index, 0-6) with new values and refreshes the Date picker.
setMaxValue(JsDate) Replaces any existing maxValue with the new value and refreshes the Date picker.
setMinValue(JsDate) Replaces any existing minValue with the new value and refreshes the Date picker.
© Copyright 2005-2011 SharpKit. All rights reserved.