var dateRangeInputBinding = new Shiny.InputBinding(); $.extend(dateRangeInputBinding, { _newDate: function(date) { if (date instanceof Date) return date; var d = Date.parse(date); if (isNaN(d)) return null; return new Date(d); }, _setMin: function(el, date) { var $el = $(el); var $mainInput = $el.closest('.input-daterange').eq(0); var autonext = false; if ($mainInput.data('autonext') == true) { $mainInput.data('autonext', false); autonext = true; } if (date == null) { $el.bsDatepicker('setStartDate', null); $mainInput.data('autonext', autonext); return; } var parsedDate = this._newDate(date); if (parsedDate === null) { $mainInput.data('autonext', autonext); return; } var curValue = $(el).bsDatepicker('getUTCDate'); $el.bsDatepicker('setStartDate', this._utcDateAsLocal(parsedDate)); if (parsedDate && curValue && parsedDate.getTime() > curValue.getTime()) { $el.bsDatepicker('clearDates'); } else { $el.bsDatepicker('setUTCDate', curValue); } $mainInput.data('autonext', autonext); }, _setMax: function(el, date) { var $el = $(el); var $mainInput = $el.closest('.input-daterange').eq(0); var autonext = false; if ($mainInput.data('autonext') == true) { $mainInput.data('autonext', false); autonext = true; } if (date == null) { $el.bsDatepicker('setEndDate', null); $mainInput.data('autonext', autonext); return; } var parsedDate = this._newDate(date); if (parsedDate === null) { $mainInput.data('autonext', autonext); return; } var curValue = $el.bsDatepicker('getUTCDate'); $el.bsDatepicker('setEndDate', this._utcDateAsLocal(parsedDate)); if (parsedDate && curValue && parsedDate.getTime() < curValue.getTime()) { $el.bsDatepicker('clearDates'); } else { $el.bsDatepicker('setUTCDate', curValue); } $mainInput.data('autonext', autonext); }, _dateAsUTC: function(date) { return new Date(date.getTime() - date.getTimezoneOffset() * 6e4); }, _utcDateAsLocal: function(date) { return new Date(date.getTime() + date.getTimezoneOffset() * 6e4); }, _padZeros: function(n, digits) { var str = n.toString(); while (str.length < digits) { str = "0" + str; } return str; }, _formatDateUTC: function(date) { if (date instanceof Date) { return date.getUTCFullYear() + "-" + this._padZeros(date.getUTCMonth() + 1, 2) + "-" + this._padZeros(date.getUTCDate(), 2); } else { return null; } }, find: function(scope) { return $(scope).find('.shiny-dateRange-input'); }, getId: function(el) { return $(el).attr('id'); }, getValue: function(el) { var $inputs = $(el).find('input'); var start = $inputs.eq(0).bsDatepicker('getUTCDate'); var end = $inputs.eq(1).bsDatepicker('getUTCDate'); return { start: this._formatDateUTC(start), end: this._formatDateUTC(end) }; }, setValue: function(el, value) { if (!(value instanceof Object)) { return; } var $el = $(el); var $mainInput = $el.find('.input-daterange').eq(0); var autonext = false; if ($mainInput.data('autonext') == true) { $mainInput.data('autonext', false); autonext = true; } var $inputs = $el.find('input'); if (value.start !== void 0) { if (value.start === null || value.start.length == 0) { $inputs.eq(0).val('').bsDatepicker('clearDates'); } else { var start = this._newDate(value.start); $inputs.eq(0).bsDatepicker('setUTCDate', start); } } if (value.end !== void 0) { if (value.end === null || value.end.length == 0) { $inputs.eq(1).val('').bsDatepicker('clearDates'); } else { var end = this._newDate(value.end); $inputs.eq(1).bsDatepicker('setUTCDate', end); } } $mainInput.data('autonext', autonext); }, subscribe: function(el, callback) { $(el).on('change', function(event) { callback(); }); }, unsubscribe: function(el) { $(el).off('change'); }, getState: function(el) { return { value: this.getValue(el) }; }, receiveMessage: function(el, data) { var $el = $(el); var $inputs = $el.find('input'); var $startinput = $inputs.eq(0); var $endinput = $inputs.eq(1); if (data.hasOwnProperty('label')) { $(el).find('label[for="' + el.id + 'Text"]').text(data.label); } if (data.hasOwnProperty('min')) { this._setMin($startinput[0], data.min); this._setMin($endinput[0], data.min); } if (data.hasOwnProperty('max')) { this._setMax($startinput[0], data.max); this._setMax($endinput[0], data.max); } if (data.hasOwnProperty('value')) { this.setValue(el, data.value); } // if (data.hasOwnProperty('disabled')) { // } $(el).trigger('change'); }, initialize: function initialize(el) { var $el = $(el); var $mainInput = $el.find('.input-daterange').eq(0); var $inputs = $el.find('input'); var $startinput = $inputs.eq(0); var $endinput = $inputs.eq(1); var start = $mainInput.data('initial-start-date'); var end = $mainInput.data('initial-end-date'); $el.find('.input-daterange').eq(0).bsDatepicker(); this.setValue(el, { start: start, end: end }); this._setMin($startinput[0], $mainInput.data('min-date')); this._setMin($endinput[0], $mainInput.data('min-date')); this._setMax($startinput[0], $mainInput.data('max-date')); this._setMax($endinput[0], $mainInput.data('max-date')); $startinput.on('focus', function(event) { $(this).select(); }); $endinput.on('focus', function(event) { $(this).select(); }); $startinput.bsDatepicker().on('changeDate', function(event) { if ($mainInput.data('autonext') == true && $startinput.bsDatepicker('getUTCDate')) { $startinput.bsDatepicker('hide'); $endinput.focus(); $endinput.select(); $endinput.bsDatepicker('show'); } $el.trigger('change'); }) $endinput.bsDatepicker().on('changeDate', function(event) { $el.trigger('change'); }) } }); Shiny.inputBindings.register(dateRangeInputBinding, 'shinyExtra.dateRangeInputBinding');