js使用my97插件显示当前时间，且select控制计算时间差
做页面需要两个时间输入框一个显示当前时间，一个显示之前的时间，并且需要一个select下拉框控制两个时间输入框之间的差,效果如下图：
这里使用的是My97DatePicer,简单方便,引入my97插件，设置input时间框的格式，这里设置的时间最大是当前时间，开始时间框不能比结束时间框的时间大
<script src="lib/date/WdatePicker.js"></script>
<body>
选择时间范围：<select name="selectDate" id="sDate">
<option value="1">一天</option>
<option value="2">两天</option>
<option value="3">三天</option>
<option value="7">一周</option>
<option value="14">二周</option>
<option value="21">三周</option>
</select>
<br/>
开始时间：<input type="text" id="startTime" class="Wdate" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endTime\')}'&&'%y-%M-%d'})">
<br/>
结束时间：<input type="text" id="endTime" class="Wdate" onFocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startTime\')}',maxDate:'%y-%M-%d'})">
</body>
弄完这些，就可以点出时间了，但需要的是进入页面就显示当时时间，原理就是获取当前时间值再输入到时间框里
获取当时时间,因为获得的月份是从0-11，所以获得月份加一，才是真实月份
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
将获得的时间拼成字符串，因为考虑到获取的时间数字小于10时，格式是这样的2017-9-1 10:1:8,所以小于10时拼接一下，更符合习惯
var endTimeStr,startTimeStr;
var str1,str2,str3,str4,str5;
if(month<10){
str1='-0';
}else {
str1='-'
} if(day<10){
str2='-0';
}else{
str2='-';
} if(hour<10){
str3=' 0';
}else {
str3=' ';
}
if(minutes<10){
str4=':0';
}else {
str4=':';
}
if(seconds<10){
str5=':0';
}else {
str5=':';
} endTimeStr = year+str1+month+str2+day+str3 +hour+str4+minutes+str5+seconds;
这得到的是结束时间的，因为select下拉框控制的范围是到当前时间的，开始时间受下拉框限制，我们需要找出时间差
这是当前时间的毫秒数 var time = date.getTime();
这是下拉框控制的时间范围，转化为毫秒数
var cTime = $('#sDate').val()*24*3600*1000;
当前时间-下拉框时间=开始时间，再将开始时间转化为标准的格式
var dif = time-cTime;
var nTime = new Date(dif); var year1 = nTime.getFullYear();
var month1 = nTime.getMonth()+1; var day1 = nTime.getDate(); var hour1 = nTime.getHours();
var minutes1 = nTime.getMinutes();
var seconds1 = nTime.getSeconds();
var str11.str12,str13,str14,str15; if(month1<10){
str11='-0';
}else {
str11='-'
} if(day1<10){
str12='-0';
}else{
str12='-';
} if(hour1<10){
str13=' 0';
}else {
str13=' ';
}
if(minutes1<10){
str14=':0';
}else {
str14=':';
}
if(seconds1<10){
str15=':0';
}else {
str15=':';
} startTimeStr = year1+str11+month1+str12+day1+str13 +hour1+str14+minutes1+str15+seconds1;
得到开始时间和结束时间将它们输入到时间输入框即可
$('#endTime').val(endTimeStr);
$('#startTime').val(startTimeStr);
可将以上js写成一个函数，select控制函数执行控制时间范围,完整如下
function timeSet(){
var date = new Date();
var time = date.getTime();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var endTimeStr,startTimeStr;
var str1,str2,str3,str4,str5;
if(month<10){
str1='-0';
}else {
str1='-'
}
if(day<10){
str2='-0';
}else{
str2='-';
}
if(hour<10){
str3=' 0';
}else {
str3=' ';
}
if(minutes<10){
str4=':0';
}else {
str4=':';
}
if(seconds<10){
str5=':0';
}else {
str5=':';
}
endTimeStr = year+str1+month+str2+day+str3 +hour+str4+minutes+str5+seconds;
//求时间差，
var cTime = $('#sDate').val()*24*3600*1000;
var dif = time-cTime;
var nTime = new Date(dif);
var year1 = nTime.getFullYear();
var month1 = nTime.getMonth()+1;
var day1 = nTime.getDate();
var hour1 = nTime.getHours();
var minutes1 = nTime.getMinutes();
var seconds1 = nTime.getSeconds();
var str11.str12,str13,str14,str15;
if(month1<10){
str11='-0';
}else {
str11='-'
}
if(day1<10){
str12='-0';
}else{
str12='-';
}
if(hour1<10){
str13=' 0';
}else {
str13=' ';
}
if(minutes1<10){
str14=':0';
}else {
str14=':';
}
if(seconds1<10){
str15=':0';
}else {
str15=':';
}
startTimeStr = year1+str11+month1+str12+day1+str13 +hour1+str14+minutes1+str15+seconds1;
$('#endTime').val(endTimeStr);
$('#startTime').val(startTimeStr);
}
timeSet();
$('#sDate').on('change',function(){
timeSet();
});
js使用my97插件显示当前时间，且select控制计算时间差的更多相关文章
- js实时获取并显示当前时间的方法
- 前端开发自学之JavaScript——显示当前时间
<html> <head> <title>JavaScript</title> <script language="javascript ...
- js显示当前时间
闲着没事在闪存里看到有人需要js显示当前时间,就一时兴起写了个. 输出格式:“2013年12月18日 星期三 上午9:05:00 ”. <script type="text/javas ...
- JS实现以日历形式显示当前时间
效果图: <script language="Javascript"> var datelocalweek=new Array("星期日", &qu ...
- 自己封装的一个js方法用于获取显示的星期和日期时间
自己封装的一个js方法用于获取显示的星期和日期时间 /** * 获取用于显示的星期和日期时间 * @param date * @returns {string} */ function getWeek ...
- datetimepicker bootstrap的时间插件显示位置问题及其他配置
位置问题: 在bootstrap中用 datetimepicker 时默认是在输入框下面弹出的, 但是遇到输入框在屏幕最下面时,日期选择框会有一部分在屏幕下面,显示不了,因此需要能够从上面弹出. 可以 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- jQuery Tags Input 插件显示选择记录
利用jQuery Tags Input 插件显示选择记录 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采 ...
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
随机推荐
- ASP.NET MVC (Umbraco)中如何设置网站超时自动退出
原文章请参考 https://edgewebware.com/2014/06/automatically-log-out-members-send-login-page-umbraco/ 在网站开发 ...
- Gym 101142C CodeCoder vs TopForces (搜索)
题意:每个人有2种排名,对于A只要有一种排名高于B,那么A就能赢B,再如果B能赢C,那么A也能赢C,要求输出每个人分别能赢多少个人 析:首先把题意先读对了,然后我们可以建立一个图,先按第一种排名排序, ...
- JAVA基础学习-集合三-Map、HashMap,TreeMap与常用API
森林森 一份耕耘,一份收获 博客园 首页 新随笔 联系 管理 订阅 随笔- 397 文章- 0 评论- 78 JAVA基础学习day16--集合三-Map.HashMap,TreeMap与常用A ...
- 如何升级一个JavaWeb应用
准备db变更 准备整个war包或变更的文件 上传文件至云盘(通常直接上传文件较慢,建议先传到云盘,然后下载) 从云盘下载 执行db变更 解压war到指定目录或替换变更的文件 修改设计IP地址的配置文 ...
- 【转】mysql数据库的数据类型
一.数值类型 Mysql支持所有标准SQL中的数值类型,其中包括: 严格数据类型(INTEGER,SMALLINT,DECIMAL,NUMBERIC ...
- Excel .net读取
public void LoadData(string StyleSheet) { string strCon = "Provider=Microsoft.Jet.OLEDB.4.0;Dat ...
- Automake使用(中级)
工程地址 automake语言国际化 最初工程目录结构 $ ls -l total 16 drwxrwxr-x. 2 fedora fedora 4096 May 10 10:38 build-aux ...
- 327. Count of Range Sum(inplace_marge)
Given an integer array nums, return the number of range sums that lie in [lower, upper] inclusive.Ra ...
- unity3d各种OpenFileDialog操作
http://www.cnblogs.com/U-tansuo/archive/2012/07/10/GetOpenFileName.html 1 编辑模式(Editor)下: string path ...
- 【转】Js 数组转JSON格式
要点1:转化函数 JSON.stringify() 要点2:在js里写数组的时候是var data = new Array() 但是你如果是要转json显示的时候就要写成 var data = {}, ...