不得不说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(new Date().toLocaleDateString());
    $("#endDate").val(new Date().toLocaleDateString());
 
  效果如下图:
    
  
   
 
 
  本以为这样应该可以了吧,结果又说不能要日,只要年月,(我的内心是崩溃的), 原生Date方法也没有这个方法。焦急之余向大神求助,大神就是给力啊,
  给了一个自己写的方法,只要调用这个方法,然后在用substr()截取就可以了,代码如下:
  

  $("#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(日期选择插件)的更多相关文章

  1. HTML5 INPUT新增属性

    HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证.input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅.我们先看下i ...

  2. 【jquery】多日期选择插件easyui date

    1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/d ...

  3. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

  4. 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

    1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...

  5. 上传文件,不依赖 Jquery flash 插件,用到HTML5 input 新属性实现过滤文件格式、同时上传多个文件

    1.样式 2.js 3.后台处理 4.效果图 一.样式 <style> .divUpload { position: relative; } .divUploadFirst { width ...

  6. HTML5 input date 移动端 IOS 不支持问题

    1.placeholder 问题解决方法 对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式,iOS 上会有 date 不会显示 placehol ...

  7. html5 <input> placeholder 属性

    带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <inp ...

  8. 日期选择时两个日期之间的动态控制--My97datepicker日期选择控件

    实现效果:如果先选离店日期,再选入住日期的话,入住日期大于离店日期则离店日期+1天否则离店日期不变,先选入店再选离店离店,离店只能选之后的日期,且两个日期之间最多间隔88天 <div class ...

  9. 最简单应用的时间日期选择插件---My97DatePicker

    最简单的应用:http://www.my97.net/dp/demo/resource/2.1.asp

随机推荐

  1. PHP 7.3 我们将迎来灵活的 heredoc 和 nowdoc 句法结构

    php.net RFC 频道已经公布了 PHP 7.3 的 Heredoc 和 Nowdoc 语法更新,此次更新专注于代码可读性: Heredoc 和 Nowdoc 有非常严格的语法,有些时候这令很多 ...

  2. FPGA学习笔记(二)——FPGA学习路线及开发流程

    ###### [该随笔部分内容转载自小梅哥]       ######### 一.FPGA学习路线 工具使用 -> 语法学习 -> 逻辑设计 -> IP使用 ->接口设计 -& ...

  3. spring security4.2.2的maven配置+spring-security配置详解+java源码+数据库设计

    最近项目需要添加权限拦截,经讨论决定采用spring security4.2.2!废话少说直接上干货! 若有不正之处,请谅解和批评指正,不胜感激!!!!! spring security 4.2.2文 ...

  4. LeetCode Javascript实现 344. Reverse String 292. Nim Game 371. Sum of Two Integers

    344. Reverse String /** * @param {string} s * @return {string} */ var reverseString = function(s) { ...

  5. 如何修改Tomcat默认端口?

    修改的原因: 关于8080端口:8080端口同80端口,是被用于WWW代理服务的,可以实现网页浏览,经常在访问某个网站或使用代理服务器的时候,会加上":8080"端口号.另外Apa ...

  6. 用java8重写Arrays.sort(oldWay, new Comparator<String>(){@Override public int compare(String s1, String s2)});

    参考https://www.liaoxuefeng.com/article/001411306573093ce6ebcdd67624db98acedb2a905c8ea4000/ Java 8终于引进 ...

  7. 聊聊Socket、TCP/IP、HTTP、FTP及网络编程

    1 这些都是什么 既然是网络传输,涉及几个系统之间的交互,那么首先要考虑的是如何准确的定位到网络上的一台或几台主机,另一个是如何进行可靠高效的数据传输.这里就要使用到TCP/IP协议. 1.1 TCP ...

  8. 浅析ajax原理与用法

    1 ajax原理 Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建 动态网页的技术,目的是显示动态局部刷新.通过XML ...

  9. Hadoop配置第1节-集群网络配置

    Hadoop-集群网络配置 总体目标:完成zookeeper+Hadoop+Hbase 整合平台搭建   进度:1:集群网络属性配置2:集群免密码登陆配置3:JDK的安装4:Zookeeper的安装5 ...

  10. 循环神经(LSTM)网络学习总结

    摘要: 1.算法概述 2.算法要点与推导 3.算法特性及优缺点 4.注意事项 5.实现和具体例子 6.适用场合 内容: 1.算法概述 长短期记忆网络(Long Short Term Memory ne ...