在FastAdmin中的日期时间区间组件采用的是Bootstrap-daterangepicker插件
我们在使用只可以为文本框添加一个class为datetimerange的值即可自动添加日期时间区间选择框。
<input type="text" class="form-control datetimerange" placeholder="指定日期时间" />
<input type="text" class="form-control datetimerange" placeholder="指定日期时间" value="2021-03-30 00:00:00 - 2021-03-30 23:59:59" />
<input type="text" class="form-control datetimerange" data-locale='{"format":"YYYY-MM-DD"}' placeholder="指定日期" value="2021-03-30 - 2021-03-30" />同时我们还可以通过配置以下属性来自定义我们日期选择器的功能
| 属性 | 描述 | 示例 |
|---|---|---|
| data-locale | 日期格式相关配置 | {"format":"YYYY-MM-DD HH:mm:ss", "separator":" - "} |
| data-time-picker | 是否启用时间选择 | data-time-picker="true" |
| data-start-date | 开始日期 | data-date-min-date="2011-10-01" |
| data-end-date | 结束日期 | data-date-max-date="2046-10-01" |
| data-min-date | 最小可选择的日期 | data-date-use-current="true" |
| data-max-date | 最大可选择的日期 | data-date-default-date="2031-10-01" |
| date-show-dropdowns | 是否显示年月下拉 | date-show-dropdowns="true" |
| data-min-year | 最小的年 | data-min-year=2021 |
| data-max-year | 最大的年 | data-max-year=2046 |
如果你需要捕获元素值变更后的事件，可以通过以下方式来实现，如：
$("#c-createtime").on("blur", function(){
//回调事件
});更多的使用方法请参考Bootstrap-daterangepicker官方教程