日期-用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 ...
随机推荐
- webview改变网页宽度
- (void)webViewDidFinishLoad:(UIWebView *)webView { //修改服务器页面的meta的值 NSString *meta = [NSString stri ...
- SRM 609(1-250pt, 1-500pt)
嗯....还是应该坚持写题解的好习惯啊... DIV1 250pt 这难度是回到srm 300+的250了嘛...略 // BEGIN CUT HERE /* * Author: plum rain ...
- windows ntp安装及调试
Setting up NTP on Windows It's very helpful that Meinberg have provided an installer for the highly- ...
- Ubuntu下Django初体验（三）——django初体验
Django中的重要概念: 一次web访问的实质: 1. 客户发送http请求到web服务回 2. web服务器返回html页面给客户 Django概述: 1. URL配置 建 ...
- Android 在广播接收器中弹出对话框
特别需要注意的几点如下: 需要设置AlertDialog的类型 WindowManager.LayoutParams.TYPE_SYSTEM_ALERT 2. 需要声明Window弹框的权限 < ...
- Android开发：Handler Runnable和Thread之间的区别和联系 应用--------------------看完本篇，从此一览无余！
http://blog.csdn.net/yanzi1225627/article/details/8582081 在java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnab ...
- Java的JDBC事务详解(转)
事务的特性: 1) 原子性(atomicity):事务是数据库的逻辑工作单位,而且是必须是原子工作单位,对于其数据修改,要么全部执行,要么全部不执行. 2) 一致性(consistency):事务在完 ...
- linux下64位汇编的系统调用系列
http://blog.csdn.net/mydo/article/category/3084893
- [Eclipse]The type XXX cannot be resolved. It is indirectly referenced from required .class files
在Eclipse中遇到The type XXX cannot be resolved. It is indirectly referenced from required .class files错误 ...
- 所有Mac用户都需要知道的9个实用终端命令行<转>
转自 http://www.macx.cn/thread-2075903-1-1.html 通常情况下,只有高端用户才会经常用到终端应用.这并不意味着命令行非常难学,有的时候命令行可以轻松.快速的解决 ...