e02a5d40342c9c4660d0a3170e926b8f56d9aaef
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Public / JavaScript / DateTimePicker.js
1 /*
2 * This file is part of the TYPO3 CMS project.
3 *
4 * It is free software; you can redistribute it and/or modify it under
5 * the terms of the GNU General Public License, either version 2
6 * of the License, or any later version.
7 *
8 * For the full copyright and license information, please read the
9 * LICENSE.txt file that was distributed with this source code.
10 *
11 * The TYPO3 project - inspiring people to share!
12 */
13
14 /**
15 * Module: TYPO3/CMS/Backend/DateTimePicker
16 * contains all logic for the date time picker used in FormEngine
17 * and EXT:belog and EXT:scheduler
18 */
19 define(['jquery'], function ($) {
20
21 /**
22 *
23 * @type {{options: {fieldSelector: string, format: *}}}
24 * @exports TYPO3/CMS/Backend/DateTimePicker
25 */
26 var DateTimePicker = {
27 options: {
28 fieldSelector: '.t3js-datetimepicker',
29 format: (opener != null && typeof opener.top.TYPO3 !== 'undefined' ? opener.top : top).TYPO3.settings.DateTimePicker.DateFormat
30 }
31 };
32
33 /**
34 * initialize date fields to add a datepicker to each field
35 * note: this function can be called multiple times (e.g. after AJAX requests) because it only
36 * applies to fields which haven't been used yet.
37 */
38 DateTimePicker.initialize = function() {
39 // fetch the date time fields that heven't been initialized yet
40 var $dateTimeFields = $(DateTimePicker.options.fieldSelector).filter(function() {
41 return ($(this).data('DateTimePicker') == undefined);
42 });
43
44 if ($dateTimeFields.length > 0) {
45 require(['moment', 'twbs/bootstrap-datetimepicker'], function(moment) {
46
47 // initialize the datepicker on each selected element
48 $dateTimeFields.each(function() {
49 var $element = $(this);
50 var format = DateTimePicker.options.format;
51 var type = $element.data('dateType');
52 var options = {
53 sideBySide: true,
54 icons: {
55 time: 'fa fa-clock-o',
56 date: 'fa fa-calendar',
57 up: 'fa fa-chevron-up',
58 down: 'fa fa-chevron-down',
59 previous: 'fa fa-chevron-left',
60 next: 'fa fa-chevron-right',
61 today: 'fa fa-calendar-o',
62 clear: 'fa fa-trash'
63 }
64 };
65
66 // set options based on type
67 switch (type) {
68 case 'datetime':
69 options.format = format[1];
70 break;
71 case 'date':
72 options.format = format[0];
73 break;
74 case 'time':
75 options.format = 'HH:mm';
76 break;
77 case 'timesec':
78 options.format = 'HH:mm:ss';
79 break;
80 case 'year':
81 options.format = 'YYYY';
82 break;
83 }
84
85 // datepicker expects the min and max dates to be formatted with options.format but unix timestamp given
86 if ($element.data('dateMindate')) {
87 $element.data('dateMindate', moment.unix($element.data('dateMindate')).format(options.format));
88 }
89 if ($element.data('dateMaxdate')) {
90 $element.data('dateMaxdate', moment.unix($element.data('dateMaxdate')).format(options.format));
91 }
92
93 // initialize the date time picker on this element
94 $element.datetimepicker(options);
95 });
96
97 $dateTimeFields.on('blur', function(event) {
98 var $element = $(this);
99 var $hiddenField = $element.parent().parent().find('input[type=hidden]');
100
101 if ($element.val() === '') {
102 $hiddenField.val('');
103 } else {
104 var format = $element.data('DateTimePicker').format();
105 var date = moment($element.val(), format);
106 var calculateTimeZoneOffset = $element.data('date-offset');
107 var timeZoneOffset;
108
109 if (typeof calculateTimeZoneOffset !== 'undefined') {
110 timeZoneOffset = parseInt(calculateTimeZoneOffset);
111 } else {
112 timeZoneOffset = date.utcOffset() * 60 * -1;
113 }
114
115 if (date.isValid()) {
116 var value;
117 switch ($element.data('dateType')) {
118 case 'time':
119 value = parseInt(date.format('H')) * 3600 + parseInt(date.format('m')) * 60;
120 break;
121 case 'timesec':
122 value = parseInt(date.format('H')) * 3600 + parseInt(date.format('m')) * 60 + parseInt(date.format('s'));
123 break;
124 default:
125 value = date.unix() - timeZoneOffset;
126 }
127 $hiddenField.val(value);
128 } else {
129 date = moment($hiddenField.val() + timeZoneOffset, 'X');
130 $element.val(date.format(format));
131 }
132 }
133 });
134
135 // on datepicker change, write the selected date with the timezone offset to the hidden field
136 $dateTimeFields.on('dp.change', function(event) {
137 var $element = $(this);
138 var $hiddenField = $element.parent().parent().find('input[type=hidden]');
139
140 if ($element.val() === '') {
141 $hiddenField.val('');
142 } else {
143 var date = event.date;
144
145 var calculateTimeZoneOffset = $element.data('date-offset');
146 var timeZoneOffset, value;
147 if (typeof calculateTimeZoneOffset !== 'undefined') {
148 timeZoneOffset = parseInt(calculateTimeZoneOffset);
149 } else {
150 timeZoneOffset = date.utcOffset() * 60 * -1;
151 }
152
153 switch ($element.data('dateType')) {
154 case 'time':
155 value = parseInt(date.format('H')) * 3600 + parseInt(date.format('m')) * 60;
156 break;
157 case 'timesec':
158 value = parseInt(date.format('H')) * 3600 + parseInt(date.format('m')) * 60 + parseInt(date.format('s'));
159 break;
160 default:
161 value = date.unix() - timeZoneOffset;
162 }
163 $hiddenField.val(value);
164 }
165 });
166 });
167 }
168 };
169
170 DateTimePicker.initialize();
171 return DateTimePicker;
172 });