praiadeseselle/wire/modules/Inputfield/InputfieldDatetime/InputfieldDatetime.js
2022-03-08 15:55:41 +01:00

192 lines
5.2 KiB
JavaScript

/**
* Manages InputfieldDatetime (text) elements with jQuery UI datepickers
*
*/
function InputfieldDatetimeDatepicker($t) {
var pickerVisible = $t.is(".InputfieldDatetimeDatepicker2");
var ts = parseInt($t.attr('data-ts'));
var tsDate = null;
var dateFormat = $t.attr('data-dateformat');
var timeFormat = $t.attr('data-timeformat');
var timeSelect = parseInt($t.attr('data-timeselect'));
var hasTimePicker = timeFormat.length > 0 && !pickerVisible;
var showOn = $t.is(".InputfieldDatetimeDatepicker3") ? 'focus' : 'button';
var ampm = parseInt($t.attr('data-ampm')) > 0;
var yearRange = $t.attr('data-yearrange');
if(ts > 1) tsDate = new Date(ts);
if(pickerVisible) {
// datepicker always visible (inline)
var $datepicker = $("<div></div>");
//$t.parent('p').after($datepicker);
$t.after($datepicker);
} else {
// datepicker doesn't appear till requested
var $datepicker = $t;
}
var options = {
changeMonth: true,
changeYear: true,
showOn: showOn,
buttonText: "&gt;",
showAnim: 'fadeIn',
dateFormat: dateFormat,
gotoCurrent: true,
defaultDate: tsDate
// buttonImage: config.urls.admin_images + 'icons/calendar.gif',
// dateFormat: config.date_format
};
if(yearRange && yearRange.length) options.yearRange = yearRange;
if(hasTimePicker) {
options.ampm = ampm;
options.timeFormat = timeFormat;
if(timeSelect > 0) {
options.controlType = 'select';
options.oneLine = true;
}
if(timeFormat.indexOf('ss') > -1) options.showSecond = true;
if(timeFormat.indexOf('m') == -1) options.showMinute = false;
$datepicker.datetimepicker(options);
} else {
$datepicker.datepicker(options);
}
if(pickerVisible) {
$datepicker.change(function(e) {
var d = $datepicker.datepicker('getDate');
var str = $.datepicker.formatDate(dateFormat, d);
$t.val(str);
});
}
// if using a trigger button, replace with a link icon
if(showOn == 'button') {
var $button = $t.next('button.ui-datepicker-trigger');
if($button.length) {
var $a = $("<a class='pw-ui-datepicker-trigger' href='#'><i class='fa fa-calendar'></i></a>");
$button.after($a).hide();
$a.click(function() {
$button.click();
return false;
});
}
}
$t.addClass('initDatepicker');
}
/**
* Manages InputfieldDatetimeSelect elements
*
*/
function InputfieldDatetimeSelect() {
/**
* Validate selection in InputfieldDatetime selects
*
*/
function validate($select) {
var $parent = $select.parent(),
$month = $parent.children('.InputfieldDatetimeMonth'),
month = parseInt($month.val()),
$day = $parent.children('.InputfieldDatetimeDay'),
day = parseInt($day.val()),
$year = $parent.children('.InputfieldDatetimeYear'),
year = parseInt($year.val()),
$value = $parent.children('.InputfieldDatetimeValue'),
date = month && day && year ? new Date(year, month - 1, day) : null,
errorClass = 'InputfieldDatetimeError';
if(date && date.getMonth() + 1 != month) {
// day not valid for month
day = '';
$day.val('').addClass(errorClass);
} else {
$day.removeClass(errorClass);
}
$value.val(date && day ? year + '-' + month + '-' + day : '');
}
/**
* Called when the Year select has changed in an InputfieldDatetimeSelect
*
* Enables addition of years before/after when "-" or "+" option is selected
*
*/
function yearChange($select) {
var value = $select.val();
if(value !== '-' && value !== '+') return;
var $blankOption = $select.find('option[value=""]'),
$option = $select.find('option[value="' + value + '"]'),
fromYear = parseInt($select.attr('data-from-year')),
toYear = parseInt($select.attr('data-to-year')),
numYears = toYear - fromYear,
n = 0,
$o;
if(numYears < 10) numYears = 10;
if(value === '-') {
// add # years prior
toYear = fromYear-1;
fromYear = fromYear - numYears;
for(n = toYear; n >= fromYear; n--) {
$o = jQuery('<option />').val(n).text(n);
$select.prepend($o);
}
$option.html('&lt; ' + fromYear);
$select.prepend($option).prepend($blankOption);
$select.val(toYear);
$select.attr('data-from-year', fromYear);
} else if(value === '+') {
// add # years after
fromYear = toYear+1;
toYear += numYears;
for(n = fromYear; n <= toYear; n++) {
$o = $('<option />').val(n).text(n);
$select.append($o);
}
$option.html('&gt; ' + toYear);
$select.append($option);
$select.val(fromYear);
$select.attr('data-to-year', toYear);
}
}
jQuery(document).on('change', '.InputfieldDatetimeSelect select', function() {
var $select = jQuery(this);
if($select.hasClass('InputfieldDatetimeYear')) yearChange($select);
validate($select);
});
}
/**
* Document ready
*
*/
jQuery(document).ready(function($) {
// init datepickers present when document is ready
$("input.InputfieldDatetimeDatepicker:not(.InputfieldDatetimeDatepicker3):not(.initDatepicker)").each(function(n) {
InputfieldDatetimeDatepicker($(this));
});
// init datepicker that should appear on focus (3) of text input, that wasn't present at document.ready
$(document).on('focus', 'input.InputfieldDatetimeDatepicker3:not(.hasDatepicker)', function() {
InputfieldDatetimeDatepicker($(this));
});
// init date selects
InputfieldDatetimeSelect();
});