双日历时间段选择插件 发表于 2020-03-04 | 大家还是喜欢复制粘贴就可以上手的例子. 废话不说, 上例子 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384<!-- 使用daterangepicker 插件 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><!-- 需要引用的依赖库 --><script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script><script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /><!-- 引用 daterangepicker 相关文件--><script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /><body><div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" >起始时间</span> </div> <input type="text" autofocus id='schedule' name='schedule' class="form-control" placeholder="年月日 时分" required></div><script> $(function() { let start = moment().startOf('hour') let end = moment().add(1, 'days').startOf('hour') $('input[name="schedule"]').daterangepicker({ timePicker: true, startDate: start, endDate: end, minDate: start, // autoApply: true, timePickerIncrement: 10, locale: { language: 'zh-CN', format: 'YYYY/MM/DD hh:mm A', firstDay: 1, direction: 'ltr', daysOfWeek: [ "周日", "周一", "周二", "周三", "周四", "周五", "周六" ], monthNames: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ], separator: ' ~ ', applyLabel: '应用', cancelLabel: '取消', fromLabel: 'From', toLabel: 'To', customRangeLabel: 'Custom', // format: 'LLL' } }) })</script></body></html> 最后的效果是这样的