朱清林's Blog

朱清林's Blog

bootstrap的日期时间插件 daterangepicker

下载地址:https://github.com/dangrossman/bootstrap-daterangepicker

头部引入文件:

<link href="bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="daterangepicker.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>

使用和配置:

//绑定input元素 id="startDate"
$('#startDate').daterangepicker({
//默认选择开始时间
startDate : moment().subtract(10, 'days'),
//默认选择结束时间
endDate : moment(), 
//显示单个日历表
//singleDatePicker: true,
//开启时、分
//timePicker: true, 
//显示第几周
//showWeekNumbers: true, 
//开启24小时制
//timePicker24Hour: true, 
//开启年月的选择
showDropdowns: true, 
    //快捷选择时间
    ranges : {
        '最近1小时': [moment().subtract('hours',1), moment()],  
        '今日': [moment(), 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()]  
	},
    locale : {  //中文汉化
        format : 'YYYY-MM-DD', //显示时间格式 2015-08-19
        applyLabel : '确定',  
        cancelLabel : '取消',  
        fromLabel : '起始时间',  
        toLabel : '结束时间',  
        customRangeLabel : '自定义',  
        daysOfWeek : ['日','一','二','三','四','五','六'],  
        monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月' ],  
        firstDay : 1  
	},
    // "opens": "left", //日历表的位置
    // "drops": "up", //日历表的位置
    // "buttonClasses": "button", //日历表"确定"按钮类名
    // "applyClass": "hover", //日历表"确定"按钮类名
    // "cancelClass": "cancel" //日历表"取消"按钮类名
});

 

原文地址:http://www.lltonet.com/5.html

阅读 849   190