68b9513a1f39e749821a7031db2f3d291f62cb50
[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 * contains all logic for the date time picker used in FormEngine
16 * and EXT:belog and EXT:scheduler
17 */
18 define('TYPO3/CMS/Backend/DateTimePicker', ['jquery'], function ($) {
19
20 var DateTimePicker = {
21 options: {
22 fieldSelector: '.t3js-datetimepicker',
23 format: (opener ? opener.top : top).TYPO3.settings.DateTimePicker.DateFormat
24 }
25 };
26
27 /**
28 * initialize date fields to add a datepicker to each field
29 * note: this function can be called multiple times (e.g. after AJAX requests) because it only
30 * applies to fields which haven't been used yet.
31 */
32 DateTimePicker.initialize = function() {
33 // fetch the date time fields that heven't been initialized yet
34 var $dateTimeFields = $(DateTimePicker.options.fieldSelector).filter(function() {
35 return ($(this).data('DateTimePicker') == undefined);
36 });
37
38 if ($dateTimeFields.length > 0) {
39 require(['moment', 'twbs/bootstrap-datetimepicker'], function(moment) {
40
41 // initialize the datepicker on each selected element
42 $dateTimeFields.each(function() {
43 var $element = $(this);
44 var format = DateTimePicker.options.format;
45 var type = $element.data('dateType');
46 var options = {
47 pick12HourFormat: false,
48 pickDate: true,
49 pickTime: true,
50 useSeconds: false,
51 sideBySide: true,
52 icons: {
53 time: 'fa fa-clock-o',
54 date: 'fa fa-calendar',
55 up: 'fa fa-arrow-up',
56 down: 'fa fa-arrow-down'
57 }
58 };
59
60 // set options based on type
61 switch (type) {
62 case 'datetime':
63 options.format = format[1];
64 break;
65 case 'date':
66 options.format = format[0];
67 options.pickTime = false;
68 break;
69 case 'time':
70 options.pickDate = false;
71 options.format = 'HH:mm';
72 break;
73 case 'timesec':
74 options.format = 'HH:mm:ss';
75 options.pickDate = false;
76 options.useSeconds = true;
77 break;
78 case 'year':
79 options.format = 'YYYY';
80 options.pickDate = true;
81 options.pickTime = false;
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
99 var $element = $(this);
100 var $hiddenField = $element.parent().find('input[type=hidden]');
101 var calculateTimeZoneOffset = $element.data('date-offset');
102
103 if ($element.val() === '') {
104 $hiddenField.val('');
105 } else {
106 var format = $element.data('DateTimePicker').format;
107 var date = moment($element.val(), format);
108 if (typeof calculateTimeZoneOffset !== 'undefined') {
109 var timeZoneOffset = parseInt(calculateTimeZoneOffset);
110 } else {
111 var timeZoneOffset = date.zone() * 60;
112 }
113
114 if (date.isValid()) {
115 $hiddenField.val(date.unix() - timeZoneOffset);
116 } else {
117 date = moment($hiddenField.val() + timeZoneOffset, 'X');
118 $element.val(date.format(format));
119 }
120 }
121 });
122
123 // on datepicker change, write the selected date with the timezone offset to the hidden field
124 $dateTimeFields.on('dp.change', function(event) {
125 var $element = $(this);
126 var date = event.date;
127 var calculateTimeZoneOffset = $element.data('date-offset');
128 if (typeof calculateTimeZoneOffset !== 'undefined') {
129 var timeZoneOffset = parseInt(calculateTimeZoneOffset);
130 } else {
131 var timeZoneOffset = date.zone() * 60;
132 }
133 var $hiddenField = $element.parent().find('input[type=hidden]');
134 $hiddenField.val(date.unix() - timeZoneOffset);
135 });
136 });
137 }
138 };
139
140 /**
141 * initialize function
142 */
143 return function() {
144 DateTimePicker.initialize();
145 return DateTimePicker;
146 }();
147 });