欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

bootstrap日期控件参数(bootstrap时间控件的用法)

程序员文章站 2023-12-06 08:43:28
1、使用方法:引入css文件:

1、使用方法:

引入css文件:

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

<link type=”text/css” href=”js/date/font-awesome.min.css” rel=”stylesheet”/>

<link type=”text/css” href=”js/date/daterangepicker-bs3.css” rel=”stylesheet”/>

引入js文件:

<script src=”js/jquery-1.10.2.min.js”></script>

<script src=”js/bootstrap/bootstrap.min.js”></script>

<script type=”text/javascript” src=”js/date/moment.js”></script> <!–本地化js文件–>

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

2、页面设置:

bootstrap日期控件参数(bootstrap时间控件的用法)

3、js文件配置:

bootstrap日期控件参数(bootstrap时间控件的用法)

4.效果展示:

bootstrap日期控件参数(bootstrap时间控件的用法)

5.其他参数:

`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) 本地设置

`singledatepicker`: (boolean) 是否是单个时间选择器

`parentel`: (string) 将控件放到哪个元素内,默认body

6.其他方法:

`show.daterangepicker`:日历控件显示时

`hide.daterangepicker`:日历控件隐藏时

`apply.daterangepicker`:确定按钮被点击时

例如:

$(‘#daterange’).on(‘apply.daterangepicker’,function(ev, picker) {

console.log(picker.startdate.format(‘yyyy-mm-dd’));

console.log(picker.enddate.format(‘yyyy-mm-dd’));

});

`cancel.daterangepicker`:取消按钮被点击时

`setoptions(object,function)`: 设置操作

`setstartdate(date/moment/string)`:设置起始时间

`setenddate(date/moment/string)`:设置结束时间