日期-用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 ...
随机推荐
- GRUB损坏后，如何修复windows启动mbr
今天使用Ghost装系统遇到windows7不能启动的问题,采用下面帖子中的部分命令搞定之. 我自己是直接使用: 插入windows7安装光盘,从光盘启动,在光盘启动完成后,按下shift+f10键, ...
- kvm usb2.0
Virt-Manager adds support for usb2 Wednesday, April 4, 2012 - 10:40 Haydn Solomon The most recent re ...
- xml基础小结
XML基础 1)XML的作用 1.1 作为软件配置文件 1.2 作为小型的“数据库” 2)XML语法(由w3c组织规定的) 标签: 标签名不能以数字开头,中间不能有空格,区分大小写.有且仅有一个根标签 ...
- spring boot项目配置文件集合
表 1. Spring Boot 推荐的基础 POM 文件 名称 说明 spring-boot-starter 核心 POM,包含自动配置支持.日志库和对 YAML 配置文件的支持. spring-b ...
- mysql技术调优资料整理
1,15 个有用的 MySQL/MariaDB 性能调整和优化技巧 2,MariaDB设置主从复制 3,CentOS6.4安装mysql2redis http://www.cnblogs ...
- tomcat报错：This is very likely to create a memory leak问题解决
tomcat memory leak解决方案 这种问题在开发中经常会碰到的,看看前辈的总结经验 Tomcat内存溢出的原因 在生产环境中tomcat内存设置不好很容易出现内存溢出.造成内存溢出是不一 ...
- CSS3实现兼容性的渐变背景效果
一.CSS3实现兼容性渐变背景效果,兼容FF.chrome.IE 渐变效果,现在主流的浏览器FF.Chrome.Opera.IE8+都可以通过带有私有前缀的CSS3属性来轻松滴实现渐变效果,IE7及以 ...
- NYOJ 38 布线问题_(解法2 Prim算法)
时间限制:1000 ms | 内存限制:65535 KB 难度:4 描写叙述 南阳理工学院要进行用电线路改造.如今校长要求设计师设计出一种布线方式.该布线方式须要满足下面条件: 1.把全部的楼都供 ...
- iOS swift使用xib绘制UIView
目标:用xib绘制一个UIView,在某个ViewController中调用. 三个文件:ViewController.Swift DemoView.swift DemoView.xib ...
- Hadoop-2.2.0中文文档—— Common - 服务层认证
目的 此文档描写叙述了怎样为Hadoop配置和管理 Service Level Authorization . 预备条件 确保已经安装Hadoop,配置和设置都正确了. 很多其它细节,请看:* 首次使 ...