Clear Up
SharpKit Reference

DatePicker Class

Namespace: Ext.field

Base Types

System.Object

Constructors

Properties

Name Description
alias
alternateClassName This is a specialized field which shows a {@link Ext.picker.Date} when tapped. If it has a predefined value, or a value is selected in the {@link Ext.picker.Date}, it will be displayed like a normal {@link Ext.field.Text} (but not selectable/changable). Ext.create('Ext.field.DatePicker', { label: 'Birthday', value: new Date() }); {@link Ext.field.DatePicker} fields are very simple to implement, and have no required configurations. ## Examples It can be very useful to set a default {@link #value} configuration on {@link Ext.field.DatePicker} fields. In this example, we set the {@link #value} to be the current date. You can also use the {@link #setValue} method to update the value at any time. @example preview Ext.create('Ext.form.Panel', { fullscreen: true, items: [ { xtype: 'fieldset', items: [ { xtype: 'datepickerfield', label: 'Birthday', name: 'birthday', value: new Date() } ] }, { xtype: 'toolbar', docked: 'bottom', items: [ { xtype: 'spacer' }, { text: 'setValue', handler: function() { var datePickerField = Ext.ComponentQuery.query('datepickerfield')[0]; var randomNumber = function(from, to) { (to - from + 1) + from); }; datePickerField.setValue({ month: randomNumber(0, 11), day : randomNumber(0, 28), year : randomNumber(1980, 2011) }); } }, { xtype: 'spacer' } ] } ] }); When you need to retrieve the date from the {@link Ext.field.DatePicker}, you can either use the {@link #getValue} or {@link #getFormattedValue} methods: @example preview Ext.create('Ext.form.Panel', { fullscreen: true, items: [ { xtype: 'fieldset', items: [ { xtype: 'datepickerfield', label: 'Birthday', name: 'birthday', value: new Date() } ] }, { xtype: 'toolbar', docked: 'bottom', items: [ { text: 'getValue', handler: function() { var datePickerField = Ext.ComponentQuery.query('datepickerfield')[0]; Ext.Msg.alert(null, datePickerField.getValue()); } }, { xtype: 'spacer' }, { text: 'getFormattedValue', handler: function() { var datePickerField = Ext.ComponentQuery.query('datepickerfield')[0]; Ext.Msg.alert(null, datePickerField.getFormattedValue()); } } ] } ] });
extend This is a specialized field which shows a {@link Ext.picker.Date} when tapped. If it has a predefined value, or a value is selected in the {@link Ext.picker.Date}, it will be displayed like a normal {@link Ext.field.Text} (but not selectable/changable). Ext.create('Ext.field.DatePicker', { label: 'Birthday', value: new Date() }); {@link Ext.field.DatePicker} fields are very simple to implement, and have no required configurations. ## Examples It can be very useful to set a default {@link #value} configuration on {@link Ext.field.DatePicker} fields. In this example, we set the {@link #value} to be the current date. You can also use the {@link #setValue} method to update the value at any time. @example preview Ext.create('Ext.form.Panel', { fullscreen: true, items: [ { xtype: 'fieldset', items: [ { xtype: 'datepickerfield', label: 'Birthday', name: 'birthday', value: new Date() } ] }, { xtype: 'toolbar', docked: 'bottom', items: [ { xtype: 'spacer' }, { text: 'setValue', handler: function() { var datePickerField = Ext.ComponentQuery.query('datepickerfield')[0]; var randomNumber = function(from, to) { (to - from + 1) + from); }; datePickerField.setValue({ month: randomNumber(0, 11), day : randomNumber(0, 28), year : randomNumber(1980, 2011) }); } }, { xtype: 'spacer' } ] } ] }); When you need to retrieve the date from the {@link Ext.field.DatePicker}, you can either use the {@link #getValue} or {@link #getFormattedValue} methods: @example preview Ext.create('Ext.form.Panel', { fullscreen: true, items: [ { xtype: 'fieldset', items: [ { xtype: 'datepickerfield', label: 'Birthday', name: 'birthday', value: new Date() } ] }, { xtype: 'toolbar', docked: 'bottom', items: [ { text: 'getValue', handler: function() { var datePickerField = Ext.ComponentQuery.query('datepickerfield')[0]; Ext.Msg.alert(null, datePickerField.getValue()); } }, { xtype: 'spacer' }, { text: 'getFormattedValue', handler: function() { var datePickerField = Ext.ComponentQuery.query('datepickerfield')[0]; Ext.Msg.alert(null, datePickerField.getFormattedValue()); } } ] } ] });

Methods

Name Description
applyPicker(object)
applyValue(object)
getFormattedValue(bool) Returns the value of the field, which will be a {@link Date} unless the format parameter is true. @param {Boolean} format True to format the value with Ext.util.Format.defaultDateFormat
getValue()
initialize()
onDestroy()
onMaskTap() @private Listener to the tap event of the mask element. Shows the internal {@link #datePicker} component when the button has been tapped.
onPickerChange(Date, object) Called when the picker changes its value @param {Ext.picker.Date} picker The date picker @param {Object} value The new value from the date picker @private
onPickerHide() Destroys the picker when it is hidden, if {@link Ext.field.DatePicker#destroyPickerOnHide destroyPickerOnHide} is set to true @private
reset()
updatePicker(object)
updateValue(object)
© Copyright 2005-2011 SharpKit. All rights reserved.