<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-picker-Date'>/**
|
</span> * 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.
|
*
|
* All the string values documented below may be overridden by including an Ext locale file in your page.
|
*
|
* @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',
|
requires: [
|
'Ext.XTemplate',
|
'Ext.button.Button',
|
'Ext.button.Split',
|
'Ext.util.ClickRepeater',
|
'Ext.util.KeyNav',
|
'Ext.EventObject',
|
'Ext.fx.Manager',
|
'Ext.picker.Month'
|
],
|
alias: 'widget.datepicker',
|
alternateClassName: 'Ext.DatePicker',
|
|
<span id='Ext-picker-Date-property-childEls'> childEls: [
|
</span> 'innerEl', 'eventEl', 'prevEl', 'nextEl', 'middleBtnEl', 'footerEl'
|
],
|
|
<span id='Ext-picker-Date-cfg-border'> border: true,
|
</span>
|
<span id='Ext-picker-Date-cfg-renderTpl'> renderTpl: [
|
</span> '<div id="{id}-innerEl" role="grid">',
|
'<div role="presentation" class="{baseCls}-header">',
|
// the href attribute is required for the :hover selector to work in IE6/7/quirks
|
'<a id="{id}-prevEl" class="{baseCls}-prev {baseCls}-arrow" href="#" role="button" title="{prevText}" hidefocus="on" ></a>',
|
'<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>',
|
// the href attribute is required for the :hover selector to work in IE6/7/quirks
|
'<a id="{id}-nextEl" class="{baseCls}-next {baseCls}-arrow" href="#" role="button" title="{nextText}" hidefocus="on" ></a>',
|
'</div>',
|
'<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">',
|
'<thead role="presentation"><tr role="row">',
|
'<tpl for="dayNames">',
|
'<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">',
|
'<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
|
'</th>',
|
'</tpl>',
|
'</tr></thead>',
|
'<tbody role="presentation"><tr role="row">',
|
'<tpl for="days">',
|
'{#:this.isEndOfWeek}',
|
'<td role="gridcell" id="{[Ext.id()]}">',
|
// the href attribute is required for the :hover selector to work in IE6/7/quirks
|
'<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>',
|
'</td>',
|
'</tpl>',
|
'</tr></tbody>',
|
'</table>',
|
'<tpl if="showToday">',
|
'<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
|
'</tpl>',
|
'</div>',
|
{
|
firstInitial: function(value) {
|
return Ext.picker.Date.prototype.getDayInitial(value);
|
},
|
isEndOfWeek: function(value) {
|
// convert from 1 based index to 0 based
|
// by decrementing value once.
|
value--;
|
var end = value % 7 === 0 && value !== 0;
|
return end ? '</tr><tr role="row">' : '';
|
},
|
renderTodayBtn: function(values, out) {
|
Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
|
},
|
renderMonthBtn: function(values, out) {
|
Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
|
}
|
}
|
],
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-todayText'> /**
|
</span> * @cfg {String} todayText
|
* The text to display on the button that selects the current date
|
*/
|
todayText : 'Today',
|
//</locale>
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-ariaTitle'> /**
|
</span> * @cfg {String} ariaTitle
|
* The text to display for the aria title
|
*/
|
ariaTitle: 'Date Picker: {0}',
|
//</locale>
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-ariaTitleDateFormat'> /**
|
</span> * @cfg {String} ariaTitleDateFormat
|
* The date format to display for the current value in the {@link #ariaTitle}
|
*/
|
ariaTitleDateFormat: 'F d, Y',
|
//</locale>
|
|
<span id='Ext-picker-Date-cfg-handler'> /**
|
</span> * @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
|
*
|
* This Date picker.
|
*
|
* - `date` : Date
|
*
|
* The selected date.
|
*/
|
|
<span id='Ext-picker-Date-cfg-scope'> /**
|
</span> * @cfg {Object} scope
|
* The scope (`this` reference) in which the `{@link #handler}` function will be called.
|
*
|
* Defaults to this DatePicker instance.
|
*/
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-todayTip'> /**
|
</span> * @cfg {String} todayTip
|
* 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)',
|
//</locale>
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-minText'> /**
|
</span> * @cfg {String} minText
|
* The error text to display if the minDate validation fails.
|
*/
|
minText : 'This date is before the minimum date',
|
//</locale>
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-maxText'> /**
|
</span> * @cfg {String} maxText
|
* The error text to display if the maxDate validation fails.
|
*/
|
maxText : 'This date is after the maximum date',
|
//</locale>
|
|
<span id='Ext-picker-Date-cfg-format'> /**
|
</span> * @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}).
|
*/
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-disabledDaysText'> /**
|
</span> * @cfg {String} disabledDaysText
|
* The tooltip to display when the date falls on a disabled day.
|
*/
|
disabledDaysText : 'Disabled',
|
//</locale>
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-disabledDatesText'> /**
|
</span> * @cfg {String} disabledDatesText
|
* The tooltip text to display when the date falls on a disabled date.
|
*/
|
disabledDatesText : 'Disabled',
|
//</locale>
|
|
<span id='Ext-picker-Date-cfg-monthNames'> /**
|
</span> * @cfg {String[]} monthNames
|
* An array of textual month names which can be overriden for localization support (defaults to Ext.Date.monthNames)
|
* @deprecated This config is deprecated. In future the month names will be retrieved from {@link Ext.Date}
|
*/
|
|
<span id='Ext-picker-Date-cfg-dayNames'> /**
|
</span> * @cfg {String[]} dayNames
|
* An array of textual day names which can be overriden for localization support (defaults to Ext.Date.dayNames)
|
* @deprecated This config is deprecated. In future the day names will be retrieved from {@link Ext.Date}
|
*/
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-nextText'> /**
|
</span> * @cfg {String} nextText
|
* The next month navigation button tooltip
|
*/
|
nextText : 'Next Month (Control+Right)',
|
//</locale>
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-prevText'> /**
|
</span> * @cfg {String} prevText
|
* The previous month navigation button tooltip
|
*/
|
prevText : 'Previous Month (Control+Left)',
|
//</locale>
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-monthYearText'> /**
|
</span> * @cfg {String} monthYearText
|
* The header month selector tooltip
|
*/
|
monthYearText : 'Choose a month (Control+Up/Down to move years)',
|
//</locale>
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-monthYearFormat'> /**
|
</span> * @cfg {String} monthYearFormat
|
* The date format for the header month
|
*/
|
monthYearFormat: 'F Y',
|
//</locale>
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-startDay'> /**
|
</span> * @cfg {Number} [startDay=undefined]
|
* Day index at which the week should begin, 0-based.
|
*
|
* Defaults to `0` (Sunday).
|
*/
|
startDay : 0,
|
//</locale>
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-showToday'> /**
|
</span> * @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.
|
*/
|
showToday : true,
|
//</locale>
|
|
<span id='Ext-picker-Date-cfg-minDate'> /**
|
</span> * @cfg {Date} [minDate=null]
|
* Minimum allowable date (JavaScript date object)
|
*/
|
|
<span id='Ext-picker-Date-cfg-maxDate'> /**
|
</span> * @cfg {Date} [maxDate=null]
|
* Maximum allowable date (JavaScript date object)
|
*/
|
|
<span id='Ext-picker-Date-cfg-disabledDays'> /**
|
</span> * @cfg {Number[]} [disabledDays=null]
|
* An array of days to disable, 0-based. For example, [0, 6] disables Sunday and Saturday.
|
*/
|
|
<span id='Ext-picker-Date-cfg-disabledDatesRE'> /**
|
</span> * @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.
|
*/
|
|
<span id='Ext-picker-Date-cfg-disabledDates'> /**
|
</span> * @cfg {String[]} 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'].
|
*/
|
|
<span id='Ext-picker-Date-cfg-disableAnim'> /**
|
</span> * @cfg {Boolean} disableAnim
|
* True to disable animations when showing the month picker.
|
*/
|
disableAnim: false,
|
|
<span id='Ext-picker-Date-cfg-baseCls'> /**
|
</span> * @cfg {String} [baseCls='x-datepicker']
|
* The base CSS class to apply to this components element.
|
*/
|
baseCls: Ext.baseCSSPrefix + 'datepicker',
|
|
<span id='Ext-picker-Date-cfg-selectedCls'> /**
|
</span> * @cfg {String} [selectedCls='x-datepicker-selected']
|
* The class to apply to the selected cell.
|
*/
|
|
<span id='Ext-picker-Date-cfg-disabledCellCls'> /**
|
</span> * @cfg {String} [disabledCellCls='x-datepicker-disabled']
|
* The class to apply to disabled cells.
|
*/
|
|
//<locale>
|
<span id='Ext-picker-Date-cfg-longDayFormat'> /**
|
</span> * @cfg {String} longDayFormat
|
* The format for displaying a date in a longer format.
|
*/
|
longDayFormat: 'F d, Y',
|
//</locale>
|
|
<span id='Ext-picker-Date-cfg-keyNavConfig'> /**
|
</span> * @cfg {Object} keyNavConfig
|
* Specifies optional custom key event handlers for the {@link Ext.util.KeyNav} attached to this date picker. Must
|
* conform to the config format recognized by the {@link Ext.util.KeyNav} constructor. Handlers specified in this
|
* object will replace default handlers of the same name.
|
*/
|
|
<span id='Ext-picker-Date-cfg-focusOnShow'> /**
|
</span> * @cfg {Boolean} focusOnShow
|
* True to automatically focus the picker on show.
|
*/
|
focusOnShow: false,
|
|
<span id='Ext-picker-Date-property-focusOnSelect'> // @private
|
</span> // Set by other components to stop the picker focus being updated when the value changes.
|
focusOnSelect: true,
|
|
<span id='Ext-picker-Date-property-initHour'> // Default value used to initialise each date in the DatePicker.
|
</span> // __Note:__ 12 noon was chosen because it steers well clear of all DST timezone changes.
|
<span id='Ext-picker-Date-property-numDays'> initHour: 12, // 24-hour format
|
</span>
|
numDays: 42,
|
|
<span id='Ext-picker-Date-method-initComponent'> // private, inherit docs
|
</span> initComponent : function() {
|
var me = this,
|
clearTime = Ext.Date.clearTime;
|
|
me.selectedCls = me.baseCls + '-selected';
|
me.disabledCellCls = me.baseCls + '-disabled';
|
me.prevCls = me.baseCls + '-prevday';
|
me.activeCls = me.baseCls + '-active';
|
me.cellCls = me.baseCls + '-cell';
|
me.nextCls = me.baseCls + '-prevday';
|
me.todayCls = me.baseCls + '-today';
|
|
|
if (!me.format) {
|
me.format = Ext.Date.defaultFormat;
|
}
|
if (!me.dayNames) {
|
me.dayNames = Ext.Date.dayNames;
|
}
|
me.dayNames = me.dayNames.slice(me.startDay).concat(me.dayNames.slice(0, me.startDay));
|
|
me.callParent();
|
|
me.value = me.value ?
|
clearTime(me.value, true) : clearTime(new Date());
|
|
me.addEvents(
|
<span id='Ext-picker-Date-event-select'> /**
|
</span> * @event select
|
* Fires when a date is selected
|
* @param {Ext.picker.Date} this DatePicker
|
* @param {Date} date The selected date
|
*/
|
'select'
|
);
|
|
me.initDisabledDays();
|
},
|
|
<span id='Ext-picker-Date-method-beforeRender'> beforeRender: function () {
|
</span> /*
|
* days array for looping through 6 full weeks (6 weeks * 7 days)
|
* Note that we explicitly force the size here so the template creates
|
* all the appropriate cells.
|
*/
|
var me = this,
|
days = new Array(me.numDays),
|
today = Ext.Date.format(new Date(), me.format);
|
|
// If there's a Menu among our ancestors, then add the menu class.
|
// This is so that the MenuManager does not see a mousedown in this Component as a document mousedown, outside the Menu
|
if (me.up('menu')) {
|
me.addCls(Ext.baseCSSPrefix + 'menu');
|
}
|
|
me.monthBtn = new Ext.button.Split({
|
ownerCt: me,
|
ownerLayout: me.getComponentLayout(),
|
text: '',
|
tooltip: me.monthYearText,
|
listeners: {
|
click: me.showMonthPicker,
|
arrowclick: me.showMonthPicker,
|
scope: me
|
}
|
});
|
|
if (me.showToday) {
|
me.todayBtn = new Ext.button.Button({
|
ownerCt: me,
|
ownerLayout: me.getComponentLayout(),
|
text: Ext.String.format(me.todayText, today),
|
tooltip: Ext.String.format(me.todayTip, today),
|
tooltipType: 'title',
|
handler: me.selectToday,
|
scope: me
|
});
|
}
|
|
me.callParent();
|
|
Ext.applyIf(me, {
|
renderData: {}
|
});
|
|
Ext.apply(me.renderData, {
|
dayNames: me.dayNames,
|
showToday: me.showToday,
|
prevText: me.prevText,
|
nextText: me.nextText,
|
days: days
|
});
|
|
me.protoEl.unselectable();
|
},
|
|
<span id='Ext-picker-Date-method-finishRenderChildren'> // Do the job of a container layout at this point even though we are not a Container.
|
</span> // TODO: Refactor as a Container.
|
finishRenderChildren: function () {
|
var me = this;
|
|
me.callParent();
|
me.monthBtn.finishRender();
|
if (me.showToday) {
|
me.todayBtn.finishRender();
|
}
|
},
|
|
<span id='Ext-picker-Date-method-onRender'> // @private
|
</span> // @inheritdoc
|
onRender : function(container, position){
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.cells = me.eventEl.select('tbody td');
|
me.textNodes = me.eventEl.query('tbody td a');
|
|
me.mon(me.eventEl, {
|
scope: me,
|
mousewheel: me.handleMouseWheel,
|
click: {
|
fn: me.handleDateClick,
|
delegate: 'a.' + me.baseCls + '-date'
|
}
|
});
|
|
},
|
|
<span id='Ext-picker-Date-method-initEvents'> // @private
|
</span> // @inheritdoc
|
initEvents: function(){
|
var me = this,
|
eDate = Ext.Date,
|
day = eDate.DAY;
|
|
me.callParent();
|
|
me.prevRepeater = new Ext.util.ClickRepeater(me.prevEl, {
|
handler: me.showPrevMonth,
|
scope: me,
|
preventDefault: true,
|
stopDefault: true
|
});
|
|
me.nextRepeater = new Ext.util.ClickRepeater(me.nextEl, {
|
handler: me.showNextMonth,
|
scope: me,
|
preventDefault:true,
|
stopDefault:true
|
});
|
|
me.keyNav = new Ext.util.KeyNav(me.eventEl, Ext.apply({
|
scope: me,
|
left : function(e){
|
if(e.ctrlKey){
|
me.showPrevMonth();
|
}else{
|
me.update(eDate.add(me.activeDate, day, -1));
|
}
|
},
|
|
right : function(e){
|
if(e.ctrlKey){
|
me.showNextMonth();
|
}else{
|
me.update(eDate.add(me.activeDate, day, 1));
|
}
|
},
|
|
up : function(e){
|
if(e.ctrlKey){
|
me.showNextYear();
|
}else{
|
me.update(eDate.add(me.activeDate, day, -7));
|
}
|
},
|
|
down : function(e){
|
if(e.ctrlKey){
|
me.showPrevYear();
|
}else{
|
me.update(eDate.add(me.activeDate, day, 7));
|
}
|
},
|
|
pageUp:function (e) {
|
if (e.altKey) {
|
me.showPrevYear();
|
} else {
|
me.showPrevMonth();
|
}
|
},
|
|
pageDown:function (e) {
|
if (e.altKey) {
|
me.showNextYear();
|
} else {
|
me.showNextMonth();
|
}
|
},
|
|
tab:function (e) {
|
me.doCancelFieldFocus = true;
|
me.handleTabClick(e);
|
delete me.doCancelFieldFocus;
|
return true;
|
},
|
|
enter : function(e){
|
e.stopPropagation();
|
return true;
|
},
|
|
//space: ???
|
|
home:function (e) {
|
me.update(eDate.getFirstDateOfMonth(me.activeDate));
|
},
|
|
end:function (e) {
|
me.update(eDate.getLastDateOfMonth(me.activeDate));
|
}
|
}, me.keyNavConfig));
|
|
if (me.showToday) {
|
me.todayKeyListener = me.eventEl.addKeyListener(Ext.EventObject.SPACE, me.selectToday, me);
|
}
|
me.update(me.value);
|
},
|
|
<span id='Ext-picker-Date-method-handleTabClick'> handleTabClick:function (e) {
|
</span> var me = this,
|
t = me.getSelectedDate(me.activeDate),
|
handler = me.handler;
|
|
// The following code is like handleDateClick without the e.stopEvent()
|
if (!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)) {
|
me.doCancelFocus = me.focusOnSelect === false;
|
me.setValue(new Date(t.dateValue));
|
delete me.doCancelFocus;
|
me.fireEvent('select', me, me.value);
|
if (handler) {
|
handler.call(me.scope || me, me, me.value);
|
}
|
me.onSelect();
|
}
|
},
|
|
<span id='Ext-picker-Date-method-getSelectedDate'> getSelectedDate:function (date) {
|
</span> var me = this,
|
t = date.getTime(),
|
cells = me.cells,
|
cls = me.selectedCls,
|
cellItems = cells.elements,
|
c,
|
cLen = cellItems.length,
|
cell;
|
|
cells.removeCls(cls);
|
|
for (c = 0; c < cLen; c++) {
|
cell = Ext.fly(cellItems[c]);
|
|
if (cell.dom.firstChild.dateValue == t) {
|
return cell.dom.firstChild;
|
}
|
}
|
return null;
|
},
|
|
<span id='Ext-picker-Date-method-initDisabledDays'> /**
|
</span> * Setup the disabled dates regex based on config options
|
* @private
|
*/
|
initDisabledDays : function(){
|
var me = this,
|
dd = me.disabledDates,
|
re = '(?:',
|
len,
|
d, dLen, dI;
|
|
if(!me.disabledDatesRE && dd){
|
len = dd.length - 1;
|
|
dLen = dd.length;
|
|
for (d = 0; d < dLen; d++) {
|
dI = dd[d];
|
|
re += Ext.isDate(dI) ? '^' + Ext.String.escapeRegex(Ext.Date.dateFormat(dI, me.format)) + '$' : dI;
|
if (d != len) {
|
re += '|';
|
}
|
}
|
|
me.disabledDatesRE = new RegExp(re + ')');
|
}
|
},
|
|
<span id='Ext-picker-Date-method-setDisabledDates'> /**
|
</span> * Replaces any existing disabled dates with new values and refreshes the DatePicker.
|
* @param {String[]/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.
|
* @return {Ext.picker.Date} this
|
*/
|
setDisabledDates : function(dd){
|
var me = this;
|
|
if(Ext.isArray(dd)){
|
me.disabledDates = dd;
|
me.disabledDatesRE = null;
|
}else{
|
me.disabledDatesRE = dd;
|
}
|
me.initDisabledDays();
|
me.update(me.value, true);
|
return me;
|
},
|
|
<span id='Ext-picker-Date-method-setDisabledDays'> /**
|
</span> * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the DatePicker.
|
* @param {Number[]} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config for details
|
* on supported values.
|
* @return {Ext.picker.Date} this
|
*/
|
setDisabledDays : function(dd){
|
this.disabledDays = dd;
|
return this.update(this.value, true);
|
},
|
|
<span id='Ext-picker-Date-method-setMinDate'> /**
|
</span> * Replaces any existing {@link #minDate} with the new value and refreshes the DatePicker.
|
* @param {Date} value The minimum date that can be selected
|
* @return {Ext.picker.Date} this
|
*/
|
setMinDate : function(dt){
|
this.minDate = dt;
|
return this.update(this.value, true);
|
},
|
|
<span id='Ext-picker-Date-method-setMaxDate'> /**
|
</span> * Replaces any existing {@link #maxDate} with the new value and refreshes the DatePicker.
|
* @param {Date} value The maximum date that can be selected
|
* @return {Ext.picker.Date} this
|
*/
|
setMaxDate : function(dt){
|
this.maxDate = dt;
|
return this.update(this.value, true);
|
},
|
|
<span id='Ext-picker-Date-method-setValue'> /**
|
</span> * Sets the value of the date field
|
* @param {Date} value The date to set
|
* @return {Ext.picker.Date} this
|
*/
|
setValue : function(value){
|
this.value = Ext.Date.clearTime(value, true);
|
return this.update(this.value);
|
},
|
|
<span id='Ext-picker-Date-method-getValue'> /**
|
</span> * Gets the current selected value of the date field
|
* @return {Date} The selected date
|
*/
|
getValue : function(){
|
return this.value;
|
},
|
|
//<locale type="function">
|
<span id='Ext-picker-Date-method-getDayInitial'> /**
|
</span> * Gets a single character to represent the day of the week
|
* @return {String} The character
|
*/
|
getDayInitial: function(value){
|
return value.substr(0,1);
|
},
|
//</locale>
|
|
<span id='Ext-picker-Date-method-focus'> // @private
|
</span> focus : function(){
|
this.update(this.activeDate);
|
},
|
|
<span id='Ext-picker-Date-method-onEnable'> // @private
|
</span> // @inheritdoc
|
onEnable: function(){
|
this.callParent();
|
this.setDisabledStatus(false);
|
this.update(this.activeDate);
|
|
},
|
|
<span id='Ext-picker-Date-method-onDisable'> // @private
|
</span> // @inheritdoc
|
onDisable : function(){
|
this.callParent();
|
this.setDisabledStatus(true);
|
},
|
|
<span id='Ext-picker-Date-method-setDisabledStatus'> /**
|
</span> * Set the disabled state of various internal components
|
* @private
|
* @param {Boolean} disabled
|
*/
|
setDisabledStatus : function(disabled){
|
var me = this;
|
|
me.keyNav.setDisabled(disabled);
|
me.prevRepeater.setDisabled(disabled);
|
me.nextRepeater.setDisabled(disabled);
|
if (me.showToday) {
|
me.todayKeyListener.setDisabled(disabled);
|
me.todayBtn.setDisabled(disabled);
|
}
|
},
|
|
<span id='Ext-picker-Date-method-getActive'> /**
|
</span> * Get the current active date.
|
* @private
|
* @return {Date} The active date
|
*/
|
getActive: function(){
|
return this.activeDate || this.value;
|
},
|
|
<span id='Ext-picker-Date-method-runAnimation'> /**
|
</span> * Run any animation required to hide/show the month picker.
|
* @private
|
* @param {Boolean} isHide True if it's a hide operation
|
*/
|
runAnimation: function(isHide){
|
var picker = this.monthPicker,
|
options = {
|
duration: 200,
|
callback: function(){
|
if (isHide) {
|
picker.hide();
|
} else {
|
picker.show();
|
}
|
}
|
};
|
|
if (isHide) {
|
picker.el.slideOut('t', options);
|
} else {
|
picker.el.slideIn('t', options);
|
}
|
},
|
|
<span id='Ext-picker-Date-method-hideMonthPicker'> /**
|
</span> * Hides the month picker, if it's visible.
|
* @param {Boolean} [animate] Indicates whether to animate this action. If the animate
|
* parameter is not specified, the behavior will use {@link #disableAnim} to determine
|
* whether to animate or not.
|
* @return {Ext.picker.Date} this
|
*/
|
hideMonthPicker : function(animate){
|
var me = this,
|
picker = me.monthPicker;
|
|
if (picker) {
|
if (me.shouldAnimate(animate)) {
|
me.runAnimation(true);
|
} else {
|
picker.hide();
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-picker-Date-method-showMonthPicker'> /**
|
</span> * Show the month picker
|
* @param {Boolean} [animate] Indicates whether to animate this action. If the animate
|
* parameter is not specified, the behavior will use {@link #disableAnim} to determine
|
* whether to animate or not.
|
* @return {Ext.picker.Date} this
|
*/
|
showMonthPicker : function(animate){
|
var me = this,
|
picker;
|
|
if (me.rendered && !me.disabled) {
|
picker = me.createMonthPicker();
|
picker.setValue(me.getActive());
|
picker.setSize(me.getSize());
|
picker.setPosition(-1, -1);
|
if (me.shouldAnimate(animate)) {
|
me.runAnimation(false);
|
} else {
|
picker.show();
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-picker-Date-method-shouldAnimate'> /**
|
</span> * Checks whether a hide/show action should animate
|
* @private
|
* @param {Boolean} [animate] A possible animation value
|
* @return {Boolean} Whether to animate the action
|
*/
|
shouldAnimate: function(animate){
|
return Ext.isDefined(animate) ? animate : !this.disableAnim;
|
},
|
|
<span id='Ext-picker-Date-method-createMonthPicker'> /**
|
</span> * Create the month picker instance
|
* @private
|
* @return {Ext.picker.Month} picker
|
*/
|
createMonthPicker: function(){
|
var me = this,
|
picker = me.monthPicker;
|
|
if (!picker) {
|
me.monthPicker = picker = new Ext.picker.Month({
|
renderTo: me.el,
|
floating: true,
|
shadow: false,
|
small: me.showToday === false,
|
listeners: {
|
scope: me,
|
cancelclick: me.onCancelClick,
|
okclick: me.onOkClick,
|
yeardblclick: me.onOkClick,
|
monthdblclick: me.onOkClick
|
}
|
});
|
if (!me.disableAnim) {
|
// hide the element if we're animating to prevent an initial flicker
|
picker.el.setStyle('display', 'none');
|
}
|
me.on('beforehide', Ext.Function.bind(me.hideMonthPicker, me, [false]));
|
}
|
return picker;
|
},
|
|
<span id='Ext-picker-Date-method-onOkClick'> /**
|
</span> * Respond to an ok click on the month picker
|
* @private
|
*/
|
onOkClick: function(picker, value){
|
var me = this,
|
month = value[0],
|
year = value[1],
|
date = new Date(year, month, me.getActive().getDate());
|
|
if (date.getMonth() !== month) {
|
// 'fix' the JS rolling date conversion if needed
|
date = Ext.Date.getLastDateOfMonth(new Date(year, month, 1));
|
}
|
me.setValue(date);
|
me.hideMonthPicker();
|
},
|
|
<span id='Ext-picker-Date-method-onCancelClick'> /**
|
</span> * Respond to a cancel click on the month picker
|
* @private
|
*/
|
onCancelClick: function(){
|
// update the selected value, also triggers a focus
|
this.selectedUpdate(this.activeDate);
|
this.hideMonthPicker();
|
},
|
|
<span id='Ext-picker-Date-method-showPrevMonth'> /**
|
</span> * Show the previous month.
|
* @param {Object} e
|
* @return {Ext.picker.Date} this
|
*/
|
showPrevMonth : function(e){
|
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));
|
},
|
|
<span id='Ext-picker-Date-method-showNextMonth'> /**
|
</span> * Show the next month.
|
* @param {Object} e
|
* @return {Ext.picker.Date} this
|
*/
|
showNextMonth : function(e){
|
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));
|
},
|
|
<span id='Ext-picker-Date-method-showPrevYear'> /**
|
</span> * Show the previous year.
|
* @return {Ext.picker.Date} this
|
*/
|
showPrevYear : function(){
|
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, -1));
|
},
|
|
<span id='Ext-picker-Date-method-showNextYear'> /**
|
</span> * Show the next year.
|
* @return {Ext.picker.Date} this
|
*/
|
showNextYear : function(){
|
return this.setValue(Ext.Date.add(this.activeDate, Ext.Date.YEAR, 1));
|
},
|
|
<span id='Ext-picker-Date-method-handleMouseWheel'> /**
|
</span> * Respond to the mouse wheel event
|
* @private
|
* @param {Ext.EventObject} e
|
*/
|
handleMouseWheel : function(e){
|
e.stopEvent();
|
if(!this.disabled){
|
var delta = e.getWheelDelta();
|
if(delta > 0){
|
this.showPrevMonth();
|
} else if(delta < 0){
|
this.showNextMonth();
|
}
|
}
|
},
|
|
<span id='Ext-picker-Date-method-handleDateClick'> /**
|
</span> * Respond to a date being clicked in the picker
|
* @private
|
* @param {Ext.EventObject} e
|
* @param {HTMLElement} t
|
*/
|
handleDateClick : function(e, t){
|
var me = this,
|
handler = me.handler;
|
|
e.stopEvent();
|
if(!me.disabled && t.dateValue && !Ext.fly(t.parentNode).hasCls(me.disabledCellCls)){
|
me.doCancelFocus = me.focusOnSelect === false;
|
me.setValue(new Date(t.dateValue));
|
delete me.doCancelFocus;
|
me.fireEvent('select', me, me.value);
|
if (handler) {
|
handler.call(me.scope || me, me, me.value);
|
}
|
// event handling is turned off on hide
|
// when we are using the picker in a field
|
// therefore onSelect comes AFTER the select
|
// event.
|
me.onSelect();
|
}
|
},
|
|
<span id='Ext-picker-Date-method-onSelect'> /**
|
</span> * Perform any post-select actions
|
* @private
|
*/
|
onSelect: function() {
|
if (this.hideOnSelect) {
|
this.hide();
|
}
|
},
|
|
<span id='Ext-picker-Date-method-selectToday'> /**
|
</span> * Sets the current value to today.
|
* @return {Ext.picker.Date} this
|
*/
|
selectToday : function(){
|
var me = this,
|
btn = me.todayBtn,
|
handler = me.handler;
|
|
if(btn && !btn.disabled){
|
me.setValue(Ext.Date.clearTime(new Date()));
|
me.fireEvent('select', me, me.value);
|
if (handler) {
|
handler.call(me.scope || me, me, me.value);
|
}
|
me.onSelect();
|
}
|
return me;
|
},
|
|
<span id='Ext-picker-Date-method-selectedUpdate'> /**
|
</span> * Update the selected cell
|
* @private
|
* @param {Date} date The new date
|
*/
|
selectedUpdate: function(date){
|
var me = this,
|
t = date.getTime(),
|
cells = me.cells,
|
cls = me.selectedCls,
|
cellItems = cells.elements,
|
c,
|
cLen = cellItems.length,
|
cell;
|
|
cells.removeCls(cls);
|
|
for (c = 0; c < cLen; c++) {
|
cell = Ext.fly(cellItems[c]);
|
|
if (cell.dom.firstChild.dateValue == t) {
|
me.fireEvent('highlightitem', me, cell);
|
cell.addCls(cls);
|
|
if(me.isVisible() && !me.doCancelFocus){
|
Ext.fly(cell.dom.firstChild).focus(50);
|
}
|
|
break;
|
}
|
}
|
},
|
|
<span id='Ext-picker-Date-method-fullUpdate'> /**
|
</span> * Update the contents of the picker for a new month
|
* @private
|
* @param {Date} date The new date
|
*/
|
fullUpdate: function(date){
|
var me = this,
|
cells = me.cells.elements,
|
textNodes = me.textNodes,
|
disabledCls = me.disabledCellCls,
|
eDate = Ext.Date,
|
i = 0,
|
extraDays = 0,
|
visible = me.isVisible(),
|
newDate = +eDate.clearTime(date, true),
|
today = +eDate.clearTime(new Date()),
|
min = me.minDate ? eDate.clearTime(me.minDate, true) : Number.NEGATIVE_INFINITY,
|
max = me.maxDate ? eDate.clearTime(me.maxDate, true) : Number.POSITIVE_INFINITY,
|
ddMatch = me.disabledDatesRE,
|
ddText = me.disabledDatesText,
|
ddays = me.disabledDays ? me.disabledDays.join('') : false,
|
ddaysText = me.disabledDaysText,
|
format = me.format,
|
days = eDate.getDaysInMonth(date),
|
firstOfMonth = eDate.getFirstDateOfMonth(date),
|
startingPos = firstOfMonth.getDay() - me.startDay,
|
previousMonth = eDate.add(date, eDate.MONTH, -1),
|
longDayFormat = me.longDayFormat,
|
prevStart,
|
current,
|
disableToday,
|
tempDate,
|
setCellClass,
|
html,
|
cls,
|
formatValue,
|
value;
|
|
if (startingPos < 0) {
|
startingPos += 7;
|
}
|
|
days += startingPos;
|
prevStart = eDate.getDaysInMonth(previousMonth) - startingPos;
|
current = new Date(previousMonth.getFullYear(), previousMonth.getMonth(), prevStart, me.initHour);
|
|
if (me.showToday) {
|
tempDate = eDate.clearTime(new Date());
|
disableToday = (tempDate < min || tempDate > max ||
|
(ddMatch && format && ddMatch.test(eDate.dateFormat(tempDate, format))) ||
|
(ddays && ddays.indexOf(tempDate.getDay()) != -1));
|
|
if (!me.disabled) {
|
me.todayBtn.setDisabled(disableToday);
|
me.todayKeyListener.setDisabled(disableToday);
|
}
|
}
|
|
setCellClass = function(cell, cls){
|
value = +eDate.clearTime(current, true);
|
cell.title = eDate.format(current, longDayFormat);
|
// store dateValue number as an expando
|
cell.firstChild.dateValue = value;
|
if(value == today){
|
cls += ' ' + me.todayCls;
|
cell.title = me.todayText;
|
|
// Extra element for ARIA purposes
|
me.todayElSpan = Ext.DomHelper.append(cell.firstChild, {
|
tag:'span',
|
cls: Ext.baseCSSPrefix + 'hide-clip',
|
html:me.todayText
|
}, true);
|
}
|
if(value == newDate) {
|
cls += ' ' + me.selectedCls;
|
me.fireEvent('highlightitem', me, cell);
|
if (visible && me.floating) {
|
Ext.fly(cell.firstChild).focus(50);
|
}
|
}
|
|
if (value < min) {
|
cls += ' ' + disabledCls;
|
cell.title = me.minText;
|
}
|
else if (value > max) {
|
cls += ' ' + disabledCls;
|
cell.title = me.maxText;
|
}
|
else if (ddays && ddays.indexOf(current.getDay()) !== -1){
|
cell.title = ddaysText;
|
cls += ' ' + disabledCls;
|
}
|
else if (ddMatch && format){
|
formatValue = eDate.dateFormat(current, format);
|
if(ddMatch.test(formatValue)){
|
cell.title = ddText.replace('%0', formatValue);
|
cls += ' ' + disabledCls;
|
}
|
}
|
cell.className = cls + ' ' + me.cellCls;
|
};
|
|
for(; i < me.numDays; ++i) {
|
if (i < startingPos) {
|
html = (++prevStart);
|
cls = me.prevCls;
|
} else if (i >= days) {
|
html = (++extraDays);
|
cls = me.nextCls;
|
} else {
|
html = i - startingPos + 1;
|
cls = me.activeCls;
|
}
|
textNodes[i].innerHTML = html;
|
current.setDate(current.getDate() + 1);
|
setCellClass(cells[i], cls);
|
}
|
|
me.monthBtn.setText(Ext.Date.format(date, me.monthYearFormat));
|
},
|
|
<span id='Ext-picker-Date-method-update'> /**
|
</span> * Update the contents of the picker
|
* @private
|
* @param {Date} date The new date
|
* @param {Boolean} forceRefresh True to force a full refresh
|
*/
|
update : function(date, forceRefresh){
|
var me = this,
|
active = me.activeDate;
|
|
if (me.rendered) {
|
me.activeDate = date;
|
if(!forceRefresh && active && me.el && active.getMonth() == date.getMonth() && active.getFullYear() == date.getFullYear()){
|
me.selectedUpdate(date, active);
|
} else {
|
me.fullUpdate(date, active);
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-picker-Date-method-beforeDestroy'> // @private
|
</span> // @inheritdoc
|
beforeDestroy : function() {
|
var me = this;
|
|
if (me.rendered) {
|
Ext.destroy(
|
me.todayKeyListener,
|
me.keyNav,
|
me.monthPicker,
|
me.monthBtn,
|
me.nextRepeater,
|
me.prevRepeater,
|
me.todayBtn
|
);
|
delete me.textNodes;
|
delete me.cells.elements;
|
}
|
me.callParent();
|
},
|
|
<span id='Ext-picker-Date-method-onShow'> // @private
|
</span> // @inheritdoc
|
onShow: function() {
|
this.callParent(arguments);
|
if (this.focusOnShow) {
|
this.focus();
|
}
|
}
|
});
|
</pre>
|
</body>
|
</html>
|