JSP-----日历的显示

JSP-----（.datetimepicker）日历的显示

需求：

1. 效果：
   

需要以日历的方式填入初试时间和结束时间。

2.不能直接填入时间内容，需要通过日历的形式选择

3.点击红色框开始日历选择

多少年几月几日

多少小时

多少分钟
4.最终效果：

Jsp代码实现：

<div class="col-sm-4">
  <div class="form-group">
     <label class="control-label" for="Time_start" title="申请时间">申请时间</label> 
     <div class="col-sm-9 input-daterange">
     	<input id="time_start" type="text" class="form-control form_datetime"  name="time_start" readonly="readonly" style="background-color:#FFFFFF;min-width:137px"/>
     	<i></i>
     	<span class="input-group-addon">到</span> 
     	<input id="time_end" type="text" class="form-control form_datetime"  name="time_end" readonly="readonly" style="background-color:#FFFFFF;min-width:137px"/>
     	<i></i>
     </div>
  </div>
</div>

<script type="text/javascript">
 		$('#gkk0422_start').on('change', function(ev) {
       	 	var date = $('#gkk0422_start').val();
       	 	$("#gkk0422_end").datetimepicker('setStartDate', date);
        	$("#gkk0422_start").datetimepicker('hide');
    		});

    	$('#gkk0422_end').on('change', function(ev) {
        	var date = $('#gkk0422_end').val();
        	$("#gkk0422_start").datetimepicker('setEndDate', date);
        	$("#gkk0422_end").datetimepicker('hide');
    	});
	})
</script>

$(function(){
		$('.form_datetime').datetimepicker({
			language : 'zh-CN',
			format: 'yyyy-mm-dd',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			minView : 'month',
			minuteStep : 1,
			forceParse : 0
		});

傻瓜式教学，读者有更好的方式，可以借鉴…

.datetimepicker可设置参数

参数	描述
weekStart	一周从哪一天开始
startDate	开始时间（new date()）
endDate	结束时间
daysOfWeekDisabled	一周的周几不能选
autoclose	选定时间后自动关闭
startView	选完时间后是否自动关闭
minView	最精确的时间
maxView	最高能展示的时间
todayBtn	当前时间的按钮
todayHighlight	当天日期高亮
keyboardNavigation	方向键改变日期
language	语言（中文：’zh-CN’）
forceParse	强制解析
minuteStep	步进值
initialDate	初始化日期时间
showMeridian	是否显示上下午(Boolean类型 ;默认值：false)
pickerPosition	选择框位置(默认值：’bottom-right’;还支持 : ‘bottom-left’，’top-right’，’top-left’)