laudate实现时间选择器

遇到的问题:引入一个新的JS文件要rebuild,方法可能会调用其他方法,所以要看看代码,还要方法初始化

HTML

<script type="text/javascript" th:src="@{/js/platform/laydate.js}"></script>

<div  class="form-inline p-xxs">
							<div class="form-group">
								<label class="search-label font-color">站点选择:</label>
								<select name="stationId" id="stationId" class="form-control stationNum">
									<option   th:each="unorgList:${unorgList}" value ="${unorgList.id}"  th:selected="${unorgList.id==id}"   th:text="${unorgList.name}"></option>
								</select>
								
								<label class="search-label font-color">时间:</label>
								<select name="timeType" id="timeType" class="form-control stationNum" onchange="unorg.changeTimeType();">
									<option value ="1" th:selected="${timeType==1}">当天</option>
									<option value ="2" th:selected="${timeType==2}">当月</option>
									<option value ="3" th:selected="${timeType==3}">自定义</option>
								</select>
							</div>
							<div id="timeDiv" class="form-group" style="display:none ;padding-right: 10px;padding-top: 5px">
								<label class="search-label ">监测时间 </label> :
								从
								<!--                            <input type="text" id="times" style="width: 303px;" autocomplete="off" class="form-control"/>-->
								<input th:value="${#dates.format(startTime,'yyyy-MM-dd HH:mm:ss')}" class=" form-control"  type="text" id="startTime" name="startTime" />
								<input th:value="${#dates.format(endTime,'yyyy-MM-dd HH:mm:ss')}" class=" form-control" type="text" id="endTime" name="endTime"/><!-- class="layui-laydate dateRange form-control " datefmt="yyyy-MM-dd HH:mm:ss"-->

							</div>

						</div>

JS

changeTimeType:function(){
			var me = this;
			var type = $("#timeType").val();
			if(type == 1 ||type==2){
				$("#timeDiv").hide();
			}
			else{
				$("#timeDiv").show();

					me.layDateTime();

			}
		},
		layDateTime:function () {
			var me=this;
			var current=me.getNowFormatDate();
			// 开始日期
			var startTime = laydate.render({
				elem: '#startTime',
				type:'datetime',
				done: function(value,date) {
					$("#endTime").val(value);
					endTime.config.min= {
						year: date.year,
						month: date.month - 1,
						date: date.date,
						hours: date.hours,
						minutes: date.minutes,
						seconds: date.seconds
					}
					endTime.config.max= {
						year: date.year,
						month: date.month - 1,
						date:me.getDaysInMonth(date.year,date.month),
						hour:24,
						minute:0,
						seconds:0
					};
				},
				max:current
			});

			// 结束日期
			var endTime = laydate.render({
				elem: '#endTime',
				type:'datetime',
				done: function(value) {

				},
				max:current,
			});
			laydate.render(startTime);
			laydate.render(endTime);
		},

		getDaysInMonth:function(year,month){
			var date = new Date();
			var currentYear=date.getFullYear();
			var currentMonth = date.getMonth()+1;
			var month = parseInt(month,10); //parseInt(number,type)这个函数后面如果不跟第2个参数来表示进制的话,默认是10进制。
			if(currentYear==year&&currentMonth==month){
				return date.getDate();
			}
			var temp = new Date(year,month,0);
			return temp.getDate();
		},
		getNowFormatDate:function(){
			var date = new Date();
			var seperator1 = "-";
			var seperator2 = ":";
			var month = date.getMonth() + 1;
			var strDate = date.getDate();
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			if (strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			}
			var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
				+ " " + date.getHours() + seperator2 + date.getMinutes()
				+ seperator2 + date.getSeconds();
			return currentdate;
		},

猜你喜欢

转载自blog.csdn.net/qq_39091546/article/details/109056380
今日推荐