Clear Up
SharpKit Reference

Date Class

A date picker. This class is used by the Ext.form.field.Date field to allow browsing and selection of valid dates in a popup next to the field, but may also be used with other components.

Typically you will need to implement a handler function to be notified when the user chooses a date from the picker; you can register the handler using the select event, or by implementing the handler method.

By default the user will be allowed to pick any date; this can be changed by using the minDate, maxDate, disabledDays, disabledDatesRE, and/or disabledDates configs.

All the string values documented below may be overridden by including an Ext locale file in your page.

  
    Ext.create('Ext.panel.Panel', {
            title: 'Choose a future date:',
            width: 200,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
            xtype: 'datepicker',
            minDate: new Date(),
            handler: function(picker, date) {
            // do something with the selected date
            }
            }]
            });
            

Namespace: Ext.picker

Constructors

Fields

Name Description
ariaTitle The text to display for the aria title Defaults to: "Date Picker: {0}"
ariaTitleDateFormat The date format to display for the current value in the ariaTitle Defaults to: "F d, Y"
dayNames An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)
disableAnim True to disable animations when showing the month picker. Defaults to: false
disabledCellCls The class to apply to disabled cells. Defaults to: "x-datepicker-disabled"
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:
  • ['03/08/2003', '09/16/2003'] would disable those exact dates
  • ['03/08', '09/16'] would disable those days for every year
  • ['03/08'] would only match the beginning (useful if you are using short years)
  • ['03/../2006'] would disable every day in March 2006
  • ['03'] would disable every day in every March
  • 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'].
    disabledDatesRE JavaScript regular expression used to disable a pattern of dates. The disabledDates config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the disabledDates value. Defaults to: null
    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. For example, [0, 6] disables Sunday and Saturday. Defaults to: null
    disabledDaysText The tooltip to display when the date falls on a disabled day. Defaults to: "Disabled"
    focusOnShow True to automatically focus the picker on show. Defaults to: false
    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 Ext.Date.defaultFormat).
    handler Optional. A function that will handle the select event of this picker. The handler is passed the following parameters:
  • picker : Ext.picker.Date
  • This Date picker.
  • date : Date
  • The selected date.
    keyNavConfig Specifies optional custom key event handlers for the Ext.util.KeyNav attached to this date picker. Must conform to the config format recognized by the Ext.util.KeyNav constructor. Handlers specified in this object will replace default handlers of the same name.
    longDayFormat The format for displaying a date in a longer format. Defaults to: "F d, Y"
    maxDate Maximum allowable date (JavaScript date object) Defaults to: null
    maxText The error text to display if the maxDate validation fails. Defaults to: "This date is after the maximum date"
    minDate Minimum allowable date (JavaScript date object) Defaults to: null
    minText The error text to display if the minDate validation fails. Defaults to: "This date is before the minimum date"
    monthNames An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)
    monthYearFormat The date format for the header month Defaults to: "F Y"
    monthYearText The header month selector tooltip Defaults to: "Choose a month (Control+Up/Down to move years)"
    nextText The next month navigation button tooltip Defaults to: "Next Month (Control+Right)"
    prevText The previous month navigation button tooltip Defaults to: "Previous Month (Control+Left)"
    scope The scope (this reference) in which the handler function will be called. Defaults to this DatePicker instance.
    selectedCls The class to apply to the selected cell. Defaults to: "x-datepicker-selected"
    showToday False to hide the footer area 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).
    todayText The text to display on the button that selects the current date Defaults to: "Today"
    todayTip A string used to format the message for displaying in a tooltip over the button that selects the current date. The {0} token in string is replaced by today's date. Defaults to: "{0} (Spacebar)"

    Methods

    Name Description
    getDayInitial(object) Gets a single character to represent the day of the week
    getValue() Gets the current selected value of the date field
    hideMonthPicker(object) Hides the month picker, if it's visible.
    selectToday() Sets the current value to today.
    setDisabledDates(object) Replaces any existing disabled dates with new values and refreshes the DatePicker.
    setDisabledDays(JsArray<T>) Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
    setMaxDate(JsDate) Replaces any existing maxDate with the new value and refreshes the DatePicker.
    setMinDate(JsDate) Replaces any existing minDate with the new value and refreshes the DatePicker.
    setValue(JsDate) Sets the value of the date field
    showMonthPicker(object) Show the month picker
    showNextMonth(object) Show the next month.
    showNextYear() Show the next year.
    showPrevMonth(object) Show the previous month.
    showPrevYear() Show the previous year.
    © Copyright 2005-2011 SharpKit. All rights reserved.