bootstrap datetimerange

时间：2022-03-06 14:57:57

天用的了bootstrap日期插件感觉搜索的资料不是很多在此写下一些使用的心得： 
插件开源地址：daterangepicker日期控件， 
插件使用只要按照开源中的文档信息来就好先包括以下引用：

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

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

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

<link rel="stylesheet" type="text/css" href="bootstrap.css" />

<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

包含对jquery，bootstrap框架的引用，以及日期处理用的moment.js,最后加载上这个插件的js和css文件 
然后和大部分jq插件一样，该插件也是对$.fn的扩展所以进行以下的操作来使用这个控件

<script type="text/javascript">

$(document).ready(function() {

  $('input[name="daterange"]').daterangepicker();

});

</script>

用jq获取到你要插入的那个元素然后运行daterangepicker函数就能使用它默认的样式和属性了， 
不过光有这个肯定是不行的，daterangepicker函数可以接受一个参数对象和一个回调函数，如下：

$('input[name="daterange"]').daterangepicker(

  {

    format: 'YYYY-MM-DD',

    startDate: '2013-01-01',

    endDate: '2013-12-31'

  },

  function(start, end, label) {

    alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));

  }

);

以下是插件中locale默认属性

{ 
applyLabel: ‘Apply’, 
cancelLabel: ‘Cancel’, 
fromLabel: ‘From’, 
toLabel: ‘To’, 
weekLabel: ‘W’, 
customRangeLabel: ‘Custom Range’, 
daysOfWeek: moment.weekdaysMin(), 
monthNames: moment.monthsShort(), 
firstDay: moment.localeData()._week.dow };

我们只有更改这些参数就能够使这个插件变成中文的插件

$('input[name=datetime]').daterangepicker({

        format: 'YYYY-MM-DD',

        startDate: '2013-01-01',

        endDate: new Date(),

        maxDate:new Date(),

        locale:{

            applyLabel: '确认',

            cancelLabel: '取消',

            fromLabel: '从',

            toLabel: '到',

            weekLabel: 'W',

            customRangeLabel: 'Custom Range',

            daysOfWeek:["日","一","二","三","四","五","六"],

            monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],

        }

    }, function (start, end, label) {

        alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));

    });

效果如下： 
bootstrap datetimerange
这样就有了一个中文的日期插件了，当然还有其他的参数可以使用包括添加自己的class用来敷写bootstrap的样式来实现自己想要的样式，也可以使用单选时间框函数来实现，具体的大家可以仔细查看官方的文档来构建自己需要的时间选取控件

相关文章