A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class
- * to allow browsing and selection of valid dates.
- *
All the string values documented below may be overridden by including an Ext locale file in
- * your page.
- * @constructor
- * Create a new DatePicker
- * @param {Object} config The config object
- * @xtype datepicker
+
+
/**
+ * A menu containing an Ext.picker.Date Component.
+ *
+ * Notes:
+ *
+ * - Although not listed here, the **constructor** for this class accepts all of the
+ * configuration options of **{@link Ext.picker.Date}**.
+ * - If subclassing DateMenu, any configuration options for the DatePicker must be applied
+ * to the **initialConfig** property of the DateMenu. Applying {@link Ext.picker.Date Date Picker}
+ * configuration settings to **this** will **not** affect the Date Picker's configuration.
+ *
+ * Example:
+ *
+ * @example
+ * var dateMenu = Ext.create('Ext.menu.DatePicker', {
+ * handler: function(dp, date){
+ * Ext.Msg.alert('Date Selected', 'You selected ' + Ext.Date.format(date, 'M j, Y'));
+ * }
+ * });
+ *
+ * Ext.create('Ext.menu.Menu', {
+ * width: 100,
+ * height: 90,
+ * floating: false, // usually you want this set to True (default)
+ * renderTo: Ext.getBody(), // usually rendered by it's containing component
+ * items: [{
+ * text: 'choose a date',
+ * menu: dateMenu
+ * },{
+ * iconCls: 'add16',
+ * text: 'icon item'
+ * },{
+ * text: 'regular item'
+ * }]
+ * });
*/
-Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
- /**
- * @cfg {String} todayText
- * The text to display on the button that selects the current date (defaults to 'Today')
- */
- todayText : 'Today',
- /**
- * @cfg {String} okText
- * The text to display on the ok button (defaults to ' OK ' to give the user extra clicking room)
- */
- okText : ' OK ',
- /**
- * @cfg {String} cancelText
- * The text to display on the cancel button (defaults to 'Cancel')
- */
- cancelText : 'Cancel',
- /**
- * @cfg {Function} handler
- * Optional. A function that will handle the select event of this picker.
- * The handler is passed the following parameters:
- *
picker : DatePicker
This DatePicker.
- *
date : Date
The selected date.
- *
- */
- /**
- * @cfg {Object} scope
- * The scope (this reference) in which the {@link #handler}
- * function will be called. Defaults to this DatePicker instance.
- */
- /**
- * @cfg {String} todayTip
- * A string used to format the message for displaying in a tooltip over the button that
- * selects the current date. Defaults to '{0} (Spacebar)' where
- * the {0} token is replaced by today's date.
- */
- todayTip : '{0} (Spacebar)',
- /**
- * @cfg {String} minText
- * The error text to display if the minDate validation fails (defaults to 'This date is before the minimum date')
- */
- minText : 'This date is before the minimum date',
- /**
- * @cfg {String} maxText
- * The error text to display if the maxDate validation fails (defaults to 'This date is after the maximum date')
- */
- maxText : 'This date is after the maximum date',
- /**
- * @cfg {String} format
- * The default date format string which can be overriden for localization support. The format must be
- * valid according to {@link Date#parseDate} (defaults to 'm/d/y').
- */
- format : 'm/d/y',
- /**
- * @cfg {String} disabledDaysText
- * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
- */
- disabledDaysText : 'Disabled',
- /**
- * @cfg {String} disabledDatesText
- * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
- */
- disabledDatesText : 'Disabled',
- /**
- * @cfg {Array} monthNames
- * An array of textual month names which can be overriden for localization support (defaults to Date.monthNames)
- */
- monthNames : Date.monthNames,
- /**
- * @cfg {Array} dayNames
- * An array of textual day names which can be overriden for localization support (defaults to Date.dayNames)
- */
- dayNames : Date.dayNames,
- /**
- * @cfg {String} nextText
- * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)')
- */
- nextText : 'Next Month (Control+Right)',
- /**
- * @cfg {String} prevText
- * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)')
- */
- prevText : 'Previous Month (Control+Left)',
- /**
- * @cfg {String} monthYearText
- * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)')
- */
- monthYearText : 'Choose a month (Control+Up/Down to move years)',
- /**
- * @cfg {Number} startDay
- * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
- */
- startDay : 0,
- /**
- * @cfg {Boolean} 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).
- */
- showToday : true,
- /**
- * @cfg {Date} minDate
- * Minimum allowable date (JavaScript date object, defaults to null)
- */
- /**
- * @cfg {Date} maxDate
- * Maximum allowable date (JavaScript date object, defaults to null)
- */
- /**
- * @cfg {Array} disabledDays
- * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
- */
- /**
- * @cfg {RegExp} disabledDatesRE
- * JavaScript regular expression used to disable a pattern of dates (defaults to null). The {@link #disabledDates}
- * config will generate this regex internally, but if you specify disabledDatesRE it will take precedence over the
- * disabledDates value.
- */
- /**
- * @cfg {Array} 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 {@link #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'].
- */
-
- // private
- // Set by other components to stop the picker focus being updated when the value changes.
- focusOnSelect: true,
-
- // default value used to initialise each date in the DatePicker
- // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
- initHour: 12, // 24-hour format
+ Ext.define('Ext.menu.DatePicker', {
+ extend: 'Ext.menu.Menu',
- // private
- initComponent : function(){
- Ext.DatePicker.superclass.initComponent.call(this);
-
- this.value = this.value ?
- this.value.clearTime(true) : new Date().clearTime();
-
- this.addEvents(
- /**
- * @event select
- * Fires when a date is selected
- * @param {DatePicker} this DatePicker
- * @param {Date} date The selected date
- */
- 'select'
- );
-
- if(this.handler){
- this.on('select', this.handler, this.scope || this);
- }
+ alias: 'widget.datemenu',
- this.initDisabledDays();
- },
-
- // private
- initDisabledDays : function(){
- if(!this.disabledDatesRE && this.disabledDates){
- var dd = this.disabledDates,
- len = dd.length - 1,
- re = '(?:';
-
- Ext.each(dd, function(d, i){
- re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
- if(i != len){
- re += '|';
- }
- }, this);
- this.disabledDatesRE = new RegExp(re + ')');
- }
- },
+ requires: [
+ 'Ext.picker.Date'
+ ],
- /**
- * Replaces any existing disabled dates with new values and refreshes the DatePicker.
- * @param {Array/RegExp} disabledDates An array of date strings (see the {@link #disabledDates} config
- * for details on supported values), or a JavaScript regular expression used to disable a pattern of dates.
+ /**
+ * @cfg {Boolean} hideOnClick
+ * False to continue showing the menu after a date is selected.
*/
- setDisabledDates : function(dd){
- if(Ext.isArray(dd)){
- this.disabledDates = dd;
- this.disabledDatesRE = null;
- }else{
- this.disabledDatesRE = dd;
- }
- this.initDisabledDays();
- this.update(this.value, true);
- },
+ hideOnClick : true,
- /**
- * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
- * @param {Array} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config
- * for details on supported values.
+ /**
+ * @cfg {String} pickerId
+ * An id to assign to the underlying date picker.
*/
- setDisabledDays : function(dd){
- this.disabledDays = dd;
- this.update(this.value, true);
- },
+ pickerId : null,
- /**
- * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
- * @param {Date} value The minimum date that can be selected
+ /**
+ * @cfg {Number} maxHeight
+ * @hide
*/
- setMinDate : function(dt){
- this.minDate = dt;
- this.update(this.value, true);
- },
- /**
- * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
- * @param {Date} value The maximum date that can be selected
+ /**
+ * @property {Ext.picker.Date} picker
+ * The {@link Ext.picker.Date} instance for this DateMenu
*/
- setMaxDate : function(dt){
- this.maxDate = dt;
- this.update(this.value, true);
- },
- /**
- * Sets the value of the date field
- * @param {Date} value The date to set
+ /**
+ * @event click
+ * @hide
*/
- setValue : function(value){
- this.value = value.clearTime(true);
- this.update(this.value);
- },
- /**
- * Gets the current selected value of the date field
- * @return {Date} The selected date
+ /**
+ * @event itemclick
+ * @hide
*/
- getValue : function(){
- return this.value;
- },
-
- // private
- focus : function(){
- this.update(this.activeDate);
- },
-
- // private
- onEnable: function(initial){
- Ext.DatePicker.superclass.onEnable.call(this);
- this.doDisabled(false);
- this.update(initial ? this.value : this.activeDate);
- if(Ext.isIE){
- this.el.repaint();
- }
-
- },
-
- // private
- onDisable : function(){
- Ext.DatePicker.superclass.onDisable.call(this);
- this.doDisabled(true);
- if(Ext.isIE && !Ext.isIE8){
- /* Really strange problem in IE6/7, when disabled, have to explicitly
- * repaint each of the nodes to get them to display correctly, simply
- * calling repaint on the main element doesn't appear to be enough.
- */
- Ext.each([].concat(this.textNodes, this.el.query('th span')), function(el){
- Ext.fly(el).repaint();
- });
- }
- },
-
- // private
- doDisabled : function(disabled){
- this.keyNav.setDisabled(disabled);
- this.prevRepeater.setDisabled(disabled);
- this.nextRepeater.setDisabled(disabled);
- if(this.showToday){
- this.todayKeyListener.setDisabled(disabled);
- this.todayBtn.setDisabled(disabled);
- }
- },
-
- // private
- onRender : function(container, position){
- var m = [
- '
',
- '
',
- '
'],
- dn = this.dayNames,
- i;
- for(i = 0; i < 7; i++){
- var d = this.startDay+i;
- if(d > 6){
- d = d-7;
- }
- m.push('