bootstrap datarangepicker如何使用

本文为博主原创,未经允许不得转载:

下载资源文件:

地址:Githubhttps://github.com/dangrossman/bootstrap-daterangepicker/

1.页面引用静态文件:
<link href="assets/plugins/bootstrap-daterangepicker/css/daterangepicker.css" type="text/css" rel="stylesheet"/>
<script  src="assets/plugins/bootstrap-daterangepicker/js/moment.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-daterangepicker/js/daterangepicker.js" type="text/javascript"></script>

2.绑定元素:

    <div style="padding-top: 15px;" id = 'demo'>
           <input id="datePickerSelect" readonly="" value="" placeholder="自定义" class="form-control ant-calendar-picker-input ant-input" />
           <span class="ant-calendar-picker-icon" style="margin-top: 0;"></span>
    </div>

3.引用插件方法:

$(document).ready(function() {
               updateConfig();
               function updateConfig() {
                   //按日范围进行查询
               $('#datePickerSelect').daterangepicker({
                   "startDate": "12/01/2017",
                   "endDate": "12/07/2018",
                    format: 'YYYY-MM-DD'
               }, function(start, end, label) {
                   console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
                   var customDayCondition= start.format('YYYY-MM-DD')+"+"+ end.format('YYYY-MM-DD');
                   //此处可定义回调方法
               });

4.参数设置:

`startDate`: (Date object, moment object or string) 起始时间

`endDate`: (Date object, moment object or string) 结束时间

`minDate`: (Date object, moment object or string) 可选最早时间

`maxDate`: (Date object, moment object or string) 可选最迟时间

`timePicker`: (boolean) 是否显示time选择

`timePickerIncrement`: (number) time选择递增数

`timePicker12Hour`: (boolean) 是否12小时制

`opens`: (string: 'left'/'right') 显示在元素左边还是右边

`buttonClasses`: (array) 按钮样式

`applyClass`: (string) 应用按钮样式

`cancelClass`: (string) 取消按钮样式

`format`: (string) date/time格式

`separator`: (string) 分隔符

`locale`: (object) 本地设置

此处需要注意的是,该时间格式的属性,只能格式到年月日时分秒和年月日两种。

5.效果图:

posted @ 2017-12-12 09:08  香吧香  阅读(1285)  评论(0编辑  收藏  举报