first commit
This commit is contained in:
@@ -0,0 +1,298 @@
|
||||
import './two-datepicker.css';
|
||||
|
||||
import { Ut } from "../../utils/Ut";
|
||||
import { El } from "../../utils/dom";
|
||||
import { Cancelable } from '../cancelable';
|
||||
import { DatePicker } from '../date-picker';
|
||||
import { Stack } from '../../core/Stack';
|
||||
|
||||
export class TwoDatePicker {
|
||||
|
||||
/**
|
||||
* TwoDatePicker Constructor
|
||||
*/
|
||||
constructor(target, opts, events) {
|
||||
|
||||
this.target = target;
|
||||
|
||||
if (this.target.dxData('two_datepicker')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.target.dxData('two_datepicker', this);
|
||||
|
||||
this.opts = { ... {
|
||||
style : 'normal',
|
||||
disabled : false,
|
||||
fullMonth : true,
|
||||
navDisabled : false,
|
||||
anim : true,
|
||||
locales : 'ro-RO',
|
||||
cancelable : true,
|
||||
hiddenMode : false
|
||||
}, ... opts };
|
||||
|
||||
this.events = events || {};
|
||||
|
||||
this.isDisabled = this.opts.disabled;
|
||||
|
||||
if (this.target.tagName.toLowerCase() == 'input') {
|
||||
|
||||
this.isInput = true;
|
||||
|
||||
if (this.target.type == 'text') {
|
||||
this.isToggled = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.create();
|
||||
|
||||
Stack.add(this);
|
||||
|
||||
this.setEvents();
|
||||
|
||||
this.restoreValue(this.target.dxVal());
|
||||
}
|
||||
|
||||
/**
|
||||
* TwoDatePicker, Create UI
|
||||
*/
|
||||
create() {
|
||||
|
||||
const that = this;
|
||||
|
||||
this.ui = El('div', { class: 'sp-two-datepicker' });
|
||||
|
||||
let firstCol = El('div', { class: 'ui-col' });
|
||||
let secondCol = El('div', { class: 'ui-col' });
|
||||
|
||||
this.ui.append(firstCol);
|
||||
this.ui.append(secondCol);
|
||||
|
||||
let dpOpts = {
|
||||
style : this.opts.style,
|
||||
disabled : this.opts.disabled,
|
||||
fullMonth : this.opts.fullMonth,
|
||||
navDisabled : this.opts.navDisabled,
|
||||
locales : this.opts.locales
|
||||
};
|
||||
|
||||
this.datepicker = [];
|
||||
|
||||
new DatePicker(firstCol, dpOpts, {
|
||||
init: datepicker => that.datepicker[0] = datepicker,
|
||||
onSelect: (_, date) => Ut.trigger(that.events.onChange, that, date, 0)
|
||||
});
|
||||
|
||||
new DatePicker(secondCol, dpOpts, {
|
||||
init: datepicker => that.datepicker[1] = datepicker,
|
||||
onSelect: (_, date) => Ut.trigger(that.events.onChange, that, date, 1)
|
||||
});
|
||||
|
||||
if (this.isInput) {
|
||||
|
||||
if (this.isToggled) {
|
||||
|
||||
this.ui.classList.add('toggled', 'hidden');
|
||||
|
||||
if (this.opts.cancelable && !this.target.dxData('cancelable') ) {
|
||||
new Cancelable(this.target);
|
||||
}
|
||||
|
||||
document.body.append(this.ui);
|
||||
}
|
||||
else {
|
||||
this.target.after(this.ui);
|
||||
}
|
||||
|
||||
this.target.setAttribute('autocomplete', 'off');
|
||||
}
|
||||
else {
|
||||
this.target.append(this.ui);
|
||||
}
|
||||
|
||||
Ut.trigger(this.events.init, this);
|
||||
}
|
||||
|
||||
/**
|
||||
* TwoDatePicker, Show UI
|
||||
*/
|
||||
show() {
|
||||
|
||||
this.ui.classList.remove('hidden');
|
||||
|
||||
if (this.opts.anim) {
|
||||
this.ui.classList.add('visible');
|
||||
}
|
||||
|
||||
this.setPosition();
|
||||
|
||||
this.isOpen = true;
|
||||
|
||||
Ut.trigger(this.events.onShow, this);
|
||||
}
|
||||
|
||||
/**
|
||||
* TwoDatePicker, Hide UI
|
||||
*/
|
||||
hide() {
|
||||
|
||||
if (this.isOpen) {
|
||||
|
||||
this.ui.classList.add('hidden');
|
||||
|
||||
if (this.opts.anim) {
|
||||
this.ui.classList.remove('visible');
|
||||
}
|
||||
|
||||
this.isOpen = false;
|
||||
|
||||
Ut.trigger(this.events.onHide, this);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TwoDatePicker, Set UI Posituion
|
||||
*/
|
||||
setPosition() {
|
||||
|
||||
let left = Math.round(this.target.dxOffset().left);
|
||||
|
||||
if ((this.ui.clientWidth + left) > window.innerWidth) {
|
||||
left = 0;
|
||||
}
|
||||
|
||||
this.ui.dxCss({
|
||||
top : (Math.round(this.target.dxOffset().top) + this.target.clientHeight + 2) + 'px',
|
||||
left : left + 'px',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* TwoDatePicker, Clear Val
|
||||
*/
|
||||
clear() {
|
||||
|
||||
if (this.isToggled) {
|
||||
|
||||
if (this.opts.cancelable) {
|
||||
this.target.dxData('cancelable').iconHandler.classList.add('hide');
|
||||
}
|
||||
|
||||
this.hide();
|
||||
}
|
||||
|
||||
if (this.isInput) {
|
||||
this.target.dxVal('');
|
||||
}
|
||||
|
||||
this.datepicker[0].clear();
|
||||
this.datepicker[1].clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* TwoDatePicker, Restore Selected Val
|
||||
*/
|
||||
restoreValue(dates) {
|
||||
|
||||
if (!dates || !dates.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [ fromDate, toDate ] = dates;
|
||||
|
||||
if (fromDate.getTime() <= toDate.getTime()) {
|
||||
this.datepicker[0].restoreValue(fromDate);
|
||||
this.datepicker[1].restoreValue(toDate);
|
||||
this.datepicker[1].setDateRange({ minDate: fromDate });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TwoDatePicker, Set Events
|
||||
*/
|
||||
setEvents() {
|
||||
|
||||
let that = this;
|
||||
|
||||
// Restore Selected - Handler
|
||||
|
||||
if (this.isInput) {
|
||||
this.target.dxOn('keydown.two_datepicker paste.two_datepicker', e => e.preventDefault());
|
||||
//this.target.dxOn('restore.two_datepicker', (_, t) => this.restoreValue(t.value));
|
||||
}
|
||||
|
||||
if (this.isToggled) {
|
||||
|
||||
// Click on UI - fixed Handler
|
||||
|
||||
this.ui.dxOn('click', e => e.stopPropagation());
|
||||
|
||||
this.target.dxOn('click.two_datepicker', e => {
|
||||
|
||||
e.stopPropagation();
|
||||
|
||||
if (!that.opts.hiddenMode) {
|
||||
that.show();
|
||||
}
|
||||
});
|
||||
|
||||
// Clear Icon Handler
|
||||
|
||||
if (this.opts.cancelable) {
|
||||
|
||||
this.target.dxOn('clear', function(e) {
|
||||
|
||||
that.clear();
|
||||
|
||||
Ut.trigger(that.events.onChange, that, null, false);
|
||||
|
||||
that.target.dxTrigger('changed');
|
||||
});
|
||||
}
|
||||
|
||||
// Click outside - Handler
|
||||
|
||||
document.body.dxOn('click.two_datepicker' + this.ekey, _ => this.hide());
|
||||
|
||||
let tm = null;
|
||||
|
||||
// Resize window Handler
|
||||
|
||||
window.dxOn('resize.two_datepicker' + this.ekey + ' orientationchange.two_datepicker' + this.ekey, _ => {
|
||||
|
||||
if (tm) {
|
||||
clearTimeout(tm);
|
||||
tm = null;
|
||||
}
|
||||
|
||||
tm = setTimeout(_ => that.setPosition(), 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TwoDatePicker, Destroy Widget
|
||||
*/
|
||||
destroy() {
|
||||
|
||||
this.datepicker[0].destroy();
|
||||
this.datepicker[1].destroy();
|
||||
|
||||
this.ui.remove();
|
||||
|
||||
if (this.isToggled) {
|
||||
|
||||
this.target.dxOff('click.two_datepicker keydown.two_datepicker paste.two_datepicker restore.two_datepicker');
|
||||
|
||||
document.body.dxOff('click.two_datepicker' + this.ekey);
|
||||
window.dxOff('resize.two_datepicker' + this.ekey + ' orientationchange.two_datepicker' + this.ekey);
|
||||
}
|
||||
|
||||
this.target.dxRemoveData('two_datepicker');
|
||||
|
||||
Stack.delete(this);
|
||||
}
|
||||
}
|
||||
|
||||
//Ut.extendNodeUx(TwoDatePicker);
|
||||
Reference in New Issue
Block a user