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