bootstrap-datepicker 时间范围选择函数封装
bootstrap-datepicker 时间范围选择函数封装
官网
https://bootstrap-datepicker.readthedocs.io/en/latest/index.html
需要引入的依赖包,发现还挺多的
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.zh-CN.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css">
封装的函数
/* * name:时间范围控件 * start:起始时间表单id值 * end:结束时间表单id值 * */ function dataTimeRange(start,end){//日期范围 $('#'+start).datepicker({ todayBtn : "linked", autoclose : true, todayHighlight : true, endDate : new Date(), format:'yyyy-mm-dd', language:'zh-CN' }).on('changeDate',function(e){ var startTime = e.date; $('#'+end).datepicker('setStartDate',startTime); }); //结束时间 $('#'+end).datepicker({ todayBtn : "linked", autoclose : true, todayHighlight : true, endDate : new Date(), format:'yyyy-mm-dd', language:'zh-CN' }).on('changeDate',function(e){ var endTime = e.date; $('#'+start).datepicker('setEndDate',endTime); }); }
愿你走出半生,归来仍是少年