閃光的指压师 阅读:166次 时间:2025-01-14 17:50:08今天做项目遇到了这个插件,感觉很不错,下面就为大家带来一篇日期时间范围选择插件:daterangepicker使用总结(必看篇),我觉得挺不错的,现在就分享给大家,也给大家做个参考,一起跟我过来看看吧,希望能帮助大家,以下内容是由微蓝经验网用户发布日期控件daterangepicker在fastadmin的使用方法,你真的看懂了吗?希望对于用户有一定帮助,为朋友进行解决疑惑,如若想了解更多相关内容,可以向底部移动了解更多与本教程文章相关解决经验方法!

daterangepicker;fastadmin
我是新建的页面,在统计里面用到的,fastadmin自带的,由于不知道怎么用查了手册,
Date Range Picker 中文网

新建的页面加入代码:

html代码调用js方法:getdaterangepicker。

js部分定义该方法:
function getdaterangepicker(form) {
//绑定日期时间元素事件
if ($(",datetimerange", form),size() > 0) {
require(['bootstrap-daterangepicker'], function () {
var ranges = {};
ranges[__('Today')] = [Moment(),startOf('day'), Moment(),endOf('day')];
ranges[__('Yesterday')] = [Moment(),subtract(1, 'days'),startOf('day'), Moment(),subtract(1, 'days'),endOf('day')];
ranges[__('Last 7 Days')] = [Moment(),subtract(6, 'days'),startOf('day'), Moment(),endOf('day')];
ranges[__('Last 30 Days')] = [Moment(),subtract(29, 'days'),startOf('day'), Moment(),endOf('day')];
ranges[__('This Month')] = [Moment(),startOf('month'), Moment(),endOf('month')];
ranges[__('Last Month')] = [Moment(),subtract(1, 'month'),startOf('month'), Moment(),subtract(1, 'month'),endOf('month')];
var options = {
timePicker: false,
autoUpdateInput: false,
timePickerSeconds: true,
timePicker24Hour: true,
autoApply: true,
locale: {
format: 'YYYY-MM-DD HH:mm:ss',
customRangeLabel: __("Custom Range"),
applyLabel: __("Apply"),
cancelLabel: __("Clear"),
},
ranges: ranges,
};
var origincallback = function (start, end) {
$(this,element),val(start,format(this,locale,format) + " - " + end,format(this,locale,format));
$(this,element),trigger('blur');
};
$(",datetimerange", form),each(function () {
var callback = typeof $(this),data('callback') == 'function' ? $(this),data('callback') : origincallback;
$(this),on('apply,daterangepicker', function (ev, picker) {
callback,call(picker, picker,startDate, picker,endDate);
});
$(this),on('cancel,daterangepicker', function (ev, picker) {
$(this),val(''),trigger('blur');
});
$(this),daterangepicker($,extend(true, options, $(this),data()), callback);
});
});
}
}

页面效果:

官方文档的调用方法
首先,在您的网页中包含jQuery,Moment,js和Date Range Picker的文件:

然后将日期范围选择器附加到您想要触发它的任何内容:
$('input[name="dates"]'),daterangepicker();

声明 未经许可,请勿转载。
© 2025 VLPOS.com 版权所有 微蓝网 ICP备案号:黑ICP备20003952号-1