/* ------------------------------------------------------------------------------
*
* # Date and time pickers
*
* Demo JS code for picker_date.html page
*
* ---------------------------------------------------------------------------- */
// Setup module
// ------------------------------
var DateTimePickers = function() {
//
// Setup module components
//
// Daterange picker
var _componentDaterange = function() {
if (!$().daterangepicker) {
console.warn('Warning - daterangepicker.js is not loaded.');
return;
}
// Basic initialization
$('.daterange-basic').daterangepicker({
applyClass: 'bg-slate-600',
cancelClass: 'btn-light'
});
// Display week numbers
$('.daterange-weeknumbers').daterangepicker({
showWeekNumbers: true,
applyClass: 'bg-slate-600',
cancelClass: 'btn-light'
});
// Button class options
$('.daterange-buttons').daterangepicker({
applyClass: 'btn-success',
cancelClass: 'btn-danger'
});
// Display time picker
$('.daterange-time').daterangepicker({
timePicker: true,
applyClass: 'bg-slate-600',
cancelClass: 'btn-light',
locale: {
format: 'MM/DD/YYYY h:mm a'
}
});
// Show calendars on left
$('.daterange-left').daterangepicker({
opens: 'left',
applyClass: 'bg-slate-600',
cancelClass: 'btn-light'
});
// Single picker
$('.daterange-single').daterangepicker({
singleDatePicker: true
});
// Display date dropdowns
$('.daterange-datemenu').daterangepicker({
showDropdowns: true,
opens: 'left',
applyClass: 'bg-slate-600',
cancelClass: 'btn-light'
});
// 10 minute increments
$('.daterange-increments').daterangepicker({
timePicker: true,
opens: 'left',
applyClass: 'bg-slate-600',
cancelClass: 'btn-light',
timePickerIncrement: 10,
locale: {
format: 'MM/DD/YYYY h:mm a'
}
});
// Localization
$('.daterange-locale').daterangepicker({
applyClass: 'bg-slate-600',
cancelClass: 'btn-light',
opens: 'left',
ranges: {
'Сегодня': [moment(), moment()],
'Вчера': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Последние 7 дней': [moment().subtract(6, 'days'), moment()],
'Последние 30 дней': [moment().subtract(29, 'days'), moment()],
'Этот месяц': [moment().startOf('month'), moment().endOf('month')],
'Прошедший месяц': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
applyLabel: 'Вперед',
cancelLabel: 'Отмена',
startLabel: 'Начальная дата',
endLabel: 'Конечная дата',
customRangeLabel: 'Выбрать дату',
daysOfWeek: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт','Сб'],
monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
firstDay: 1
}
});
//
// Pre-defined ranges and callback
//
// Initialize with options
$('.daterange-predefined').daterangepicker(
{
startDate: moment().subtract(29, 'days'),
endDate: moment(),
minDate: '01/01/2014',
maxDate: '12/31/2019',
dateLimit: { days: 60 },
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
opens: 'left',
applyClass: 'btn-sm bg-slate',
cancelClass: 'btn-sm btn-light'
},
function(start, end) {
$('.daterange-predefined span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
$.jGrowl('Date range has been changed', { header: 'Update', theme: 'bg-primary', position: 'center', life: 1500 });
}
);
// Display date format
$('.daterange-predefined span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
//
// Inside button
//
// Initialize with options
$('.daterange-ranges').daterangepicker(
{
startDate: moment().subtract(29, 'days'),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2019',
dateLimit: { days: 60 },
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
opens: 'left',
applyClass: 'btn-sm bg-slate-600',
cancelClass: 'btn-sm btn-light'
},
function(start, end) {
$('.daterange-ranges span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
// Display date format
$('.daterange-ranges span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
};
// Pickadate picker
var _componentPickadate = function() {
if (!$().pickadate) {
console.warn('Warning - picker.js and/or picker.date.js is not loaded.');
return;
}
// Basic options
$('.pickadate').pickadate();
// Change day names
$('.pickadate-strings').pickadate({
weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
showMonthsShort: true
});
// Button options
$('.pickadate-buttons').pickadate({
today: '',
close: '',
clear: 'Clear selection'
});
// Accessibility labels
$('.pickadate-accessibility').pickadate({
labelMonthNext: 'Go to the next month',
labelMonthPrev: 'Go to the previous month',
labelMonthSelect: 'Pick a month from the dropdown',
labelYearSelect: 'Pick a year from the dropdown',
selectMonths: true,
selectYears: true
});
// Localization
$('.pickadate-translated').pickadate({
monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
today: 'aujourd\'hui',
clear: 'effacer',
formatSubmit: 'yyyy/mm/dd'
});
// Format options
$('.pickadate-format').pickadate({
// Escape any “rule” characters with an exclamation mark (!).
format: 'You selecte!d: dddd, dd mmm, yyyy',
formatSubmit: 'yyyy/mm/dd',
hiddenPrefix: 'prefix__',
hiddenSuffix: '__suffix'
});
// Editable input
var $input_date = $('.pickadate-editable').pickadate({
editable: true,
onClose: function() {
$('.datepicker').focus();
}
});
var picker_date = $input_date.pickadate('picker');
$input_date.on('click', function(event) {
if (picker_date.get('open')) {
picker_date.close();
} else {
picker_date.open();
}
event.stopPropagation();
});
// Dropdown selectors
$('.pickadate-selectors').pickadate({
selectYears: true,
selectMonths: true
});
// Year selector
$('.pickadate-year').pickadate({
selectYears: 4
});
// Set first weekday
$('.pickadate-weekday').pickadate({
firstDay: 1
});
// Date limits
$('.pickadate-limits').pickadate({
min: [2014,3,20],
max: [2014,7,14]
});
// Disable certain dates
$('.pickadate-disable').pickadate({
disable: [
[2015,8,3],
[2015,8,12],
[2015,8,20]
]
});
// Disable date range
$('.pickadate-disable-range').pickadate({
disable: [
5,
[2013, 10, 21, 'inverted'],
{ from: [2014, 3, 15], to: [2014, 3, 25] },
[2014, 3, 20, 'inverted'],
{ from: [2014, 3, 17], to: [2014, 3, 18], inverted: true }
]
});
// Events
$('.pickadate-events').pickadate({
onStart: function() {
console.log('Hello there :)')
},
onRender: function() {
console.log('Whoa.. rendered anew')
},
onOpen: function() {
console.log('Opened up')
},
onClose: function() {
console.log('Closed now')
},
onStop: function() {
console.log('See ya.')
},
onSet: function(context) {
console.log('Just set stuff:', context)
},
locale: {
format: 'yyyy/mm/dd'
},
format: 'dd-mm-yyyy',
});
};
// Pickatime picker
var _componentPickatime = function() {
if (!$().pickatime) {
console.warn('Warning - picker.js and/or picker.time.js is not loaded.');
return;
}
// Default functionality
$('.pickatime').pickatime();
// Clear button
$('.pickatime-clear').pickatime({
clear: ''
});
// Time formats
$('.pickatime-format').pickatime({
// Escape any “rule” characters with an exclamation mark (!).
format: 'T!ime selected: h:i a',
formatLabel: '<b>h</b>:i <!i>a</!i>',
formatSubmit: 'HH:i',
hiddenPrefix: 'prefix__',
hiddenSuffix: '__suffix'
});
// Send hidden value
$('.pickatime-hidden').pickatime({
formatSubmit: 'HH:i',
hiddenName: true
});
// Editable input
var $input_time = $('.pickatime-editable').pickatime({
editable: true,
onClose: function() {
$('.datepicker').focus();
}
});
var picker_time = $input_time.pickatime('picker');
$input_time.on('click', function(event) {
if (picker_time.get('open')) {
picker_time.close();
} else {
picker_time.open();
}
event.stopPropagation();
});
// Time intervals
$('.pickatime-intervals').pickatime({
interval: 150
});
// Time limits
$('.pickatime-limits').pickatime({
min: [7,30],
max: [14,0]
});
// Using integers as hours
$('.pickatime-limits-integers').pickatime({
disable: [
3, 5, 7
]
});
// Disable times
$('.pickatime-disabled').pickatime({
disable: [
[0,30],
[2,0],
[8,30],
[9,0]
]
});
// Disabling ranges
$('.pickatime-range').pickatime({
disable: [
1,
[1, 30, 'inverted'],
{ from: [4, 30], to: [10, 30] },
[6, 30, 'inverted'],
{ from: [8, 0], to: [9, 0], inverted: true }
]
});
// Disable all with exeption
$('.pickatime-disableall').pickatime({
disable: [
true,
3, 5, 7,
[0,30],
[2,0],
[8,30],
[9,0]
]
});
// Events
$('.pickatime-events').pickatime({
onStart: function() {
console.log('Hello there :)')
},
onRender: function() {
console.log('Whoa.. rendered anew')
},
onOpen: function() {
console.log('Opened up')
},
onClose: function() {
console.log('Closed now')
},
onStop: function() {
console.log('See ya.')
},
onSet: function(context) {
console.log('Just set stuff:', context)
}
});
};
// Anytime picker
var _componentAnytime = function() {
if (!$().AnyTime_picker) {
console.warn('Warning - anytime.min.js is not loaded.');
return;
}
// Basic usage
$('#anytime-date').AnyTime_picker({
format: '%W, %M %D in the Year %z %E',
firstDOW: 1
});
// Time picker
$('#anytime-time').AnyTime_picker({
format: '%H:%i'
});
// Display hours only
$('#anytime-time-hours').AnyTime_picker({
format: '%l %p'
});
// Date and time
$('#anytime-both').AnyTime_picker({
format: '%M %D %H:%i',
});
// Custom display format
$('#anytime-weekday').AnyTime_picker({
format: '%W, %D of %M, %Z'
});
// Numeric date
$('#anytime-month-numeric').AnyTime_picker({
format: '%d/%m/%Z'
});
// Month and day
$('#anytime-month-day').AnyTime_picker({
format: '%D of %M'
});
// On demand picker
$('#ButtonCreationDemoButton').on('click', function (e) {
$('#ButtonCreationDemoInput').AnyTime_noPicker().AnyTime_picker().focus();
e.preventDefault();
});
//
// Date range
//
// Options
var oneDay = 24*60*60*1000;
var rangeDemoFormat = '%e-%b-%Y';
var rangeDemoConv = new AnyTime.Converter({format:rangeDemoFormat});
// Set today's date
$('#rangeDemoToday').on('click', function (e) {
$('#rangeDemoStart').val(rangeDemoConv.format(new Date())).trigger('change');
});
// Clear dates
$('#rangeDemoClear').on('click', function (e) {
$('#rangeDemoStart').val('').trigger('change');
});
// Start date
$('#rangeDemoStart').AnyTime_picker({
format: rangeDemoFormat
});
// On value change
$('#rangeDemoStart').on('change', function(e) {
try {
var fromDay = rangeDemoConv.parse($('#rangeDemoStart').val()).getTime();
var dayLater = new Date(fromDay+oneDay);
dayLater.setHours(0,0,0,0);
var ninetyDaysLater = new Date(fromDay+(90*oneDay));
ninetyDaysLater.setHours(23,59,59,999);
// End date
$('#rangeDemoFinish')
.AnyTime_noPicker()
.removeAttr('disabled')
.val(rangeDemoConv.format(dayLater))
.AnyTime_picker({
earliest: dayLater,
format: rangeDemoFormat,
latest: ninetyDaysLater
});
}
catch(e) {
// Disable End date field
$('#rangeDemoFinish').val('').attr('disabled', 'disabled');
}
});
};
//
// Return objects assigned to module
//
return {
init: function() {
_componentDaterange();
_componentPickadate();
_componentPickatime();
_componentAnytime();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DateTimePickers.init();
});