140 lines
3.2 KiB
JavaScript
140 lines
3.2 KiB
JavaScript
|
var CoreView = require('backbone/core-view');
|
||
|
|
var _ = require('underscore');
|
||
|
|
var moment = require('moment');
|
||
|
|
var $ = require('jquery');
|
||
|
|
require('builder/components/form-components/index');
|
||
|
|
require('datepicker');
|
||
|
|
var template = require('./date-picker.tpl');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Custom picer for a dates range.
|
||
|
|
*/
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
|
||
|
|
className: 'DatePicker',
|
||
|
|
|
||
|
|
options: {
|
||
|
|
flat: true,
|
||
|
|
date: '2008-07-31',
|
||
|
|
current: '2008-07-31',
|
||
|
|
calendars: 1,
|
||
|
|
starts: 1,
|
||
|
|
disable: 'future'
|
||
|
|
},
|
||
|
|
|
||
|
|
events: {
|
||
|
|
'click .js-dates': '_toggleCalendar'
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (opts) {
|
||
|
|
this.template = opts.template || template;
|
||
|
|
this._initBinds();
|
||
|
|
this._setDefaultDate();
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
this.clearSubViews();
|
||
|
|
|
||
|
|
this.$el.append(this.template({
|
||
|
|
readOnly: this.model.get('readOnly'),
|
||
|
|
date: this.options.date
|
||
|
|
}));
|
||
|
|
|
||
|
|
if (this.model.get('readOnly')) {
|
||
|
|
this.undelegateEvents();
|
||
|
|
}
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_initBinds: function () {
|
||
|
|
$(document).bind('click', this._onDocumentClick.bind(this));
|
||
|
|
},
|
||
|
|
|
||
|
|
_destroyBinds: function () {
|
||
|
|
$(document).unbind('click', this._onDocumentClick.bind(this));
|
||
|
|
},
|
||
|
|
|
||
|
|
_setDefaultDate: function () {
|
||
|
|
var utc = new Date().getTimezoneOffset();
|
||
|
|
var today = moment(new Date()).utcOffset(utc).format('YYYY-MM-DD');
|
||
|
|
this.options.date = this.model.get('value') && moment(this.model.get('value')).format('YYYY-MM-DD') || today;
|
||
|
|
this.options.current = this.options.date;
|
||
|
|
},
|
||
|
|
|
||
|
|
_$calendar: function () {
|
||
|
|
return this.$('.js-calendar');
|
||
|
|
},
|
||
|
|
|
||
|
|
_$dropdown: function () {
|
||
|
|
return this.$('.js-DatePicker-simpleDropdown');
|
||
|
|
},
|
||
|
|
|
||
|
|
_hideCalendar: function (ev) {
|
||
|
|
if (ev) {
|
||
|
|
this.killEvent(ev);
|
||
|
|
}
|
||
|
|
this.model.set('visible', false);
|
||
|
|
this._destroyCalendar();
|
||
|
|
this._$dropdown().hide();
|
||
|
|
},
|
||
|
|
|
||
|
|
_showCalendar: function () {
|
||
|
|
const disableTo = this.options.disable;
|
||
|
|
this.model.set('visible', true);
|
||
|
|
|
||
|
|
this._$calendar().DatePicker(
|
||
|
|
_.extend(this.options, this.model.attributes, {
|
||
|
|
onChange: function (formatted, date) {
|
||
|
|
this.model.set('value', formatted);
|
||
|
|
this.$('.js-date-str').text(formatted);
|
||
|
|
this._hideCalendar();
|
||
|
|
}.bind(this),
|
||
|
|
onRender: function (d) { // Disable future dates and dates
|
||
|
|
var date = d.valueOf();
|
||
|
|
var now = new Date();
|
||
|
|
return (
|
||
|
|
(date > now) && disableTo === 'future' ||
|
||
|
|
(date < now) && disableTo === 'past'
|
||
|
|
) ? { disabled: true } : '';
|
||
|
|
}
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
this._$dropdown().show();
|
||
|
|
},
|
||
|
|
|
||
|
|
_destroyCalendar: function () {
|
||
|
|
if (this.$('.DatePicker').length > 0) {
|
||
|
|
this._$calendar() && this._$calendar().DatePickerHide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_toggleCalendar: function (ev) {
|
||
|
|
if (ev) {
|
||
|
|
this.killEvent(ev);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.model.get('visible') ? this._hideCalendar() : this._showCalendar();
|
||
|
|
},
|
||
|
|
|
||
|
|
closeCalendar: function () {
|
||
|
|
this._hideCalendar();
|
||
|
|
},
|
||
|
|
|
||
|
|
_onDocumentClick: function (e) {
|
||
|
|
var $el = $(e.target);
|
||
|
|
|
||
|
|
if ($el.closest('.DatePicker').length === 0) {
|
||
|
|
this._hideCalendar();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
clean: function () {
|
||
|
|
this._destroyBinds();
|
||
|
|
this._hideCalendar();
|
||
|
|
CoreView.prototype.clean.call(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|