X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/picker/Date.js diff --git a/src/picker/Date.js b/src/picker/Date.js index e0f620d4..c972dc63 100644 --- a/src/picker/Date.js +++ b/src/picker/Date.js @@ -1,35 +1,43 @@ +/* + +This file is part of Ext JS 4 + +Copyright (c) 2011 Sencha Inc + +Contact: http://www.sencha.com/contact + +GNU General Public License Usage +This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. + +If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. + +*/ /** - * @class Ext.picker.Date - * @extends Ext.Component - *
A date picker. This class is used by the {@link 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 color from the - * picker; you can register the handler using the {@link #select} event, or by implementing the {@link #handler} - * method.
- *By default the user will be allowed to pick any date; this can be changed by using the {@link #minDate}, - * {@link #maxDate}, {@link #disabledDays}, {@link #disabledDatesRE}, and/or {@link #disabledDates} configs.
- *All the string values documented below may be overridden by including an Ext locale file in your page.
- *Example usage:
- *new 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
- }
- }]
-});
- * {@img Ext.picker.Date/Ext.picker.Date.png Ext.picker.Date component}
+ * 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 {@link #select} event, or by implementing the {@link #handler} method.
+ *
+ * By default the user will be allowed to pick any date; this can be changed by using the {@link #minDate},
+ * {@link #maxDate}, {@link #disabledDays}, {@link #disabledDatesRE}, and/or {@link #disabledDates} configs.
*
- * @constructor
- * Create a new DatePicker
- * @param {Object} config The config object
+ * All the string values documented below may be overridden by including an Ext locale file in your page.
*
- * @xtype datepicker
+ * @example
+ * 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
+ * }
+ * }]
+ * });
*/
Ext.define('Ext.picker.Date', {
extend: 'Ext.Component',
@@ -49,11 +57,11 @@ Ext.define('Ext.picker.Date', {
renderTpl: [
'{.:this.firstInitial} | ', @@ -71,7 +79,7 @@ Ext.define('Ext.picker.Date', { '
---|
'Today'
)
+ * The text to display on the button that selects the current date
*/
todayText : 'Today',
+
/**
* @cfg {Function} handler
- * Optional. A function that will handle the select event of this picker.
- * The handler is passed the following parameters:picker
: Ext.picker.Date date
: Date this
reference) in which the {@link #handler}
- * function will be called. Defaults to this DatePicker instance.
+ * 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.
+ * 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.
*/
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'
)
+ * The error text to display if the minDate validation fails.
*/
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'
)
+ * The error text to display if the maxDate validation fails.
*/
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 Ext.Date#parse} (defaults to {@link Ext.Date#defaultFormat}).
+ * The default date format string which can be overriden for localization support. The format must be valid
+ * according to {@link Ext.Date#parse} (defaults to {@link Ext.Date#defaultFormat}).
*/
+
/**
* @cfg {String} disabledDaysText
- * The tooltip to display when the date falls on a disabled day (defaults to 'Disabled'
)
+ * The tooltip to display when the date falls on a disabled day.
*/
disabledDaysText : 'Disabled',
+
/**
* @cfg {String} disabledDatesText
- * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled'
)
+ * The tooltip text to display when the date falls on a disabled date.
*/
disabledDatesText : 'Disabled',
+
/**
- * @cfg {Array} monthNames
+ * @cfg {String[]} monthNames
* An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)
*/
+
/**
- * @cfg {Array} dayNames
+ * @cfg {String[]} dayNames
* An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)
*/
+
/**
* @cfg {String} nextText
- * The next month navigation button tooltip (defaults to 'Next Month (Control+Right)'
)
+ * The next month navigation button tooltip
*/
nextText : 'Next Month (Control+Right)',
+
/**
* @cfg {String} prevText
- * The previous month navigation button tooltip (defaults to 'Previous Month (Control+Left)'
)
+ * The previous month navigation button tooltip
*/
prevText : 'Previous Month (Control+Left)',
+
/**
* @cfg {String} monthYearText
- * The header month selector tooltip (defaults to 'Choose a month (Control+Up/Down to move years)'
)
+ * The header month selector tooltip
*/
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)
+ * Day index at which the week should begin, 0-based (defaults to 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
).
+ * False to hide the footer area containing the Today button and disable the keyboard handler for spacebar that
+ * selects the current date.
*/
showToday : true,
+
/**
- * @cfg {Date} minDate
- * Minimum allowable date (JavaScript date object, defaults to null)
+ * @cfg {Date} [minDate=null]
+ * Minimum allowable date (JavaScript date object)
*/
+
/**
- * @cfg {Date} maxDate
- * Maximum allowable date (JavaScript date object, defaults to null)
+ * @cfg {Date} [maxDate=null]
+ * Maximum allowable date (JavaScript date object)
*/
+
/**
- * @cfg {Array} disabledDays
- * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday (defaults to null).
+ * @cfg {Number[]} [disabledDays=null]
+ * An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday.
*/
+
/**
- * @cfg {RegExp} disabledDatesRE
- * JavaScript regular expression used to disable a pattern of dates (defaults to null). The {@link #disabledDates}
+ * @cfg {RegExp} [disabledDatesRE=null]
+ * JavaScript regular expression used to disable a pattern of dates. 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:
- *