MDL-69505 core_form: fix js min/max date restriction in dateselector
[moodle.git] / lib / form / yui / src / dateselector / js / calendar.js
CommitLineData
5cba1029
JM
1/**
2 * Provides the Calendar class.
3 *
4 * @module moodle-form-dateselector
5 */
6
7/**
8 * Calendar class
9 */
29c5faff 10CALENDAR = function() {
5cba1029
JM
11 CALENDAR.superclass.constructor.apply(this, arguments);
12};
13CALENDAR.prototype = {
14 panel: null,
15 yearselect: null,
16 monthselect: null,
17 dayselect: null,
18 calendarimage: null,
19 enablecheckbox: null,
20 closepopup: true,
21 initializer: function() {
22 var controls = this.get('node').all('select');
5bb4f444 23 controls.each(function(node) {
5cba1029
JM
24 if (node.get('name').match(/\[year\]/)) {
25 this.yearselect = node;
26 } else if (node.get('name').match(/\[month\]/)) {
27 this.monthselect = node;
28 } else if (node.get('name').match(/\[day\]/)) {
29 this.dayselect = node;
30 }
31 node.after('change', this.handle_select_change, this);
32 }, this);
33
34 // Loop through the input fields.
35 var inputs = this.get('node').all('input, a');
36 inputs.each(function(node) {
37 // Check if the current node is a calendar image field.
38 if (node.get('name').match(/\[calendar\]/)) {
39 // Set it so that when the image is clicked the pop-up displays.
40 node.on('click', this.focus_event, this);
41 // Set the node to the calendarimage variable.
42 this.calendarimage = node;
43 } else { // Must be the enabled checkbox field.
44 // If the enable checkbox is clicked we want to either disable/enable the calendar image.
45 node.on('click', this.toggle_calendar_image, this);
46 // Set the node to the enablecheckbox variable.
47 this.enablecheckbox = node;
48 }
49 // Ensure that the calendarimage and enablecheckbox values have been set.
50 if (this.calendarimage && this.enablecheckbox) {
51 // Set the calendar icon status depending on the value of the checkbox.
52 this.toggle_calendar_image();
53 }
54 }, this);
55 },
56 focus_event: function(e) {
57 M.form.dateselector.cancel_any_timeout();
58 // If the current owner is set, then the pop-up is currently being displayed, so hide it.
59 if (M.form.dateselector.currentowner === this) {
60 this.release_calendar();
61 } else if ((this.enablecheckbox === null)
62 || (this.enablecheckbox.get('checked'))) { // Must be hidden. If the field is enabled display the pop-up.
63 this.claim_calendar();
64 }
65 // Stop the input image field from submitting the form.
66 e.preventDefault();
67 },
68 handle_select_change: function() {
69 // It may seem as if the following variable is not used, however any call to set_date_from_selects will trigger a
70 // call to set_selects_from_date if the calendar is open as the date has changed. Whenever the calendar is displayed
71 // the set_selects_from_date function is set to trigger on any date change (see function connect_handlers).
72 this.closepopup = false;
73 this.set_date_from_selects();
74 this.closepopup = true;
75 },
76 claim_calendar: function() {
77 M.form.dateselector.cancel_any_timeout();
78 if (M.form.dateselector.currentowner === this) {
79 return;
80 }
81 if (M.form.dateselector.currentowner) {
82 M.form.dateselector.currentowner.release_calendar();
83 }
84 if (M.form.dateselector.currentowner !== this) {
85 this.connect_handlers();
86 this.set_date_from_selects();
87 }
88 M.form.dateselector.currentowner = this;
9ccf833e
JD
89 M.form.dateselector.calendar.set('minimumDate', new Date(this.yearselect.firstOptionValue(), 0, 1));
90 M.form.dateselector.calendar.set('maximumDate', new Date(this.yearselect.lastOptionValue(), 11, 31));
5cba1029
JM
91 M.form.dateselector.panel.show();
92 M.form.dateselector.calendar.show();
93 M.form.dateselector.fix_position();
94 setTimeout(function() {
95 M.form.dateselector.cancel_any_timeout();
96 }, 100);
97
98 // Focus on the calendar.
99 M.form.dateselector.calendar.focus();
100
101 // When the user tab out the calendar, close it.
102 Y.one(document.body).on('keyup', function(e) {
103 // hide the calendar if we press a key and the calendar is not focussed, or if we press ESC in the calendar.
104 if ((M.form.dateselector.currentowner === this && !M.form.dateselector.calendar.get('focused')) ||
105 ((e.keyCode === 27) && M.form.dateselector.calendar.get('focused'))) {
106 // Focus back on the calendar button.
107 this.calendarimage.focus();
108 this.release_calendar();
109 }
110 }, this);
111
112 },
113 set_date_from_selects: function() {
114 var year = parseInt(this.yearselect.get('value'), 10);
115 var month = parseInt(this.monthselect.get('value'), 10) - 1;
116 var day = parseInt(this.dayselect.get('value'), 10);
117 var date = new Date(year, month, day);
118 M.form.dateselector.calendar.deselectDates();
119 M.form.dateselector.calendar.selectDates([date]);
120 M.form.dateselector.calendar.set("date", date);
121 M.form.dateselector.calendar.render();
122 if (date.getDate() !== day) {
123 // Must've selected the 29 to 31st of a month that doesn't have such dates.
124 this.dayselect.set('value', date.getDate());
125 this.monthselect.set('value', date.getMonth() + 1);
126 }
127 },
128 set_selects_from_date: function(ev) {
129 var date = ev.newSelection[0];
130 var newyear = Y.DataType.Date.format(date, {format: "%Y"});
131 var newindex = newyear - this.yearselect.firstOptionValue();
132 this.yearselect.set('selectedIndex', newindex);
133 this.monthselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%m"}) - this.monthselect.firstOptionValue());
134 this.dayselect.set('selectedIndex', Y.DataType.Date.format(date, {format: "%d"}) - this.dayselect.firstOptionValue());
135 if (M.form.dateselector.currentowner && this.closepopup) {
136 this.release_calendar();
137 }
138 },
139 connect_handlers: function() {
140 M.form.dateselector.calendar.on('selectionChange', this.set_selects_from_date, this, true);
141 },
142 release_calendar: function(e) {
74d0ca15 143 var wasOwner = M.form.dateselector.currentowner === this;
5cba1029
JM
144 M.form.dateselector.panel.hide();
145 M.form.dateselector.calendar.detach('selectionChange', this.set_selects_from_date);
146 M.form.dateselector.calendar.hide();
147 M.form.dateselector.currentowner = null;
148
74d0ca15
FM
149 // Put the focus back to the image calendar that we clicked, only if it was visible.
150 if (wasOwner && (e === null || typeof e === "undefined" || e.type !== "click")) {
5cba1029
JM
151 this.calendarimage.focus();
152 }
153 },
154 toggle_calendar_image: function() {
155 // If the enable checkbox is det checked, disable the image.
156 if (!this.enablecheckbox.get('checked')) {
157 this.calendarimage.set('disabled', 'disabled');
158 this.calendarimage.setStyle('cursor', 'default');
159 this.release_calendar();
160 } else {
161 this.calendarimage.set('disabled', false);
162 this.calendarimage.setStyle('cursor', null);
163 }
164 }
165};
166Y.extend(CALENDAR, Y.Base, CALENDAR.prototype, {
167 NAME: 'Date Selector',
168 ATTRS: {
5bb4f444 169 firstdayofweek: {
5cba1029
JM
170 validator: Y.Lang.isString
171 },
172 node: {
173 setter: function(node) {
174 return Y.one(node);
175 }
176 }
177 }
178});