您的位置:首页 > 运维架构

daterangepicker时间段选择插件使用

2016-07-26 00:00 691 查看

bootstrap-daterangepicker插件的参数及使用方法

1、汉化:
http://www.daterangepicker.com/#examples 官网demo有个locale属性是专门用来汉化的。

var locale = {
"format": 'YYYY-MM-DD',
"separator": " -222 ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};

2、设置默认开始结束时间:

format: 'YYYY-MM-DD',
startDate:'2016-04-21',
endDate:'2016-04-25',

3、设置最大最小可选时间:

format: 'YYYY-MM-DD',
minDate:'2016-04-21',
maxDate:'2016-04-29'

更过功能,待我慢慢发现

如下是我的第一次使用效果:

<!-- daterange picker -->
<link rel="stylesheet" href="__ALTE__/plugins/daterangepicker/daterangepicker-bs3.css">
<script src="__ALTE__/plugins/moment/moment.min.js"></script>
<script src="__ALTE__/plugins/daterangepicker/daterangepicker.js"></script>
$('#reservation').daterangepicker({
locale:{
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: '开始',
toLabel: '结束',
daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
},
format: 'YYYY-MM-DD',
startDate:startDate,
endDate:endDate,
maxDate:endDate
});

效果如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Opensns