bootstrap之双日历时间段选择控件示例—daterangepicker(汉化版)

效果图：

参考代码：

<link href="/css/daterangepicker.min.css?ver=0.6" rel="stylesheet" type="text/css" />

<script src="/js/date-time/moment.js?ver=0.6" type="text/javascript"></script>

<script src="/js/date-time/daterangepicker.zh-CN.js?ver=0.6" type="text/javascript"></script>

<script src="/js/date-time/daterangepicker.js?ver=0.6" type="text/javascript"></script>

<div class="input-group" style="width: 240px; margin-left: -5px;">

	<input type="text" class=&qu·ot;form-control date-picker" id="dateTimeRange" value="" />

	<span class="input-group-addon">

		<i class="fa fa-calendar bigger-110"></i>

	</span>

	<input type="hidden" name="beginTime" id="beginTime" value="" />

	<input type="hidden" name="endTime" id="endTime" value="" />

</div>

<a href="javascript:;" onclick="begin_end_time_clear();">清除</a>

<script type="text/javascript">

$(function() {

	$('#dateTimeRange').daterangepicker({

		applyClass : 'btn-sm btn-success',

		cancelClass : 'btn-sm btn-default',

		locale: {

			applyLabel: '确认',

			cancelLabel: '取消',

			fromLabel : '起始时间',

			toLabel : '结束时间',

			customRangeLabel : '自定义',

			firstDay : 1

		},

		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',	// 日期选择框的弹出位置

		separator : ' 至 ',

		showWeekNumbers : true,		// 是否显示第几周

		//timePicker: true,

		//timePickerIncrement : 10,	// 时间的增量，单位为分钟

		//timePicker12Hour : false,	// 是否使用12小时制来显示时间

		//maxDate : moment(),			// 最大时间

		format: 'YYYY-MM-DD'

	}, function(start, end, label) { // 格式化日期显示框

		$('#beginTime').val(start.format('YYYY-MM-DD'));

		$('#endTime').val(end.format('YYYY-MM-DD'));

	})

	.next().on('click', function(){

		$(this).prev().focus();

	});

});

/**

 * 清除时间

 */

function begin_end_time_clear() {

	$('#dateTimeRange').val('');

	$('#beginTime').val('');

	$('#endTime').val('');

}

</script>

Daterangepicker 中文汉化版  完整 Demo 下载

CSDN下载