日期-用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 ...
随机推荐
- 打印从1到k之间的所有素数
问题分析:素数是指大于1且只能被它本身和1整除的数,根据定义可以从2开始对一个数取余数一直到它本身,若它有第三个整除数,则可以判定它不是素数.若使用这种方法,会浪费时间,我们可以判断2到这个数的算术平 ...
- java的单例设计模式
java的单例设计模式包括:饿汉设计模式和懒汉设计模式: 步骤: 1.创建一个对象把他设置为私有的成员变量,保证唯一 2.私有构造方法,防止new一个对象. 3.定义一个公开的静态方法,返回第一步创建 ...
- Struts标签<s:iterator>遍历访问复杂Map对象
<s:iterator value="resultType" id="geneUi"> //拿到要遍历的Map对象 <s:iterator v ...
- Winfrom 如何安全简单的跨线程更新控件
来源:http://www.cnblogs.com/rainbowzc/archive/2010/09/29/1838788.html 由于多线程可能导致对控件访问的不一致,导致出现问题.C#中默认是 ...
- Making the Elephant Dance: Strategic Enterprise Analysis
http://www.modernanalyst.com/Resources/Articles/tabid/115/ID/2934/categoryId/23/Making-the-Elephant- ...
- Socket程序中的Error#10054错误
近期使用winSock做的一个网络项目中,使用TCP+Socket连接编写的一个多线程的网络程序,功能是client负责不断地向server端发送数据,服务端负责接收数据.client是一个DLL,服 ...
- eclipse通过classpath variable引用类库
众所周知.eclipse的project bulid path中能够引用第三方类库(如图1). 图1 可是这样的方式有个缺点:对类库的引用是通过绝对路径.假设有两台电脑(办公室1台.家1台),非常可能 ...
- bash if 表达式
.bash把[[ $a -lt $b ]]看作一个单独的元素,并且返回一个退出码.退出码0为真,非零为假 例如: a= b=c [[ $a -lt $b ]] echo $? # a小于b为真 [[ ...
- TCP/IP 编程
http://www.cnblogs.com/ggjucheng/archive/2012/08/18/2645324.html
- hadoop错误DataXceiver error processing WRITE_BLOCK operation
错误: DataXceiver error processing WRITE_BLOCK operation 原因: 文件操作超租期,实际上就是data stream操作过程中文件被删掉了. ...