日历组件datetimepicker

1.HTML代码:

<div class="col-sm-5 timegroup">
     <label class="control-label">推送时间:</label>
	 <input size="10" type="text" name="startDate" id="startDate" class="form-control" placeholder="开始时间" style="display: inline-block; width: 30%;">
		<span class="add-on" style="display: none"><i class="icon-remove"></i></span> 
        <span class="add-on"><i class="icon-calendar"></i></span>
		<span class="time">至</span>
	<input size="10" type="text" name="endDate" id="endDate" class="form-control" placeholder="结束时间" value="" style="display: inline-block; width: 30%;">
		<span class="add-on" style="display: none"><i class="icon-remove"></i></span> 
        <span class="add-on"><i class="icon-calendar"></i></span>									
</div>

2.JS代码:

//时间控件
			$('#startDate,#endDate').datetimepicker({
				minView: 'month',
				format: 'yyyy-mm-dd',
				language: 'ch',
				autoclose: true,
				todayBtn: true,
				startView: 2
			});
			//开始日期
			$('#startDate').on('changeDate', function() {
				$('#endDate').datetimepicker('setStartDate', $('#startDate').val());
				if($('#startDate').val() == "" && $("#startDate").next().css('display') == 'inline-block') {
					$("#startDate").next().css('display', 'none');
				} else {
					$("#startDate").next().css('display', 'inline-block');
				}
			});
			//结束日期
			$('#endDate').on('changeDate', function() {
				$('#startDate').datetimepicker('setEndDate', $('#endDate').val());
				if($('#endDate').val() == "" && $("#endDate").next().css('display') == 'inline-block') {
					$("#endDate").next().css('display', 'none');
				} else {
					$("#endDate").next().css('display', 'inline-block');
				}
			});

猜你喜欢

转载自blog.csdn.net/tt18473481961/article/details/81298353
今日推荐