734833b30aa349c6f416fd7dda01e1ed6d2a48f8
[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: 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 $container = $(this);
44 var $currentElement = $container.find('.form-control');
45 var format = DateTimePicker.options.format;
46 var isDateTimeField = $currentElement.hasClass('tceforms-datetimefield') || $currentElement.hasClass('datetime');
47 var isDateField = $currentElement.hasClass('tceforms-datefield') || $currentElement.hasClass('date');
48 var isTimeField = $currentElement.hasClass('tceforms-timefield') || $currentElement.hasClass('time');
49 var isTimeSecField = $currentElement.hasClass('tceforms-timesecfield');
50 var isYearField = $currentElement.hasClass('tceforms-timesecfield');
51
52 var options = {
53 pick12HourFormat: false,
54 pickDate: true,
55 pickTime: true,
56 useSeconds: false,
57 sideBySide: true,
58 icons: {
59 time: 'fa fa-clock-o',
60 date: 'fa fa-calendar',
61 up: 'fa fa-arrow-up',
62 down: 'fa fa-arrow-down'
63 }
64 };
65
66 if (isDateTimeField) {
67 options.format = format[1];
68 }
69 if (isDateField) {
70 options.format = format[0];
71 options.pickTime = false;
72 }
73 if (isTimeSecField) {
74 options.format = 'hh:mm:ss';
75 options.pickDate = false;
76 options.useSeconds = true;
77 }
78 if (isTimeField) {
79 options.pickDate = false;
80 options.format = 'hh:mm';
81 }
82 if (isYearField) {
83 options.format = 'YYYY';
84 options.pickDate = true;
85 options.pickTime = false;
86 }
87
88 // initialize the date time picker on this element
89 $container.datetimepicker(options);
90 });
91
92 $dateTimeFields.on('blur', '.form-control', function(event) {
93 var $target = $(event.target);
94 var $datePicker = $target.closest(DateTimePicker.options.fieldSelector);
95 var $hiddenField = $datePicker.find('input[type=hidden]');
96 var calculateTimeZoneOffset = $datePicker.data('date-offset');
97
98 if ($target.val() == '') {
99 $hiddenField.val('');
100 } else {
101 var format = $datePicker.data('DateTimePicker').format;
102 var date = moment($target.val(), format);
103 if (typeof calculateTimeZoneOffset != 'undefined') {
104 var timeZoneOffset = parseInt(calculateTimeZoneOffset);
105 } else {
106 var timeZoneOffset = date.zone() * 60;
107 }
108
109 if (date.isValid()) {
110 $hiddenField.val(date.unix() - timeZoneOffset);
111 } else {
112 date = moment($hiddenField.val() + timeZoneOffset, 'X');
113 $target.val(date.format(format));
114 }
115 }
116 });
117
118 // on datepicker change, write the selected date with the timezone offset to the hidden field
119 $dateTimeFields.on('dp.change', function(event) {
120 var date = event.date;
121 var $datePicker = $(event.currentTarget);
122 var calculateTimeZoneOffset = $datePicker.data('date-offset');
123 if (typeof calculateTimeZoneOffset != 'undefined') {
124 var timeZoneOffset = parseInt(calculateTimeZoneOffset);
125 } else {
126 var timeZoneOffset = date.zone() * 60;
127 }
128 var $hiddenField = $datePicker.find('input[type=hidden]');
129 $hiddenField.val(date.unix() - timeZoneOffset);
130 });
131 });
132 }
133 };
134
135 /**
136 * initialize function
137 */
138 return function() {
139 DateTimePicker.initialize();
140 return DateTimePicker;
141 }();
142 });