@ezuikit/control-date-picker
Version:
date picker
233 lines (228 loc) • 9.4 kB
JavaScript
/*
* @ezuikit/control-date-picker v0.0.1-alpha.1
* Copyright (c) 2025-10-08 Ezviz-OpenBiz
* Released under the MIT License.
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _async_to_generator(fn) {
return function() {
var self = this, args = arguments;
return new Promise(function(resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
class AppendJS {
static loadScript(src) {
return _async_to_generator(function*() {
return yield new Promise((resolve, reject)=>{
if (AppendJS.LoadedScr.includes(src)) {
return resolve(src);
}
if (AppendJS.LoadingScrQueue[src]) {
return AppendJS.LoadingScrQueue[src].push(resolve);
} else {
AppendJS.LoadingScrQueue[src] = [
resolve
];
}
let link;
if (src.includes('.js')) {
link = document.createElement('script');
link.src = src;
link.async = true;
} else if (src.includes('.css')) {
link = document.createElement('link');
link.rel = 'stylesheet';
link.href = src;
}
link.onload = ()=>{
AppendJS.LoadedScr.push(src);
AppendJS.LoadingScrQueue[src].forEach((resolve)=>resolve(src));
AppendJS.LoadingScrQueue[src] = [];
};
link.onerror = ()=>reject(new Error('Failed to load ' + src));
document.head.appendChild(link);
});
})();
}
static loadScriptsBatch(srcArr) {
return _async_to_generator(function*() {
return yield Promise.all(srcArr.map(AppendJS.loadScript));
})();
}
static remove(src) {
src.forEach((item)=>{
const link = document.querySelector(`script[src="${item}"]`) || document.querySelector(`link[href="${item}"]`);
if (link) {
link.remove();
}
});
}
static clear() {
AppendJS.remove(AppendJS.LoadedScr);
}
}
/** 已经加载完的js/css */ AppendJS.LoadedScr = [];
/** 正在加载的js/css */ AppendJS.LoadingScrQueue = {};
const DEFAULT_OPTIONS = {
staticPath: '.',
place: 'top-right',
language: 'zh-CN',
current: new Date(),
maxDate: new Date()
};
/**
* 日期选择器
*/ class DatePicker {
_init() {
// 因为挂载在行内，需要父标签设置 position: relative;
this.$container.style.cssText += `;position: relative;`;
this.$container.classList.add(`datepicker-inline-${this.options.place}`);
AppendJS.loadScriptsBatch([
`${this.options.staticPath}/rec/jquery.min.js`,
`${this.options.staticPath}/rec/datepicker.min.css`
]).then(()=>{
AppendJS.loadScriptsBatch([
`${this.options.staticPath}/rec/datepicker.js`
]).then(()=>{
AppendJS.loadScriptsBatch([
`${this.options.staticPath}/rec/datepicker.zh-CN.js`,
`${this.options.staticPath}/rec/datepicker.en-US.js`
]).then(()=>{
window.$(this.$container).datepicker({
date: this.options.current,
language: this.options.language,
endDate: this.options.maxDate,
inline: true
});
this.hide();
window.$(this.$container).on('pick.datepicker', (e)=>{
var _this__date, _this__date1, _this__date2, _this__date3, _this__date4, _this__date5;
if (e.view === 'year' && ((_this__date = this._date) == null ? void 0 : _this__date.getFullYear()) !== e.date.getFullYear()) {
this.options.onYearChange == null ? void 0 : this.options.onYearChange.call(this.options, e.date);
} else if (e.view === 'month' && (((_this__date1 = this._date) == null ? void 0 : _this__date1.getMonth()) !== e.date.getMonth() || ((_this__date2 = this._date) == null ? void 0 : _this__date2.getFullYear()) !== e.date.getFullYear())) {
this.options.onMonthChange == null ? void 0 : this.options.onMonthChange.call(this.options, e.date);
} else if ([
'day',
'pick'
].includes(e.view || e.type) && (((_this__date3 = this._date) == null ? void 0 : _this__date3.getDate()) !== e.date.getDate() || ((_this__date4 = this._date) == null ? void 0 : _this__date4.getMonth()) !== e.date.getMonth() || ((_this__date5 = this._date) == null ? void 0 : _this__date5.getFullYear()) !== e.date.getFullYear())) {
if (this._change) {
this.options.onChange == null ? void 0 : this.options.onChange.call(this.options, e.date);
}
this._date = new Date(e.date.getTime());
}
if (e.view === 'day') this.hide();
this._change = true;
});
});
});
});
}
/**
* 获取日期
*/ get date() {
return this._date;
}
/**
* 设置日期, change = true 时触发 onChange 事件
*
* @param date 设置的日期
* @param change 是否触发 onChange 事件
*/ setDate(date, change = true) {
const $datepicker = this.$container.querySelector(`.datepicker-inline`);
if ($datepicker) {
this._change = change;
window.$(this.$container).datepicker('setDate', date);
}
}
/**
* 隐藏面板, 会触发 onPanelChange 事件
*/ hide() {
const $datepicker = this.$container.querySelector(`.datepicker-inline`);
if ($datepicker) {
if (this._open) {
this._open = false;
this.options.onPanelChange == null ? void 0 : this.options.onPanelChange.call(this.options, false, this._date);
}
$datepicker.classList.add('datepicker-hide');
}
}
/**
* 显示面板, 会触发 onPanelChange 事件
*/ show() {
const $datepicker = this.$container.querySelector(`.datepicker-inline`);
if ($datepicker) {
var _window_$_datepicker, _window_$;
if (!this._open) {
this._open = true;
this.options.onPanelChange == null ? void 0 : this.options.onPanelChange.call(this.options, true, this._date);
}
if (this._date) this.setDate(this._date, false);
(_window_$_datepicker = (_window_$ = window.$(this.$container)).datepicker) == null ? void 0 : _window_$_datepicker.call(_window_$, 'showView');
if (this.options.place === 'bottom-left') {
$datepicker.style.cssText += `top: ${this.$container.clientHeight + 10}px; bottom: auto; right: auto; left: 0px`;
} else {
$datepicker.style.cssText += `bottom: ${this.$container.clientHeight + 10}px; top: auto`;
}
$datepicker.classList.remove('datepicker-hide');
}
}
/**
* 销毁
*/ destroy() {
this.hide();
this._date = undefined;
window.$(this.$container).datepicker('destroy');
// AppendJS.remove([
// `${this.options.staticPath}/rec/jquery.min.js`,
// `${this.options.staticPath}/rec/datepicker.min.css`,
// `${this.options.staticPath}/rec/datepicker.js`,
// `${this.options.staticPath}/rec/datepicker.zh-CN.js`,
// `${this.options.staticPath}/rec/datepicker.en-US.js`,
// ]);
}
constructor(container, options){
this._open = false;
this._change = true;
this.$container = container;
this.options = Object.assign({}, DEFAULT_OPTIONS, options);
this.options.staticPath = (this.options.staticPath || '').replace(/\/$/, '');
if (this.options.current) {
this._date = this.options.current;
}
this._init();
this.$container.addEventListener('click', ()=>{
if (this._open) this.hide();
else this.show();
});
document.body.addEventListener('click', (e)=>{
if (!this.$container.contains(e.target)) {
this.hide();
}
});
}
}
exports.default = DatePicker;