日期-用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 ...
随机推荐
- 最小生成树之算法记录【prime算法+Kruskal算法】【模板】
首先说一下什么是树: 1.只含一个根节点 2.任意两个节点之间只能有一条或者没有线相连 3.任意两个节点之间都可以通过别的节点间接相连 4.除了根节点没一个节点都只有唯一的一个父节点 5.也有可能是空 ...
- codeforces 732D
D. Exams time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...
- 实时的.NET程序错误监控产品Exceptionless开源了
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:实时的.NET程序错误监控产品Exceptionless开源了.
- CSharp - Comparison between IComparer and IComparable
/* Author: Jiangong SUN */ I've already written an article introducing the usage of comparer here. I ...
- HDOJ--4869--Turn the pokers【组合数学+高速幂】
链接:http://acm.hdu.edu.cn/showproblem.php?pid=4869 题意:有m张扑克.開始时所有正面朝下.你能够翻n次牌,每次能够翻xi张.翻拍规则就是正面朝下变背面朝 ...
- MYSQL 专家 ----zhaiwx_yinfeng
http://mysqllover.com/?p=708 https://yq.aliyun.com/articles/54454 http://blog.csdn.net/zhaiwx1987/ar ...
- [转]allocWithZone 和 单例模式
一.问题起源 一切起源于Apple官方文档里面关于单例(Singleton)的示范代码:Creating a Singleton Instance. 主要的争议集中在下面这一段: ? 1 2 3 4 ...
- Android（java）学习笔记194：ListView编写步骤（重点）
1.ListView在我们的手机android编写程序中使用是十分广泛的,比如如下图中 短信 和 手机设置 都是ListView的效果: 手机设置: 短信: 2.正因为这 ...
- Android（java）学习笔记192：SQLite数据库（表）的创建 以及 SQLite数据库的升级
一.数据库的创建 1.文件的创建 //引用,如果文件不存在是不会创建的 File file = new File("haha.txt"): //输出流写数据 ...
- View事件分发机制
所谓的事件分发,其实就是对MotionEvent事件的分发过程,即当一个MotionEvent产生后,系统需要把这个事件传递给一个具体的View,而这个传递的过程就是分发过程. 点击事件的分发由3个方 ...