1、my97
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../plugins/my97datepicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
<script src="../plugins/moment/moment.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="text" name="" value="" onclick="WdatePicker({
<!--isShowWeek:true,--> <!--显示周-->
readOnly:true, <!--输入框禁止输入-->
<!--highLineWeekDay: true,--> <!--高亮周末-->
<!--isShowClear: false,--> <!--不显示清空按钮-->
<!--firstDayOfWeek: 1,--> <!--星期一作为第一天-->
<!--设定默认打开选中的日期-->
<!--startDate: '2019-10-23'-->
<!--startDate: '%y-%M-01',-->
<!--设定日期选择的格式-->
<!--dateFmt: 'yyyy年MM月dd日 HH时mm分ss秒',-->
<!--dateFmt: 'yyyy年MM月dd日',-->
<!--dateFmt: 'yyyy年MM月',-->
<!--dateFmt: 'yyyy年',-->
<!--日期限制范围-->
<!--minDate: '2019-10-13',-->
<!--maxDate: '2019-10-23',-->
<!--maxDate:'%y-%M-%d',--> <!--只能选择今天以前的日期(包括今天)-->
<!--minDate:'%y-%M-{%d+1}',--> <!--只能选择今天以后的日期(不包括今天)-->
});"/>
<!-- 一般会把vel指定为一个hidden控件,这里是为了把真实值展示出来,所以使用文本框 -->
<input id="d244" type="text" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>
<input id="d244_2" type="text" style="display: none;"/>
<!-- 前面的日期不能大于后面的日期, 并设置 onpicked 联动 -->
<input id="d4311" class="Wdate" type="text" onclick="WdatePicker({onpicked:function(){
d4312.click();
},maxDate:'#F{$dp.$D(\'d4312\')}'})"/>
<input id="d4312" class="Wdate" type="text" onclick="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}'})"/>
</body>
</html>
回显时问题
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required ">*</span> 开始时间:<i class="fa icon-question hide"></i></label>
<div class="col-sm-8">
<input id="startTime" name="startTime" value="<fmt:formatDate value="${bbShopActivity.startTime}" pattern="yyyy-MM-dd HH:mm:ss" />" class="Wdate form-control" type="text" onclick="WdatePicker({onpicked:function(){
endTime.click();
},maxDate:'#F{$dp.$D(\'endTime\')}',dateFmt: 'yyyy-MM-dd HH:mm:ss'})"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required ">*</span> 结束时间:<i class="fa icon-question hide"></i></label>
<div class="col-sm-8">
<input id="endTime" name="endTime" value="<fmt:formatDate value="${bbShopActivity.endTime}" pattern="yyyy-MM-dd HH:mm:ss" />" class="Wdate form-control" type="text" onclick="WdatePicker({minDate:'#F{$dp.$D(\'startTime\')}',dateFmt: 'yyyy-MM-dd HH:mm:ss'})"/>
</div>
</div>
</div>
</div>
2、daterangepicker
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../plugins/daterangepicker/daterangepicker.css"/>
<script src="../plugins/jquery/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../plugins/moment/moment.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../plugins/daterangepicker/daterangepicker.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="text" name="date" value=""/>
</body>
<script type="text/javascript">
$(function(){
$("input[name='date']").daterangepicker({
// timePicker: true, //显示时分秒
// timePicker24Hour: true, //24小时制
// timePickerIncrement: 10, //分钟选择列表的增量
autoApply: true, //会和timePicker冲突
locale: {
applyLabel: '确定',
cancelLabel: '清空',
fromLabel: '起始时间',
toLabel: '结束时间',
customRangeLabel: '手动选择',
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'
],
firstDay: 1
},
ranges: {
'今天': [moment(), moment()],
'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'上周': [moment().subtract(6, 'days'), moment()],
'上月': [moment().subtract(29, 'days'), moment()],
'本月': [moment().startOf('month'), moment().endOf('month')],
}
},function(start, end, label) {
console.log(start);
console.log(end);
console.log(start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
})
//清空按钮回调
$('input[name="date"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
</script>
</html>
3、moment.js