HTML5 input date属性引起的探索——My97DatePicker(日期选择插件)
不得不说H5的input date属性真的好用,之前我写的http://www.cnblogs.com/tu-0718/p/6729274.html这篇博客里面也有提到,不过虽然移动端对H5的支持还是很好的,但是PC端浏览器对H5的支持就很让人无奈了。然后最近遇到一个需求:需要一个开始时间和结束时间,默认显示年月,如下图:
第一反应想到的是H5的input date属性,因为兼容性问题无奈放弃,然后发现了一个挺好用的插件:DatePicker,
注:在使用此插件时需要注意,DatePicker插件需要的不仅仅是js文件,而是整个文件夹都需要,如下图:
如果你把里面的js文件单独提出来引入的话是没有效果的,控制台会提示找不到此js文件,这个文件的路径是不能改的,能改的只有文件夹的名字。
此插件调用WdatePicker() 方法默认显示年月日如下图:
如果你只想显示年月,onclick="WdatePicker({dateFmt:'yyyy-MM'})" 即可,如下图
本来到这里就应该结束了,不过后面需求又加了一个,说是要给开始时间和结束时间设置一个默认时间,经测试,此插件并没有相应的方法可以办到。
然后我就想到了一个方法,用jquery获取到开始时间和结束时间元素的值,然后调用原生JS new Date()方法,在用toLocaleDateString()转一次
代码如下:


$("#beginDate").val(GetDateStr().substr(0,7));
$("#endDate").val(GetDateStr().substr(0,7));
function GetDateStr(AddYear,AddMonth,AddDay) {
AddYear?AddYear:AddYear=0;
AddMonth?AddMonth:AddMonth=0;
AddDay?AddDay:AddDay=0;
var dd = new Date();
dd.setFullYear(dd.getFullYear()+AddYear);
dd.setMonth(dd.getMonth()+AddMonth);
dd.setDate(dd.getDate()+AddDay);
var y = dd.getFullYear();
var m = dd.getMonth()+1;
var d = dd.getDate();
return y+"-"+m;
}

附: 我就一条龙服务做到底吧,在附上一段代码,主要用于判断日期(起始时间不能大于结束时间 / 不能直接选择结束时间,需要先选择起始时间)
$(document).ready(function(){
var createDateBegin = $("#beginDate");
var createDateEnd = $("#endDate");
$(createDateEnd).blur(function(){
if(createDateEnd.val()!="" && createDateBegin.val()!=""&&createDateEnd.val()<createDateBegin.val()){
alert('开始时间不能大于结束时间!');
$(createDateEnd).val("");
return;
}
if((createDateBegin).val()==""){
alert('请选择起始时间!');
$(createDateEnd).val("");
return;
}
if((createDateBegin).val()!=""){
return;
}
});
$(createDateBegin).blur(function(){
if(createDateEnd.val()!="" && createDateBegin.val()!=""&&createDateEnd.val()<createDateBegin.val()){
alert('开始时间不能大于结束时间!');
$(createDateEnd).val("");
return;
}
if($(createDateEnd).val()!=""){
return;
}
});
});
HTML5 input date属性引起的探索——My97DatePicker(日期选择插件)的更多相关文章
- HTML5 INPUT新增属性
HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证.input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅.我们先看下i ...
- 【jquery】多日期选择插件easyui date
1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/d ...
- Html5 input placeholder 属性字体颜色修改。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下 Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...
- 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)
1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...
- 上传文件,不依赖 Jquery flash 插件,用到HTML5 input 新属性实现过滤文件格式、同时上传多个文件
1.样式 2.js 3.后台处理 4.效果图 一.样式 <style> .divUpload { position: relative; } .divUploadFirst { width ...
- HTML5 input date 移动端 IOS 不支持问题
1.placeholder 问题解决方法 对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式,iOS 上会有 date 不会显示 placehol ...
- html5 <input> placeholder 属性
带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <inp ...
- 日期选择时两个日期之间的动态控制--My97datepicker日期选择控件
实现效果:如果先选离店日期,再选入住日期的话,入住日期大于离店日期则离店日期+1天否则离店日期不变,先选入店再选离店离店,离店只能选之后的日期,且两个日期之间最多间隔88天 <div class ...
- 最简单应用的时间日期选择插件---My97DatePicker
最简单的应用:http://www.my97.net/dp/demo/resource/2.1.asp
随机推荐
- 1.用互联网的产品思维打造一本app后端的书
刚刚接触app后端,是做完adidas中国的官方商城的时候,那时不清楚app后端应该怎么架构,只能摸着石头过河,网络上只有一些零散的资料,遇到问题,只能不断地搜索,思考,务必找到解决问题的方法. 在从 ...
- 在使用MFC对话框时遇到的用户交互
有时我们需要点击对话框上的一个按钮的时候,对话框隐藏起来,然后执行完某个操作后,对话框又弹出来, 这时我们可以使用BeginEditorCommand()和CompleteEditorCommand( ...
- 为什么说JAVA中要慎重使用继承
JAVA中使用到继承就会有两个无法回避的缺点: 打破了封装性,迫使开发者去了解超类的实现细节,子类和超类耦合. 超类更新后可能会导致错误. 继承打破了封装性 关于这一点,下面是一个详细的例子(来源于E ...
- jquery 判断一个元素是否在数组中 $.inarry()使用
需要判断一个元素是否在一个数组里: js indexOf()方法 如果存在 则返回该元素的下标值 如果不存在则返回-1 学习源头: http://www.w3school.com.cn/jsref/ ...
- 加密算法:DigestUtils与java MessageDigest
1.使用Spring的DigestUtils public class StringUtilTest { static final String TARGET = "changeme&quo ...
- Django_cookie_session
登录时候后台打印request.COOKIE 1.login页面正确登录的话,后台页面可以获取到浏览器携带的cookie的. 2.第一行的sessionid其实就是cookie值 3.session的 ...
- Android 8.1 源码_启动篇(一) -- 深入研究 init(转 Android 9.0 分析)
前言 init进程,它是一个由内核启动的用户级进程,当Linux内核启动之后,运行的第一个进程是init,这个进程是一个守护进程,确切的说,它是Linux系统中用户控件的第一个进程,所以它的进程号是1 ...
- 【公告】MIP组件审核平台故障-影响说明
故障通报 2017年8月8日 下午14:11,由于机器故障原因,MIP组件审核平台无法提供服务. 2017年8月8日 下午16:46,服务恢复. 故障影响 2017年8月8日下午13:00-14:00 ...
- JAVA使用POI获取Excel的列数与行数
Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程式对Microsoft Office格式档案读和写的功能. 下面这篇文章给大家介 ...
- 从壹开始 [ Id4 ] 之二║ 基础知识集合 & 项目搭建一
前言 哈喽大家又见面啦,感觉好久没更新了,这几天看了一本书<解忧杂货铺>,嗯挺好的,推荐一下