做页面需要两个时间输入框一个显示当前时间,一个显示之前的时间,并且需要一个select下拉框控制两个时间输入框之间的差,效果如下图:
这里使用的是My97DatePicer,简单方便,引入my97插件,设置input时间框的格式,这里设置的时间最大是当前时间,开始时间框不能比结束时间框的时间大
1 <script></script> 2 3 选择时间范围:<select> 4 <option>一天</option> 5 <option>两天</option> 6 <option>三天</option> 7 <option>一周</option> 8 <option>二周</option> 9 <option>三周</option>10 </select>11 <br>12 开始时间:<input>13 <br>14 结束时间:<input>15
弄完这些,就可以点出时间了,但需要的是进入页面就显示当时时间,原理就是获取当前时间值再输入到时间框里
获取当时时间,因为获得的月份是从0-11,所以获得月份加一,才是真实月份
1 var date = new Date();2 var year = date.getFullYear();3 var month = date.getMonth()+1;4 var day = date.getDate();5 var hour = date.getHours();6 var minutes = date.getMinutes();7 var seconds = date.getSeconds();
将获得的时间拼成字符串,因为考虑到获取的时间数字小于10时,格式是这样的2017-9-1 10:1:8,所以小于10时拼接一下,更符合习惯
1 var endTimeStr,startTimeStr; 2 var str1,str2,str3,str4,str5; 3 if(month
这得到的是结束时间的,因为select下拉框控制的范围是到当前时间的,开始时间受下拉框限制,我们需要找出时间差
这是当前时间的毫秒数 1 var time = date.getTime();
这是下拉框控制的时间范围,转化为毫秒数
var cTime = $('#sDate').val()*24*3600*1000;
当前时间-下拉框时间=开始时间,再将开始时间转化为标准的格式
1 var dif = time-cTime; 2 var nTime = new Date(dif); 3 4 var year1 = nTime.getFullYear(); 5 var month1 = nTime.getMonth()+1; 6 7 var day1 = nTime.getDate(); 8 9 var hour1 = nTime.getHours();10 var minutes1 = nTime.getMinutes();11 var seconds1 = nTime.getSeconds();12 var str11.str12,str13,str14,str15;13 14 if(month1
得到开始时间和结束时间将它们输入到时间输入框即可
$('#endTime').val(endTimeStr); $('#startTime').val(startTimeStr);
可将以上js写成一个函数,select控制函数执行控制时间范围,完整如下
1 function timeSet(){ 2 3 var date = new Date(); 4 var time = date.getTime(); 5 6 var year = date.getFullYear(); 7 var month = date.getMonth()+1; 8 9 var day = date.getDate(); 10 11 12 13 14 var hour = date.getHours(); 15 var minutes = date.getMinutes(); 16 var seconds = date.getSeconds(); 17 var endTimeStr,startTimeStr; 18 var str1,str2,str3,str4,str5; 19 if(month
以上就是js使用my97插件的一个实例教程的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号