extjs 年份控件和年月控件（使用看软件说明）

/*! * Ext JS Library 3.2.0 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */ /** * @class form.date.MyDatePicker * @extends Ext.Component * <p>A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class * to allow browsing and selection of valid dates.</p> * <p>All the string values documented below may be overridden by including an Ext locale file in * your page.</p> * @constructor * Create a new DatePicker * @param {Object} config The config object * @xtype datepicker */ Ext.ns("form.date.menu") form.date.MyDatePicker = Ext.extend(Ext.BoxComponent, { /** * @cfg {String} todayText * The text to display on the button that selects the current date (defaults to <code>'Today'</code>) */ todayText : 'Today', /** * @cfg {String} okText * The text to display on the ok button (defaults to <code>'&#160;OK&#160;'</code> to give the user extra clicking room) */ okText : '&#160;OK&#160;', /** * @cfg {String} cancelText * The text to display on the cancel button (defaults to <code>'Cancel'</code>) */ cancelText : 'Cancel', /** * @cfg {Function} handler * Optional. A function that will handle the select event of this picker. * The handler is passed the following parameters:<div class="mdetail-params"><ul> * <li><code>picker</code> : MyDatePicker<div class="sub-desc">This MyDatePicker.</div></li> * <li><code>date</code> : Date<div class="sub-desc">The selected date.</div></li> * </ul></div> */ /** * @cfg {Object} scope * The scope (<code><b>this</b></code> reference) in which the <code>{@link #handler}</code> * function will be called. Defaults to this MyDatePicker 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 <code>'{0} (Spacebar)'</code> where * the <code>{0}</code> 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 <code>'This date is before the minimum date'</code>) */ minText : 'This date is before the minimum date', /** * @cfg {String} maxText * The error text to display if the maxDate validation fails (defaults to <code>'This date is after the maximum date'</code>) */ 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 <code>'m/d/y'</code>). */ format : 'm/d/y', /** * @cfg {String} disabledDaysText * The tooltip to display when the date falls on a disabled day (defaults to <code>'Disabled'</code>) */ disabledDaysText : 'Disabled', /** * @cfg {String} disabledDatesText * The tooltip text to display when the date falls on a disabled date (defaults to <code>'Disabled'</code>) */ 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 <code>'Next Month (Control+Right)'</code>) */ nextText : 'Next Month (Control+Right)', /** * @cfg {String} prevText * The previous month navigation button tooltip (defaults to <code>'Previous Month (Control+Left)'</code>) */ prevText : 'Previous Month (Control+Left)', /** * @cfg {String} monthYearText * The header month selector tooltip (defaults to <code>'Choose a month (Control+Up/Down to move years)'</code>) */ monthYearText : 'MyExt: 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 <code>true</code>). */ 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: * <ul> * <li>['03/08/2003', '09/16/2003'] would disable those exact dates</li> * <li>['03/08', '09/16'] would disable those days for every year</li> * <li>['^03/08'] would only match the beginning (useful if you are using short years)</li> * <li>['03/../2006'] would disable every day in March 2006</li> * <li>['^03'] would disable every day in every March</li> * </ul> * 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 MyDatePicker // (note: 12 noon was chosen because it steers well clear of all DST timezone changes) initHour: 12, // 24-hour format // private initComponent : function(){ form.date.MyDatePicker.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 {MyDatePicker} this MyDatePicker * @param {Date} date The selected date */ 'select' ); if(this.handler){ this.on('select', this.handler, this.scope || this); } 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 + ')');