Print Friendly

# Class Ext.DatePicker

Package: | Ext
Class: | DatePicker
Extends: | Component
Defined In: | DatePicker.js

Simple date picker class.
Properties - Methods - Events - Config Options

## Public Properties

Property | Defined By
--- | ---
| disabled : Object | Component
true if this component is disabled. Read-only.
| disabledClass : Object | Component
CSS class added to the component when it is disabled.
| hidden : Object | Component
true if this component is hidden. Read-only.
| rendered : Object | Component
true if this component has been rendered. Read-only.

## Public Methods

Method | Defined By
--- | ---
| DatePicker(`Object config`) | DatePicker
Create a new DatePicker
| addEvents(`Object object`) : void | Observable
Copies any events from the passed object onto this object if they do not already exist. The passed object must also ...
| addListener(`String eventName`, `Function handler`, [`Object scope`], [`Object options`]) : void | Observable
Appends an event handler to this component
| disable() : void | Component
Disable this component
| enable() : void | Component
Enable this component
| fireEvent(`String eventName`, `Object... args`) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| focus(`Boolean selectText`) : void | Component
Try to focus this component
| getEl() : Ext.Element | Component
Returns the underlying Ext.Element
| getId() : String | Component
Returns the id of this component
| getValue() : Date | DatePicker
Gets the current selected value of the date field
| hasListener(`String eventName`) : Boolean | Observable
Checks to see if this object is currently listening for a specified event
| hide() : void | Component
Hide this component
| isVisible() : void | Component
Returns true if this component is visible
| on(`String eventName`, `Function handler`, [`Object options`]) : void | Observable
Appends an event handler to this element (shorthand for addListener)
| purgeListeners() : void | Observable
Removes all listeners for this object
| removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener
| render([`String/HTMLElement/Element container`]) : void | Component
If this is a lazy rendering component, render it to its container element
| setDisabled(`Boolean disabled`) : void | Component
Convenience function for setting disabled/enabled by boolean
| setValue(`Date value`) : void | DatePicker
Sets the value of the date field
| setVisible(`Boolean visible`) : void | Component
Convenience function to hide or show this component by boolean
| show() : void | Component
Show this component
| un(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener (shorthand for removeListener)

## Public Events

Event | Defined By
--- | ---
| beforedestroy : (`Ext.Component this`) | Component
Fires before the component is destroyed
| beforehide : (`Ext.Component this`) | Component
Fires before the component is hidden
| beforerender : (`Ext.Component this`) | Component
Fires before the component is rendered
| beforeshow : (`Ext.Component this`) | Component
Fires before the component is shown
| destroy : (`Ext.Component this`) | Component
Fires after the component is destroyed
| disable : (`Ext.Component this`) | Component
Fires after the component is disabled
| enable : (`Ext.Component this`) | Component
Fires after the component is enabled
| hide : (`Ext.Component this`) | Component
Fires after the component is hidden
| render : (`Ext.Component this`) | Component
Fires after the component is rendered
| select : (`DatePicker this`, `Date date`) | DatePicker
Fires when a date is selected
| show : (`Ext.Component this`) | Component
Fires after the component is shown

## Config Options

Config Options | Defined By
--- | ---
| constrainToViewport : Boolean | DatePicker
True to constrain the date picker to the viewport (defaults to true)
| dayNames : Array | DatePicker
An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
| disabledDatesRE : RegExp | DatePicker
JavaScript regular expression used to disable a pattern of dates (defaults to null)
| disabledDatesText : String | DatePicker
The tooltip text to display when the date falls on a disabled date (defaults to "")
| disabledDays : Array | DatePicker
An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
| disabledDaysText : String | DatePicker
The tooltip to display when the date falls on a disabled day (defaults to "")
| format : String | DatePicker
The default date format string which can be overriden for localization support. The format must be valid according to...
| maxDate : Date | DatePicker
Maximum allowable date (JavaScript date object, defaults to null)
| maxText : String | DatePicker
The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
| minDate : Date | DatePicker
Minimum allowable date (JavaScript date object, defaults to null)
| minText : String | DatePicker
The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
| monthNames : Array | DatePicker
An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
| monthYearText : String | DatePicker
The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
| nextText : String | DatePicker
The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
| prevText : String | DatePicker
The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
| startDay : Number | DatePicker
Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
| todayText : String | DatePicker
The text to display on the button that selects the current date (defaults to "Today")
| todayTip : String | DatePicker
The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")

## Property Details

### disabled

`public Object disabled`
true if this component is disabled. Read-only.
This property is defined by Component.

### disabledClass

`public Object disabledClass`
CSS class added to the component when it is disabled.
This property is defined by Component.

### hidden

`public Object hidden`
true if this component is hidden. Read-only.
This property is defined by Component.

### rendered

`public Object rendered`
true if this component has been rendered. Read-only.
This property is defined by Component.

## Constructor Details

### DatePicker

`public function DatePicker(`Object config`)`
Create a new DatePicker
Parameters:

- `config` : Object
  The config object

## Method Details

### addEvents

`public function addEvents(`Object object`)`
Copies any events from the passed object onto this object if they do not already exist. The passed object must also inherit from Observable for this method to have any effect.
Parameters:

- `object` : Object
  The object from which to copy events

Returns:

- `void`

This method is defined by Observable.

### addListener

`public function addListener(`String eventName`, `Function handler`, [`Object scope`], [`Object options`])`
Appends an event handler to this component
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope in which to execute the handler function. The handler function's "this" context.
- `options` : Object
  (optional) An object containing handler configuration properties. This may contain any of the following properties:
  - scope {Object} The scope in which to execute the handler function. The handler function's "this" context.
  - delegate {String} A simple selector to filter the target or look for a descendant of the target
  - stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.
  - preventDefault {Boolean} True to prevent the default action
  - stopPropagation {Boolean} True to prevent event propagation
  - normalized {Boolean} False to pass a browser event to the handler function instead of an Ext.EventObject
  - delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.
  - single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.
  - buffer {Number} Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.

  Combining Options
  Using the options argument, it is possible to combine different types of listeners:
  A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)

  Code:

      el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });

  The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.

  Attaching multiple handlers in 1 call
  Code:

      el.on({ 'click' : { fn: this.onClick scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver scope: this }, 'mouseout' : { fn: this.onMouseOut scope: this } });

  Or a shorthand syntax:
  Code:

      el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });

Returns:

- `void`

This method is defined by Observable.

### disable

`public function disable()`
Disable this component
Parameters:

- None.

Returns:

- `void`

This method is defined by Component.

### enable

`public function enable()`
Enable this component
Parameters:

- None.

Returns:

- `void`

This method is defined by Component.

### fireEvent

`public function fireEvent(`String eventName`, `Object... args`)`
Fires the specified event with the passed parameters (minus the event name).
Parameters:

- `eventName` : String
- `args` : Object...
  Variable number of parameters are passed to handlers

Returns:

- `Boolean`
  returns false if any of the handlers return false otherwise it returns true

This method is defined by Observable.

### focus

`public function focus(`Boolean selectText`)`
Try to focus this component
Parameters:

- `selectText` : Boolean
  True to also select the text in this component (if applicable)

Returns:

- `void`

This method is defined by Component.

### getEl

`public function getEl()`
Returns the underlying Ext.Element
Parameters:

- None.

Returns:

- `Ext.Element`
  The element

This method is defined by Component.

### getId

`public function getId()`
Returns the id of this component
Parameters:

- None.

Returns:

- `String`

This method is defined by Component.

### getValue

`public function getValue()`
Gets the current selected value of the date field
Parameters:

- None.

Returns:

- `Date`
  The selected date

This method is defined by DatePicker.

### hasListener

`public function hasListener(`String eventName`)`
Checks to see if this object is currently listening for a specified event
Parameters:

- `eventName` : String
  The name of the event to check for

Returns:

- `Boolean`
  True if the event is being listened for, else false

This method is defined by Observable.

### hide

`public function hide()`
Hide this component
Parameters:

- None.

Returns:

- `void`

This method is defined by Component.

### isVisible

`public function isVisible()`
Returns true if this component is visible
Parameters:

- None.

Returns:

- `void`

This method is defined by Component.

### on

`public function on(`String eventName`, `Function handler`, [`Object options`])`
Appends an event handler to this element (shorthand for addListener)
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `options` : Object
  (optional)

Returns:

- `void`

This method is defined by Observable.

### purgeListeners

`public function purgeListeners()`
Removes all listeners for this object
Parameters:

- None.

Returns:

- `void`

This method is defined by Observable.

### removeListener

`public function removeListener(`String eventName`, `Function handler`, [`Object scope`])`
Removes a listener
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The handler to remove
- `scope` : Object
  (optional) The scope (this object) for the handler

Returns:

- `void`

This method is defined by Observable.

### render

`public function render([`String/HTMLElement/Element container`])`
If this is a lazy rendering component, render it to its container element
Parameters:

- `container` : String/HTMLElement/Element
  (optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.

Returns:

- `void`

This method is defined by Component.

### setDisabled

`public function setDisabled(`Boolean disabled`)`
Convenience function for setting disabled/enabled by boolean
Parameters:

- `disabled` : Boolean

Returns:

- `void`

This method is defined by Component.

### setValue

`public function setValue(`Date value`)`
Sets the value of the date field
Parameters:

- `value` : Date
  The date to set

Returns:

- `void`

This method is defined by DatePicker.

### setVisible

`public function setVisible(`Boolean visible`)`
Convenience function to hide or show this component by boolean
Parameters:

- `visible` : Boolean
  True to show, false to hide

Returns:

- `void`

This method is defined by Component.

### show

`public function show()`
Show this component
Parameters:

- None.

Returns:

- `void`

This method is defined by Component.

### un

`public function un(`String eventName`, `Function handler`, [`Object scope`])`
Removes a listener (shorthand for removeListener)
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The handler to remove
- `scope` : Object
  (optional) The scope (this object) for the handler

Returns:

- `void`

This method is defined by Observable.

## Event Details

### beforedestroy

`public event beforedestroy`
Fires before the component is destroyed
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### beforehide

`public event beforehide`
Fires before the component is hidden
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### beforerender

`public event beforerender`
Fires before the component is rendered
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### beforeshow

`public event beforeshow`
Fires before the component is shown
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### destroy

`public event destroy`
Fires after the component is destroyed
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### disable

`public event disable`
Fires after the component is disabled
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### enable

`public event enable`
Fires after the component is enabled
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### hide

`public event hide`
Fires after the component is hidden
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### render

`public event render`
Fires after the component is rendered
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

### select

`public event select`
Fires when a date is selected
Subscribers will be called with the following parameters:

- `this` : DatePicker
- `date` : Date
  The selected date

This event is defined by DatePicker.

### show

`public event show`
Fires after the component is shown
Subscribers will be called with the following parameters:

- `this` : Ext.Component

This event is defined by Component.

## Config Details

### constrainToViewport

`constrainToViewport : Boolean`
True to constrain the date picker to the viewport (defaults to true)
This config option is defined by DatePicker.

### dayNames

`dayNames : Array`
An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
This config option is defined by DatePicker.

### disabledDatesRE

`disabledDatesRE : RegExp`
JavaScript regular expression used to disable a pattern of dates (defaults to null)
This config option is defined by DatePicker.

### disabledDatesText

`disabledDatesText : String`
The tooltip text to display when the date falls on a disabled date (defaults to "")
This config option is defined by DatePicker.

### disabledDays

`disabledDays : Array`
An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
This config option is defined by DatePicker.

### disabledDaysText

`disabledDaysText : String`
The tooltip to display when the date falls on a disabled day (defaults to "")
This config option is defined by DatePicker.

### format

`format : String`
The default date format string which can be overriden for localization support. The format must be valid according to Date.parseDate (defaults to 'm/d/y').
This config option is defined by DatePicker.

### maxDate

`maxDate : Date`
Maximum allowable date (JavaScript date object, defaults to null)
This config option is defined by DatePicker.

### maxText

`maxText : String`
The error text to display if the maxDate validation fails (defaults to "This date is after the maximum date")
This config option is defined by DatePicker.

### minDate

`minDate : Date`
Minimum allowable date (JavaScript date object, defaults to null)
This config option is defined by DatePicker.

### minText

`minText : String`
The error text to display if the minDate validation fails (defaults to "This date is before the minimum date")
This config option is defined by DatePicker.

### monthNames

`monthNames : Array`
An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
This config option is defined by DatePicker.

### monthYearText

`monthYearText : String`
The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
This config option is defined by DatePicker.

### nextText

`nextText : String`
The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
This config option is defined by DatePicker.

### prevText

`prevText : String`
The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
This config option is defined by DatePicker.

### startDay

`startDay : Number`
Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
This config option is defined by DatePicker.

### todayText

`todayText : String`
The text to display on the button that selects the current date (defaults to "Today")
This config option is defined by DatePicker.

### todayTip

`todayTip : String`
The tooltip to display for the button that selects the current date (defaults to "{current date} (Spacebar)")
This config option is defined by DatePicker.

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.