引入相应的date插件
<script type="text/javascript" src="../plugins/daterangepicker/moment.min.js"></script> 日期范围插件 <script type="text/javascript" src="../plugins/daterangepicker/jquery.daterangepicker.js"></script> 日期范围插件 <link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css" type="text/css" /> <script type="text/javascript" src="<c:url value="/js/My97DatePicker/WdatePicker.js"/>"></script> 单日历插件
在html中引入 input作为日期选择 多个双日历
<input type="text" name="time1" id="DateSearch" class="rangeA" style=" 180px; border: 1px solid #A9A9A9;" /> <input type="text" name="time2" id="DateSearch" class="rangeA" style=" 180px; border: 1px solid #A9A9A9;" />
单日历 my97
<input name="date" type="text" onfocus="selectDate()" />
对应的js控制
//单日历控制 function selectDate() { WdatePicker({ dateFmt: 'yyyy-MM-dd', isShowToday: false, isShowClear: false}); } //双日历需分开单独初始化 var dateFormatjson = { startOfWeek: 'monday', separator : ' -- ', format: 'YYYY-MM-DD', autoClose: true, language:'en', time: {enabled: true} }; $('#DateSearch').dateRangePicker(dateFormatjson); $('#DateSearch').dateRangePicker(dateFormatjson);
http://www.daterangepicker.com/#options 双日历详细设置详见改地址
https://blog.csdn.net/u011109420/article/details/51330608 单日历参数设置,语言切换等;