Bootstrap-daterangepicker(时间范围选择器使用及汉化)
2017-01-12 20:33
816 查看
首先需要引用如下Js文件且顺序不得有误,否则会报诸如$().moment()is not a function的错误,这是JS文件加载顺序导致的
引用的JS文件:
然后是js代码,插件原本是英文的,这里我做了一些汉化,修改一下插件的locale参数就可以了,如果想使用英文的话,直接使用插件默认的参数就可以了,汉化的方法具体如下。
汉化之后的插件的显示效果如下:
完整的使用案例点击这里下载。
引用的JS文件:
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>/*bootstrap*/ <script type="text/javascript" src="moment.js" ></script> <script type="text/javascript" src="daterangepicker.js" ></script>下面是HTML结构
<body> <div class="box"> <input type="text" id="demo" style="width: 300px;"/> </div> </body>
然后是js代码,插件原本是英文的,这里我做了一些汉化,修改一下插件的locale参数就可以了,如果想使用英文的话,直接使用插件默认的参数就可以了,汉化的方法具体如下。
var locale = { "format": 'YYYY-MM-DD', "separator": " - ",// "applyLabel": "确定", "cancelLabel": "取消", "fromLabel": "起始时间", "toLabel": "结束时间'", "customRangeLabel": "自定义", "weekLabel": "W", "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"], "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], "firstDay": 1 }; $('#demo').daterangepicker({ "locale": locale, "ranges" : { '最近1小时': [moment().subtract('hours',1), moment()], '今日': [moment().startOf('day'), moment()], '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')], '最近7日': [moment().subtract('days', 6), moment()], '最近30日': [moment().subtract('days', 29), moment()], '本月': [moment().startOf("month"),moment().endOf("month")], '上个月': [moment().subtract(1,"month").startOf("month"),moment().subtract(1,"month").endOf("month")] }, "opens":"right", "timePicker":true, "timePickerIncrement" : 60, })
汉化之后的插件的显示效果如下:
完整的使用案例点击这里下载。
相关文章推荐
- Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
- 日期时间范围选择插件:daterangepicker使用总结(必看篇)
- Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
- 日期时间范围选择插件-daterangepicker使用总结
- Date Range Picker和bootstrapValidator同时使用时,选择日期后无法正常触发校验
- BootStrap dateRangePicker时间范围控件
- daterangepicker bootstarp 日期范围选择控件使用注意事项
- bootstrap-datepicker限定可选时间范围 一、应用场景 实际应用中可能会根据日期字段查询某个日期范围内的数据,则需要对日期选择器可选时间进行限制, 如:开始时间不能大于结束时间,
- 使用datepicker时设置可选择时间范围
- vue2.x 时间范围 date range timepicker。只在项目中使用elementUI的date-picker
- daterangepicker 时间区间选择
- angular ui-bootstrap datepicker第二次点击没有显示时间选择 解决方案
- bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
- bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
- daterangepicker时间段选择插件使用
- 使用Ubuntu DatePicker来选择时间
- 联合使用DatePIcker和TimePicker来选择日期和时间
- 使用DatePickerDialog和TimePickerDialog实现日期和时间选择对话框
- dateRangePicker时间范围控件