日期-用Datapicker实现前一天后一天
运用了JQuery UI Datepicker 插件和一些常用日期的方法。其中Datepicker的API具体可参考【http://api.jqueryui.com/datepicker/#option-dateFormat】
<!--
需求：可选择包括今天及前三个月的日期
初始化显示当天的日期
点击前一天|后一天，日期自动向前|后跳转
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="css/jquery.ui.all.css">
<link rel="stylesheet" href="css/jquery.ui.datepicker.css">
<link rel="stylesheet" href="css/jquery.ui.theme.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="css/test_datePicker.css">
<style>
span{cursor:pointer;}
.disable{color:#999;}
</style>
<script>
$(function() {
var inputVal ="";
var mon = 3;
var date = new Date();
var year,month,day=""; //初始化显示当日日期
var year = date.getFullYear();
var month = date.getMonth()+1;//返回Date对象的月份值，注意返回值在0(1月)~11(12月)之间
var day = date.getDate();
if(month.toString().length<2){month = "0"+month;}//格式为一位数时补齐0
if(day.toString().length<2){day = "0"+day;}
var todayDate = year+"-"+month+"-"+day;
$("#datepicker").val(todayDate); //绑定日期插件
$( "#datepicker" ).datepicker({dateFormat:"yy-mm-dd",changeMonth:true,changeYear:true,minDate:"-3m",maxDate:new Date()}); //点击前一天
$(".preDate").click(function(){
$(".nextDate").removeClass("disable");
if($(this).hasClass("disable")){return;}
inputVal = $("#datepicker").val();
var getYMD = getYYMMDD(inputVal);
year = parseInt(getYMD.yy,10);
month = parseInt(getYMD.mm,10);
day = parseInt(getYMD.dd,10); var preDate,preDay="";
if(month!=1 && day==1){//除1月份以外的某月1日
var premm = month-1;
var predays = new Date(year+"/"+month+"/0");
preDay = predays.getDate();
if(premm.toString().length<2){premm = "0"+premm;}
if(preDay.toString().length<2){preDay = "0"+preDay;}
preDate = year+"-"+premm+"-"+preDay;
}
else if(day!=1){//非1日
preDay = day-1;
if(month.toString().length<2){month = "0"+month;}
if(preDay.toString().length<2){preDay = "0"+preDay;}
preDate = year+"-"+month+"-"+preDay;
}
else{//1月1日
var preyy = year-1;
var predays = new Date(preyy+"/"+13+"/0");
preDay = predays.getDate();
if(preDay.toString().length<2){preDay = "0"+preDay;}
preDate = preyy+"-12-"+preDay;
} $("#datepicker").val(preDate); //判断前一天是否已到日期范围最小值
if(preDate == getMinDate(mon)){$(".preDate").addClass("disable");}
else{$(".preDate").removeClass("disable");}
}); //点击后一天
$(".nextDate").click(function(){
$(".preDate").removeClass("disable");
if($(this).hasClass("disable")){return;}
inputVal = $("#datepicker").val();
var getYMD = getYYMMDD(inputVal);
year = parseInt(getYMD.yy,10);
month = parseInt(getYMD.mm,10);
day = parseInt(getYMD.dd,10); var nextDate,nextDay="";
if(month==12&&day==31){//年末最后一天
var nextyy = year+1;
nextDate = nextyy+"-01-01";
}
else{
var nextmm = month+1;
var nextdays = new Date(year+"/"+nextmm+"/0");
if(day==nextdays){//月末最后一天
if(nextmm.toString().length<2){nextmm = "0"+nextmm;}
nextDate = year+"-"+nextmm+"-01";
}
else{
nextDay = day+1;
if(nextDay.toString().length<2){nextDay = "0"+nextDay;}
if(month.toString().length<2){month = "0"+month;}
nextDate = year+"-"+month+"-"+nextDay;
}
} $("#datepicker").val(nextDate); if(nextDate == todayDate){$(".nextDate").addClass("disable")}
else{$(".nextDate").removeClass("disable");}
}); }); //返回input框中的年|月|日
function getYYMMDD(dateStr){
var dPick = {yy:0,mm:0,dd:0}
dPick.yy = dateStr.substring(0,4);
dPick.mm = dateStr.substring(5,7);
dPick.dd = dateStr.substring(8,10);
return dPick;
} //返回日期范围(3个月)的最小日期
function getMinDate(mon){
var minDate="";
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1-mon;
var day = date.getDate();
if(month<=0){
year-=1;
month+=12;
}
else if(day>28){
if(month==2){
if(year%400==0||(year%4==0&&year%100!=0)){day=29;}
else{day=28;}
}
else if((month==4||month==6||month==9||month==11)&&day=31){day=30;}
}
if(month.toString().length<2){month = "0"+month;}
if(day.toString().length<2){day = "0"+day;}
minDate = year+"-"+month+"-"+day;
return minDate;
}
</script>
</head>
<body> <p>Date:<span class="preDate"><<前一天</span><input type="text" id="datepicker" readonly="readonly"><span class="nextDate disable">后一天>></span></p> <div class="demo-description">
<p></p>
</div>
</body>
</html>
结果如下图所示：
日期-用Datapicker实现前一天后一天的更多相关文章
- input绑定datapicker控件后input再绑定blur或者mouseout等问题
input绑定datapicker控件后input再绑定blur或者mouseout等问题 问题描述:今天在修改一个东西的时候需要给一个input输入域绑定blur事件,从而当它失去焦点后动态修改其中 ...
- JavaScript如何实现日期的前一天后一天转变
1.生成时间 var data =new Date(); 2.获得时间戳 什么是时间戳? 时间戳是指格林威治时间自1970年1月1日(00:00:00 GTM)至当前时间的总秒数.它也被称为U ...
- Javascript/Jquery实现日期前一天后一天
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- [MySQL] 按日期进行统计（前一天、本周、某一天）
在mysql数据库中,常常会遇到统计当天的内容.例如,在user表中,日期字段为:log_time统计当天 sql语句为: select * from user where date(log_time ...
- （转载）MySql按日期进行统计（前一天、本周、某一天）
(转载)http://www.yovisun.com/mysql-date-statistics.html 在mysql数据库中,常常会遇到统计当天的内容.例如,在user表中,日期字段为:log_t ...
- mysql 获取昨天日期、今天日期、明天日期以及前一个小时和后一个小时的时间
1.当前日期 select DATE_SUB(curdate(),INTERVAL 0 DAY) ; 2.明天日期select DATE_SUB(curdate(),INTERVAL -1 DAY) ...
- python获取时间————前一天后一天前一小时后一小时前一分钟后一分钟
获取当天日期 一: import time print(time.strftime("%Y-%m-%d")) #输出当前日期 2018-05-01 二: import dateti ...
- JSjs获取当前时间的前一天/后一天（昨天/明天）
Date curDate = new Date(); var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天 var next ...
- js获取当前时间的前一天/后一天
Date curDate = new Date();var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天var nextDa ...
随机推荐
- 玩玩Hibernate（二）hibernate-spider爬虫~~
新建一个hSpider的工程,引入前面已经建立的lib 并为其建立一个hibernate.cfg.xml的映射文件 <?xml version='1.0' encoding='utf-8'?&g ...
- 4 weekend110的hdfs下载数据源码跟踪铺垫 + hdfs下载数据源码分析-getFileSystem（值得反复推敲和打断点源码）
Hdfs下载数据源码分析 在这里,我是接着之前的,贴下代码 package cn.itcast.hadoop.hdfs; import java.io.FileInputStream; import ...
- 超强vim配置文件
简易安装方法: https://github.com/ma6174/vim 打开终端,执行下面的命令就自动安装好了: wget -qO- https://raw.github.com/ma6174/v ...
- 获取toast值
/** * 获取Toast的String值 * @return */ public String getToast(int timeout){ TextView toastTextView = nul ...
- struts2 表单处理
在这篇教程里我们将探究如何处理表单提交.本文例子介绍: javabean存储表单数据 在action中重写validate方法进行简单的校验 创建一个struts2表单并和javabean匹配 jav ...
- 使用CLRMD时通过Symbol Server找Dac的位置来初始化ClrRuntime
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用CLRMD时通过Symbol Server找Dac的位置来初始化ClrRuntime.
- IOS开发之网络开发工具
IOS开发之网络开发工具 做移动端开发 常常会涉及到几个模块:1.网络检測 2.网络请求get和post请求 3.文件上传 4.文件下载 5.断点续传 如今将这些一一分享给大家 ,也欢迎 ...
- javascript、jsp
1.javascript:简称js 在<body>与 </body>之间 加入<script> </script>即可 最好在<head>与 ...
- C# DataTable怎么合计字段
DataTable dt = new DataTable(); var age=dt.Compute("avg(age)",""); var height =d ...
- PND_白盾