|
Lines 31-36
Link Here
|
| 31 |
delimiter = "-"; |
31 |
delimiter = "-"; |
| 32 |
} |
32 |
} |
| 33 |
var sentmsg = 0; |
33 |
var sentmsg = 0; |
|
|
34 |
var dateInputStyle = "[% Koha.Preference('DateInputStyle') | html %]"; |
| 34 |
var bidi = [% IF(bidi) %] true[% ELSE %] false[% END %]; |
35 |
var bidi = [% IF(bidi) %] true[% ELSE %] false[% END %]; |
| 35 |
var calendarFirstDayOfWeek = '[% Koha.Preference('CalendarFirstDayOfWeek') | html %]'; |
36 |
var calendarFirstDayOfWeek = '[% Koha.Preference('CalendarFirstDayOfWeek') | html %]'; |
| 36 |
var flatpickr_timeformat_string = [% IF Koha.Preference('TimeFormat') == '12hr' %]"G:i K"[% ELSE %]"H:i"[% END %]; |
37 |
var flatpickr_timeformat_string = [% IF Koha.Preference('TimeFormat') == '12hr' %]"G:i K"[% ELSE %]"H:i"[% END %]; |
|
Lines 212-217
Link Here
|
| 212 |
let options = {}; |
213 |
let options = {}; |
| 213 |
let refresh_max_date = 0; |
214 |
let refresh_max_date = 0; |
| 214 |
let disable_buttons = []; |
215 |
let disable_buttons = []; |
|
|
216 |
let is_time = $(input).data('flatpickr-enable-time') === true; |
| 217 |
let is_time_only = $(input).data('flatpickr-time-only') === true; |
| 218 |
let is_period = $(input).data('flatpickr-period'); |
| 215 |
|
219 |
|
| 216 |
if( $(input).data("flatpickr-futureinclusive") === true |
220 |
if( $(input).data("flatpickr-futureinclusive") === true |
| 217 |
|| $(input).data("flatpickr-futuredate") === true ) { |
221 |
|| $(input).data("flatpickr-futuredate") === true ) { |
|
Lines 272-278
Link Here
|
| 272 |
options['plugins'] = []; |
276 |
options['plugins'] = []; |
| 273 |
} |
277 |
} |
| 274 |
|
278 |
|
| 275 |
let fp = $(input).flatpickr(options); |
279 |
let fp; |
|
|
280 |
if ( dateInputStyle === 'split' && !is_time && !is_time_only && !is_period ) { |
| 281 |
fp = apply_split_date_widget(input, options); |
| 282 |
} else { |
| 283 |
fp = $(input).flatpickr(options); |
| 284 |
} |
| 276 |
|
285 |
|
| 277 |
$(disable_buttons).each(function(index, value){ |
286 |
$(disable_buttons).each(function(index, value){ |
| 278 |
$(fp.calendarContainer).find(".shortcut-buttons-flatpickr-button[data-index='"+value+"']").prop("disabled", "disabled"); |
287 |
$(fp.calendarContainer).find(".shortcut-buttons-flatpickr-button[data-index='"+value+"']").prop("disabled", "disabled"); |
|
Lines 292-297
Link Here
|
| 292 |
} |
301 |
} |
| 293 |
} |
302 |
} |
| 294 |
|
303 |
|
|
|
304 |
function apply_split_date_widget(input, fpOptions) { |
| 305 |
let parts_order, sep; |
| 306 |
switch (dateformat_pref) { |
| 307 |
case 'us': parts_order = ['month', 'day', 'year']; sep = '/'; break; |
| 308 |
case 'iso': |
| 309 |
case 'sql': parts_order = ['year', 'month', 'day']; sep = '-'; break; |
| 310 |
case 'dmydot': parts_order = ['day', 'month', 'year']; sep = '.'; break; |
| 311 |
default: parts_order = ['day', 'month', 'year']; sep = '/'; /* metric */ |
| 312 |
} |
| 313 |
let labels = { day: __("Day"), month: __("Month"), year: __("Year") }; |
| 314 |
let placeholders = { day: 'DD', month: 'MM', year: 'YYYY' }; |
| 315 |
let autocompletes = { day: 'bday-day', month: 'bday-month', year: 'bday-year' }; |
| 316 |
let inputId = input.id || ('fp_split_' + Math.random().toString(36).substr(2, 8)); |
| 317 |
|
| 318 |
let options = Object.assign({}, fpOptions, { |
| 319 |
clickOpens: false, |
| 320 |
onReady: function(selectedDates, dateStr, instance) { |
| 321 |
/* Hide the altInput; our split inputs replace it visually */ |
| 322 |
$(instance.altInput) |
| 323 |
.addClass('visually-hidden') |
| 324 |
.attr('tabindex', '-1') |
| 325 |
.attr('aria-hidden', 'true'); |
| 326 |
|
| 327 |
let $wrapper = $('<div class="date-split-wrapper"></div>') |
| 328 |
.attr('data-split-for', inputId); |
| 329 |
|
| 330 |
for (let i = 0; i < parts_order.length; i++) { |
| 331 |
let part = parts_order[i]; |
| 332 |
let partId = inputId + '_' + part; |
| 333 |
let $group = $('<span class="split-part-group"></span>'); |
| 334 |
$group.append( |
| 335 |
$('<label></label>').attr('for', partId).text(labels[part]) |
| 336 |
); |
| 337 |
$group.append( |
| 338 |
$('<input type="text" inputmode="numeric" pattern="[0-9]*">') |
| 339 |
.attr('id', partId) |
| 340 |
.attr('maxlength', part === 'year' ? 4 : 2) |
| 341 |
.attr('placeholder', placeholders[part]) |
| 342 |
.attr('autocomplete', autocompletes[part]) |
| 343 |
.addClass('split-part split-' + part) |
| 344 |
); |
| 345 |
$wrapper.append($group); |
| 346 |
if (i < parts_order.length - 1) { |
| 347 |
$wrapper.append( |
| 348 |
$('<span class="split-sep" aria-hidden="true"></span>').text(sep) |
| 349 |
); |
| 350 |
} |
| 351 |
} |
| 352 |
|
| 353 |
let $calBtn = $('<a href="#" class="split-calendar-btn"></a>') |
| 354 |
.attr('title', __("Open calendar")) |
| 355 |
.attr('aria-label', __("Open calendar")) |
| 356 |
.attr('aria-hidden', 'true'); |
| 357 |
let $clearBtn = $('<a href="#" class="clear_date split-clear-btn fa fa-fw fa-times"></a>') |
| 358 |
.attr('aria-label', __("Clear date")) |
| 359 |
.attr('aria-hidden', 'true'); |
| 360 |
$wrapper.append($calBtn).append($clearBtn); |
| 361 |
|
| 362 |
$(instance.altInput).after($wrapper); |
| 363 |
|
| 364 |
/* Populate split inputs from the current ISO value (edit mode) */ |
| 365 |
let val = $(input).val(); |
| 366 |
if (val && /^\d{4}-\d{2}-\d{2}$/.test(val)) { |
| 367 |
let p = val.split('-'); |
| 368 |
$wrapper.find('.split-year').val(p[0]); |
| 369 |
$wrapper.find('.split-month').val(p[1]); |
| 370 |
$wrapper.find('.split-day').val(p[2]); |
| 371 |
} |
| 372 |
|
| 373 |
let syncing = false; |
| 374 |
|
| 375 |
/* Split inputs -> flatpickr ISO */ |
| 376 |
$wrapper.on('input', '.split-part', function() { |
| 377 |
let d = $wrapper.find('.split-day').val().trim(); |
| 378 |
let m = $wrapper.find('.split-month').val().trim(); |
| 379 |
let y = $wrapper.find('.split-year').val().trim(); |
| 380 |
syncing = true; |
| 381 |
if (d && m && y && y.length === 4) { |
| 382 |
instance.setDate(y + '-' + m.padStart(2, '0') + '-' + d.padStart(2, '0'), false); |
| 383 |
} else { |
| 384 |
instance.clear(false); |
| 385 |
$(input).val(''); |
| 386 |
} |
| 387 |
$(input).trigger('change'); |
| 388 |
syncing = false; |
| 389 |
}); |
| 390 |
|
| 391 |
/* Auto-advance from day/month after 2 digits (skip on delete/backspace) */ |
| 392 |
$wrapper.on('input', '.split-day, .split-month', function(e) { |
| 393 |
let inputType = e.originalEvent && e.originalEvent.inputType; |
| 394 |
if ($(this).val().length >= 2 && inputType && !inputType.startsWith('delete')) { |
| 395 |
let $parts = $wrapper.find('.split-part'); |
| 396 |
let idx = $parts.index(this); |
| 397 |
if (idx < $parts.length - 1) { |
| 398 |
$parts.eq(idx + 1).focus().select(); |
| 399 |
} |
| 400 |
} |
| 401 |
}); |
| 402 |
|
| 403 |
/* Calendar date selected -> populate split inputs */ |
| 404 |
$(input).on('change', function() { |
| 405 |
if (syncing) return; |
| 406 |
let v = $(input).val(); |
| 407 |
if (v && /^\d{4}-\d{2}-\d{2}$/.test(v)) { |
| 408 |
let p = v.split('-'); |
| 409 |
$wrapper.find('.split-year').val(p[0]); |
| 410 |
$wrapper.find('.split-month').val(p[1]); |
| 411 |
$wrapper.find('.split-day').val(p[2]); |
| 412 |
} else { |
| 413 |
$wrapper.find('.split-year, .split-month, .split-day').val(''); |
| 414 |
} |
| 415 |
}); |
| 416 |
|
| 417 |
/* Calendar button opens the flatpickr calendar */ |
| 418 |
$calBtn.on('click', function(e) { |
| 419 |
e.preventDefault(); |
| 420 |
instance.open(); |
| 421 |
}); |
| 422 |
|
| 423 |
/* Clear button clears all split inputs and the flatpickr value */ |
| 424 |
$clearBtn.on('click', function(e) { |
| 425 |
e.preventDefault(); |
| 426 |
syncing = true; |
| 427 |
instance.clear(); |
| 428 |
$(input).val(''); |
| 429 |
$wrapper.find('.split-year, .split-month, .split-day').val(''); |
| 430 |
syncing = false; |
| 431 |
}); |
| 432 |
} |
| 433 |
}); |
| 434 |
|
| 435 |
return $(input).flatpickr(options); |
| 436 |
} |
| 437 |
|
| 438 |
function validateSplitDateInputs() { |
| 439 |
let valid = true; |
| 440 |
$('.date-split-wrapper').each(function() { |
| 441 |
let $wrapper = $(this); |
| 442 |
let origId = $wrapper.data('split-for'); |
| 443 |
let $orig = origId ? $('#' + origId) : null; |
| 444 |
let isRequired = $orig && $orig.is('[required]'); |
| 445 |
let d = $wrapper.find('.split-day').val().trim(); |
| 446 |
let m = $wrapper.find('.split-month').val().trim(); |
| 447 |
let y = $wrapper.find('.split-year').val().trim(); |
| 448 |
let anyFilled = d || m || y; |
| 449 |
let allFilled = d && m && y && y.length === 4; |
| 450 |
|
| 451 |
if (isRequired && !allFilled) { |
| 452 |
alert(__("Please enter a complete date.")); |
| 453 |
$wrapper.find('.split-part').first().focus(); |
| 454 |
valid = false; |
| 455 |
return false; |
| 456 |
} |
| 457 |
if (anyFilled && !allFilled) { |
| 458 |
alert(__("Please complete all parts of the date field.")); |
| 459 |
$wrapper.find('.split-part').first().focus(); |
| 460 |
valid = false; |
| 461 |
return false; |
| 462 |
} |
| 463 |
if (allFilled) { |
| 464 |
let dt = new Date(parseInt(y, 10), parseInt(m, 10) - 1, parseInt(d, 10)); |
| 465 |
if ( dt.getFullYear() !== parseInt(y, 10) |
| 466 |
|| dt.getMonth() !== parseInt(m, 10) - 1 |
| 467 |
|| dt.getDate() !== parseInt(d, 10) ) { |
| 468 |
alert(__("Please enter a valid date.")); |
| 469 |
$wrapper.find('.split-part').first().focus(); |
| 470 |
valid = false; |
| 471 |
return false; |
| 472 |
} |
| 473 |
} |
| 474 |
}); |
| 475 |
return valid; |
| 476 |
} |
| 477 |
|
| 295 |
$(document).ready(function(){ |
478 |
$(document).ready(function(){ |
| 296 |
$(".flatpickr").each(function(){ |
479 |
$(".flatpickr").each(function(){ |
| 297 |
apply_flatpickr(this); |
480 |
apply_flatpickr(this); |