前端引用日期范围插件daterangepicker

最新推荐文章于 2024-05-17 09:45:08 发布

万里飞鹏

最新推荐文章于 2024-05-17 09:45:08 发布

阅读量1.1k

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/zhangtongpeng/article/details/121422038

版权

<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
       <script type="text/javascript" src="js/moment.min.js"></script>
       <link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
       <link href="css/daterangepicker.css" type="text/css" rel="stylesheet" />
           <script type="text/javascript" src="js/bootstrap.js"></script>

       <script type="text/javascript" src="js/daterangepicker.js"></script>

       <style type="text/css">
       body,
       ul,
       p,
       h3,
       img,
       input {
       margin: 0;
       padding: 0;
       }

       .box {
       display: block;
       text-align: center;
       margin: 20px auto;
       }

       input {
       width: 400px;
       height: 40px;
       }

       label {
       display: inline-block;
       width: 90px;
       line-height: 40px;
       height: 40px;
       margin: 0;
       font-weight: normal;
       font-family: "宋体";
       background-color: #ddd;
       }
       .divDateSelect{
       width: 185px;
       height: 50px;
       line-height: 50px;
       margin:10px auto;
       border:2px solid #ddd;
       border-radius: 5px;
       }
       </style>

   </head>

   <body>
<div class="box">
<label for="datePicker">双日历</label>
<input type="text" name="datePicker" class="datePicker" id="datePicker">
</div>
   </body>
<script type="text/javascript">

       $('input[name="datePicker"]').daterangepicker({
           timePicker: false, //显示时间
           timePicker24Hour: true, //时间制
           timePickerSeconds: false, //时间显示到秒
           startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
           endDate: moment(new Date()), //设置结束器日期
           maxDate: moment(new Date()), //设置最大日期
           "opens": "center",
           ranges: {
           // '今天': [moment(), moment()],
           '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           '上周': [moment().subtract(6, 'days'), moment()],
           '前30天': [moment().subtract(29, 'days'), moment()],
           '本月': [moment().startOf('month'), moment().endOf('month')],
           '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
           },
           showWeekNumbers: true,
           locale: {
           format: "YYYY-MM-DD", //设置显示格式
           applyLabel: '确定', //确定按钮文本
           cancelLabel: '取消', //取消按钮文本
           customRangeLabel: '自定义',
           daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
           monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
           '七月', '八月', '九月', '十月', '十一月', '十二月'
           ],
           firstDay: 1
           },
           }, function(start, end, label) {
           timeRangeChange = [start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD')];
           console.log(timeRangeChange);
           });
           </script>
</html>

万里飞鹏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端引用日期范围插件daterangepicker

<html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/moment.min.js"...
复制链接

扫一扫