首先需要引用如下Js文件且顺序不得有误,否则会报诸如$().moment()is not a function的错误,这是JS文件加载顺序导致的
引用的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, })
完整的使用案例
点击这里下载。