js 给出一个漂亮的日期时间范围选择器
时间: 2024-05-03 12:19:04 浏览: 10
可以使用第三方库daterangepicker来实现一个漂亮的日期时间范围选择器。
首先,在HTML中引入必要的CSS和JS文件:
```html
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
```
然后,添加一个input元素用于选择日期范围:
```html
<input type="text" name="daterange" value="" />
```
最后,在JS中初始化daterangepicker,并设置一些参数,例如日期格式、语言、最大日期等:
```javascript
$(function() {
$('input[name="daterange"]').daterangepicker({
timePicker: true,
timePicker24Hour: true,
timePickerSeconds: true,
locale: {
format: 'YYYY-MM-DD HH:mm:ss',
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: '从',
toLabel: '到',
customRangeLabel: '自定义',
weekLabel: '周',
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: moment.localeData().firstDayOfWeek()
},
maxDate: moment().endOf('day')
});
});
```
这样就完成了一个漂亮的日期时间范围选择器。你可以通过CSS样式文件来自定义daterangepicker的样式。