bootstrap日期控件参数(bootstrap时间控件的用法)
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、页面设置:
3、js文件配置:
4.效果展示:
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)`:设置结束时间
上一篇: C# List引用类型克隆的3种方法
下一篇: 阿里云邮箱注册(阿里云域名注册入口)
推荐阅读
-
asp.net mvc4中bootstrap datetimepicker控件的使用
-
bootstrap日期控件参数(bootstrap时间控件的用法)
-
详解bootstrap-fileinput文件上传控件的亲身实践
-
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
-
Android中日期与时间设置控件用法实例
-
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
-
asp.net mvc4中bootstrap datetimepicker控件的使用
-
基于bootstrap的文件上传控件bootstrap fileinput
-
bootstrap时间控件daterangepicker使用方法及各种小bug修复
-
Bootstrap日期控件之日期范围控制