/ext-4.0.7/src/form/field/Date.js

https://bitbucket.org/srogerf/javascript · JavaScript · 558 lines · 244 code · 53 blank · 261 comment · 37 complexity · 055554e3121cef3b95ee276c380c4e5e MD5 · raw file

  1. /*
  2. This file is part of Ext JS 4
  3. Copyright (c) 2011 Sencha Inc
  4. Contact: http://www.sencha.com/contact
  5. GNU General Public License Usage
  6. 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.
  7. If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  8. */
  9. /**
  10. * @docauthor Jason Johnston <jason@sencha.com>
  11. *
  12. * Provides a date input field with a {@link Ext.picker.Date date picker} dropdown and automatic date
  13. * validation.
  14. *
  15. * This field recognizes and uses the JavaScript Date object as its main {@link #value} type. In addition,
  16. * it recognizes string values which are parsed according to the {@link #format} and/or {@link #altFormats}
  17. * configs. These may be reconfigured to use date formats appropriate for the user's locale.
  18. *
  19. * The field may be limited to a certain range of dates by using the {@link #minValue}, {@link #maxValue},
  20. * {@link #disabledDays}, and {@link #disabledDates} config parameters. These configurations will be used both
  21. * in the field's validation, and in the date picker dropdown by preventing invalid dates from being selected.
  22. *
  23. * # Example usage
  24. *
  25. * @example
  26. * Ext.create('Ext.form.Panel', {
  27. * renderTo: Ext.getBody(),
  28. * width: 300,
  29. * bodyPadding: 10,
  30. * title: 'Dates',
  31. * items: [{
  32. * xtype: 'datefield',
  33. * anchor: '100%',
  34. * fieldLabel: 'From',
  35. * name: 'from_date',
  36. * maxValue: new Date() // limited to the current date or prior
  37. * }, {
  38. * xtype: 'datefield',
  39. * anchor: '100%',
  40. * fieldLabel: 'To',
  41. * name: 'to_date',
  42. * value: new Date() // defaults to today
  43. * }]
  44. * });
  45. *
  46. * # Date Formats Examples
  47. *
  48. * This example shows a couple of different date format parsing scenarios. Both use custom date format
  49. * configurations; the first one matches the configured `format` while the second matches the `altFormats`.
  50. *
  51. * @example
  52. * Ext.create('Ext.form.Panel', {
  53. * renderTo: Ext.getBody(),
  54. * width: 300,
  55. * bodyPadding: 10,
  56. * title: 'Dates',
  57. * items: [{
  58. * xtype: 'datefield',
  59. * anchor: '100%',
  60. * fieldLabel: 'Date',
  61. * name: 'date',
  62. * // The value matches the format; will be parsed and displayed using that format.
  63. * format: 'm d Y',
  64. * value: '2 4 1978'
  65. * }, {
  66. * xtype: 'datefield',
  67. * anchor: '100%',
  68. * fieldLabel: 'Date',
  69. * name: 'date',
  70. * // The value does not match the format, but does match an altFormat; will be parsed
  71. * // using the altFormat and displayed using the format.
  72. * format: 'm d Y',
  73. * altFormats: 'm,d,Y|m.d.Y',
  74. * value: '2.4.1978'
  75. * }]
  76. * });
  77. */
  78. Ext.define('Ext.form.field.Date', {
  79. extend:'Ext.form.field.Picker',
  80. alias: 'widget.datefield',
  81. requires: ['Ext.picker.Date'],
  82. alternateClassName: ['Ext.form.DateField', 'Ext.form.Date'],
  83. /**
  84. * @cfg {String} format
  85. * The default date format string which can be overriden for localization support. The format must be valid
  86. * according to {@link Ext.Date#parse}.
  87. */
  88. format : "m/d/Y",
  89. /**
  90. * @cfg {String} altFormats
  91. * Multiple date formats separated by "|" to try when parsing a user input value and it does not match the defined
  92. * format.
  93. */
  94. altFormats : "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j",
  95. /**
  96. * @cfg {String} disabledDaysText
  97. * The tooltip to display when the date falls on a disabled day.
  98. */
  99. disabledDaysText : "Disabled",
  100. /**
  101. * @cfg {String} disabledDatesText
  102. * The tooltip text to display when the date falls on a disabled date.
  103. */
  104. disabledDatesText : "Disabled",
  105. /**
  106. * @cfg {String} minText
  107. * The error text to display when the date in the cell is before {@link #minValue}.
  108. */
  109. minText : "The date in this field must be equal to or after {0}",
  110. /**
  111. * @cfg {String} maxText
  112. * The error text to display when the date in the cell is after {@link #maxValue}.
  113. */
  114. maxText : "The date in this field must be equal to or before {0}",
  115. /**
  116. * @cfg {String} invalidText
  117. * The error text to display when the date in the field is invalid.
  118. */
  119. invalidText : "{0} is not a valid date - it must be in the format {1}",
  120. /**
  121. * @cfg {String} [triggerCls='x-form-date-trigger']
  122. * An additional CSS class used to style the trigger button. The trigger will always get the class 'x-form-trigger'
  123. * and triggerCls will be **appended** if specified (default class displays a calendar icon).
  124. */
  125. triggerCls : Ext.baseCSSPrefix + 'form-date-trigger',
  126. /**
  127. * @cfg {Boolean} showToday
  128. * false to hide the footer area of the Date picker containing the Today button and disable the keyboard handler for
  129. * spacebar that selects the current date.
  130. */
  131. showToday : true,
  132. /**
  133. * @cfg {Date/String} minValue
  134. * The minimum allowed date. Can be either a Javascript date object or a string date in a valid format.
  135. */
  136. /**
  137. * @cfg {Date/String} maxValue
  138. * The maximum allowed date. Can be either a Javascript date object or a string date in a valid format.
  139. */
  140. /**
  141. * @cfg {Number[]} disabledDays
  142. * An array of days to disable, 0 based. Some examples:
  143. *
  144. * // disable Sunday and Saturday:
  145. * disabledDays: [0, 6]
  146. * // disable weekdays:
  147. * disabledDays: [1,2,3,4,5]
  148. */
  149. /**
  150. * @cfg {String[]} disabledDates
  151. * An array of "dates" to disable, as strings. These strings will be used to build a dynamic regular expression so
  152. * they are very powerful. Some examples:
  153. *
  154. * // disable these exact dates:
  155. * disabledDates: ["03/08/2003", "09/16/2003"]
  156. * // disable these days for every year:
  157. * disabledDates: ["03/08", "09/16"]
  158. * // only match the beginning (useful if you are using short years):
  159. * disabledDates: ["^03/08"]
  160. * // disable every day in March 2006:
  161. * disabledDates: ["03/../2006"]
  162. * // disable every day in every March:
  163. * disabledDates: ["^03"]
  164. *
  165. * Note that the format of the dates included in the array should exactly match the {@link #format} config. In order
  166. * to support regular expressions, if you are using a {@link #format date format} that has "." in it, you will have
  167. * to escape the dot when restricting dates. For example: `["03\\.08\\.03"]`.
  168. */
  169. /**
  170. * @cfg {String} submitFormat
  171. * The date format string which will be submitted to the server. The format must be valid according to {@link
  172. * Ext.Date#parse} (defaults to {@link #format}).
  173. */
  174. // in the absence of a time value, a default value of 12 noon will be used
  175. // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
  176. initTime: '12', // 24 hour format
  177. initTimeFormat: 'H',
  178. matchFieldWidth: false,
  179. /**
  180. * @cfg {Number} startDay
  181. * Day index at which the week should begin, 0-based (defaults to Sunday)
  182. */
  183. startDay: 0,
  184. initComponent : function(){
  185. var me = this,
  186. isString = Ext.isString,
  187. min, max;
  188. min = me.minValue;
  189. max = me.maxValue;
  190. if(isString(min)){
  191. me.minValue = me.parseDate(min);
  192. }
  193. if(isString(max)){
  194. me.maxValue = me.parseDate(max);
  195. }
  196. me.disabledDatesRE = null;
  197. me.initDisabledDays();
  198. me.callParent();
  199. },
  200. initValue: function() {
  201. var me = this,
  202. value = me.value;
  203. // If a String value was supplied, try to convert it to a proper Date
  204. if (Ext.isString(value)) {
  205. me.value = me.rawToValue(value);
  206. }
  207. me.callParent();
  208. },
  209. // private
  210. initDisabledDays : function(){
  211. if(this.disabledDates){
  212. var dd = this.disabledDates,
  213. len = dd.length - 1,
  214. re = "(?:";
  215. Ext.each(dd, function(d, i){
  216. re += Ext.isDate(d) ? '^' + Ext.String.escapeRegex(d.dateFormat(this.format)) + '$' : dd[i];
  217. if (i !== len) {
  218. re += '|';
  219. }
  220. }, this);
  221. this.disabledDatesRE = new RegExp(re + ')');
  222. }
  223. },
  224. /**
  225. * Replaces any existing disabled dates with new values and refreshes the Date picker.
  226. * @param {String[]} disabledDates An array of date strings (see the {@link #disabledDates} config for details on
  227. * supported values) used to disable a pattern of dates.
  228. */
  229. setDisabledDates : function(dd){
  230. var me = this,
  231. picker = me.picker;
  232. me.disabledDates = dd;
  233. me.initDisabledDays();
  234. if (picker) {
  235. picker.setDisabledDates(me.disabledDatesRE);
  236. }
  237. },
  238. /**
  239. * Replaces any existing disabled days (by index, 0-6) with new values and refreshes the Date picker.
  240. * @param {Number[]} disabledDays An array of disabled day indexes. See the {@link #disabledDays} config for details on
  241. * supported values.
  242. */
  243. setDisabledDays : function(dd){
  244. var picker = this.picker;
  245. this.disabledDays = dd;
  246. if (picker) {
  247. picker.setDisabledDays(dd);
  248. }
  249. },
  250. /**
  251. * Replaces any existing {@link #minValue} with the new value and refreshes the Date picker.
  252. * @param {Date} value The minimum date that can be selected
  253. */
  254. setMinValue : function(dt){
  255. var me = this,
  256. picker = me.picker,
  257. minValue = (Ext.isString(dt) ? me.parseDate(dt) : dt);
  258. me.minValue = minValue;
  259. if (picker) {
  260. picker.minText = Ext.String.format(me.minText, me.formatDate(me.minValue));
  261. picker.setMinDate(minValue);
  262. }
  263. },
  264. /**
  265. * Replaces any existing {@link #maxValue} with the new value and refreshes the Date picker.
  266. * @param {Date} value The maximum date that can be selected
  267. */
  268. setMaxValue : function(dt){
  269. var me = this,
  270. picker = me.picker,
  271. maxValue = (Ext.isString(dt) ? me.parseDate(dt) : dt);
  272. me.maxValue = maxValue;
  273. if (picker) {
  274. picker.maxText = Ext.String.format(me.maxText, me.formatDate(me.maxValue));
  275. picker.setMaxDate(maxValue);
  276. }
  277. },
  278. /**
  279. * Runs all of Date's validations and returns an array of any errors. Note that this first runs Text's validations,
  280. * so the returned array is an amalgamation of all field errors. The additional validation checks are testing that
  281. * the date format is valid, that the chosen date is within the min and max date constraints set, that the date
  282. * chosen is not in the disabledDates regex and that the day chosed is not one of the disabledDays.
  283. * @param {Object} [value] The value to get errors for (defaults to the current field value)
  284. * @return {String[]} All validation errors for this field
  285. */
  286. getErrors: function(value) {
  287. var me = this,
  288. format = Ext.String.format,
  289. clearTime = Ext.Date.clearTime,
  290. errors = me.callParent(arguments),
  291. disabledDays = me.disabledDays,
  292. disabledDatesRE = me.disabledDatesRE,
  293. minValue = me.minValue,
  294. maxValue = me.maxValue,
  295. len = disabledDays ? disabledDays.length : 0,
  296. i = 0,
  297. svalue,
  298. fvalue,
  299. day,
  300. time;
  301. value = me.formatDate(value || me.processRawValue(me.getRawValue()));
  302. if (value === null || value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
  303. return errors;
  304. }
  305. svalue = value;
  306. value = me.parseDate(value);
  307. if (!value) {
  308. errors.push(format(me.invalidText, svalue, me.format));
  309. return errors;
  310. }
  311. time = value.getTime();
  312. if (minValue && time < clearTime(minValue).getTime()) {
  313. errors.push(format(me.minText, me.formatDate(minValue)));
  314. }
  315. if (maxValue && time > clearTime(maxValue).getTime()) {
  316. errors.push(format(me.maxText, me.formatDate(maxValue)));
  317. }
  318. if (disabledDays) {
  319. day = value.getDay();
  320. for(; i < len; i++) {
  321. if (day === disabledDays[i]) {
  322. errors.push(me.disabledDaysText);
  323. break;
  324. }
  325. }
  326. }
  327. fvalue = me.formatDate(value);
  328. if (disabledDatesRE && disabledDatesRE.test(fvalue)) {
  329. errors.push(format(me.disabledDatesText, fvalue));
  330. }
  331. return errors;
  332. },
  333. rawToValue: function(rawValue) {
  334. return this.parseDate(rawValue) || rawValue || null;
  335. },
  336. valueToRaw: function(value) {
  337. return this.formatDate(this.parseDate(value));
  338. },
  339. /**
  340. * @method setValue
  341. * Sets the value of the date field. You can pass a date object or any string that can be parsed into a valid date,
  342. * using {@link #format} as the date format, according to the same rules as {@link Ext.Date#parse} (the default
  343. * format used is "m/d/Y").
  344. *
  345. * Usage:
  346. *
  347. * //All of these calls set the same date value (May 4, 2006)
  348. *
  349. * //Pass a date object:
  350. * var dt = new Date('5/4/2006');
  351. * dateField.setValue(dt);
  352. *
  353. * //Pass a date string (default format):
  354. * dateField.setValue('05/04/2006');
  355. *
  356. * //Pass a date string (custom format):
  357. * dateField.format = 'Y-m-d';
  358. * dateField.setValue('2006-05-04');
  359. *
  360. * @param {String/Date} date The date or valid date string
  361. * @return {Ext.form.field.Date} this
  362. */
  363. /**
  364. * Attempts to parse a given string value using a given {@link Ext.Date#parse date format}.
  365. * @param {String} value The value to attempt to parse
  366. * @param {String} format A valid date format (see {@link Ext.Date#parse})
  367. * @return {Date} The parsed Date object, or null if the value could not be successfully parsed.
  368. */
  369. safeParse : function(value, format) {
  370. var me = this,
  371. utilDate = Ext.Date,
  372. parsedDate,
  373. result = null;
  374. if (utilDate.formatContainsHourInfo(format)) {
  375. // if parse format contains hour information, no DST adjustment is necessary
  376. result = utilDate.parse(value, format);
  377. } else {
  378. // set time to 12 noon, then clear the time
  379. parsedDate = utilDate.parse(value + ' ' + me.initTime, format + ' ' + me.initTimeFormat);
  380. if (parsedDate) {
  381. result = utilDate.clearTime(parsedDate);
  382. }
  383. }
  384. return result;
  385. },
  386. // @private
  387. getSubmitValue: function() {
  388. var format = this.submitFormat || this.format,
  389. value = this.getValue();
  390. return value ? Ext.Date.format(value, format) : '';
  391. },
  392. /**
  393. * @private
  394. */
  395. parseDate : function(value) {
  396. if(!value || Ext.isDate(value)){
  397. return value;
  398. }
  399. var me = this,
  400. val = me.safeParse(value, me.format),
  401. altFormats = me.altFormats,
  402. altFormatsArray = me.altFormatsArray,
  403. i = 0,
  404. len;
  405. if (!val && altFormats) {
  406. altFormatsArray = altFormatsArray || altFormats.split('|');
  407. len = altFormatsArray.length;
  408. for (; i < len && !val; ++i) {
  409. val = me.safeParse(value, altFormatsArray[i]);
  410. }
  411. }
  412. return val;
  413. },
  414. // private
  415. formatDate : function(date){
  416. return Ext.isDate(date) ? Ext.Date.dateFormat(date, this.format) : date;
  417. },
  418. createPicker: function() {
  419. var me = this,
  420. format = Ext.String.format;
  421. return Ext.create('Ext.picker.Date', {
  422. pickerField: me,
  423. ownerCt: me.ownerCt,
  424. renderTo: document.body,
  425. floating: true,
  426. hidden: true,
  427. focusOnShow: true,
  428. minDate: me.minValue,
  429. maxDate: me.maxValue,
  430. disabledDatesRE: me.disabledDatesRE,
  431. disabledDatesText: me.disabledDatesText,
  432. disabledDays: me.disabledDays,
  433. disabledDaysText: me.disabledDaysText,
  434. format: me.format,
  435. showToday: me.showToday,
  436. startDay: me.startDay,
  437. minText: format(me.minText, me.formatDate(me.minValue)),
  438. maxText: format(me.maxText, me.formatDate(me.maxValue)),
  439. listeners: {
  440. scope: me,
  441. select: me.onSelect
  442. },
  443. keyNavConfig: {
  444. esc: function() {
  445. me.collapse();
  446. }
  447. }
  448. });
  449. },
  450. onSelect: function(m, d) {
  451. var me = this;
  452. me.setValue(d);
  453. me.fireEvent('select', me, d);
  454. me.collapse();
  455. },
  456. /**
  457. * @private
  458. * Sets the Date picker's value to match the current field value when expanding.
  459. */
  460. onExpand: function() {
  461. var value = this.getValue();
  462. this.picker.setValue(Ext.isDate(value) ? value : new Date());
  463. },
  464. /**
  465. * @private
  466. * Focuses the field when collapsing the Date picker.
  467. */
  468. onCollapse: function() {
  469. this.focus(false, 60);
  470. },
  471. // private
  472. beforeBlur : function(){
  473. var me = this,
  474. v = me.parseDate(me.getRawValue()),
  475. focusTask = me.focusTask;
  476. if (focusTask) {
  477. focusTask.cancel();
  478. }
  479. if (v) {
  480. me.setValue(v);
  481. }
  482. }
  483. /**
  484. * @hide
  485. * @cfg {Boolean} grow
  486. */
  487. /**
  488. * @hide
  489. * @cfg {Number} growMin
  490. */
  491. /**
  492. * @hide
  493. * @cfg {Number} growMax
  494. */
  495. /**
  496. * @hide
  497. * @method autoSize
  498. */
  499. });