奥非域

DateRangePicker使用演示

Date Range Picker for Bootstrap是一个非常不错的bootstrap日期插件,对于使用方法和本地化语言处理做演示,请直接查阅代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Date Range Picker for Bootstrap</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- daterange picker -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.min.css">
</head>
<body>
	<label class="box-title">时间范围:</label>
	<div class="input-group">
		<div class="input-group-addon">
			<i class="fa fa-calendar"></i>
		</div>
		<input type="text" class="form-control pull-right" id="reservation">
	</div>
				
<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- date-range-picker -->
<script src="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/moment.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js"></script>

<script>
$(function() {
	//console.log('xxoo:'+moment().subtract(1, 'days').format('YYYY-MM-DD'));
	//Date range picker
	$('#reservation').daterangepicker({
		applyClass : 'btn-sm btn-success',
        cancelClass : 'btn-sm btn-default',
        startDate: moment().subtract(1, 'days'),
        endDate  : moment(),
		opens: 'right',    // 日期选择框的弹出位置
        showWeekNumbers: true,     // 是否显示第几周
		//timePicker: true,
        //timePickerIncrement : 10, // 时间的增量,单位为分钟
        //timePicker12Hour : false, // 是否使用12小时制来显示时间
        //maxDate : moment(),           // 最大时间
        ranges : {
            //'最近1小时': [moment().subtract('hours',1), moment()],
            '今天': [moment().startOf('day'), moment()],
            '昨天': [moment().subtract(1,'days').startOf('day'), moment().subtract(1,'days').endOf('day')],
            '最近7天': [moment().subtract(6,'days'), moment()],
            '最近30天': [moment().subtract(29,'days'), moment()],
            '本月': [moment().startOf("month"),moment().endOf("month")],
            '上个月': [moment().subtract(1,"month").startOf("month"),moment().subtract(1,"month").endOf("month")]
        },
		locale: {
			"format": "YYYY-MM-DD",
			"separator": " 至 ",
			"applyLabel": "确定",
			"cancelLabel": "取消",
			"fromLabel": "起始时间",
			"toLabel": "截止时间",
			"customRangeLabel": "自定义",
			"weekLabel": "周",
			"daysOfWeek": ["日","一","二","三","四","五","六"],
			"monthNames": ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
			"firstDay": 1
		}
    }, function(start, end, label) {
		console.log('选择了:' + start.format('YYYY-MM-DD') + ' 到 ' + end.format('YYYY-MM-DD') + ' (标签: ' + label + ")");
	});
})
</script>
</body>
</html>

效果如图:

JavaScript