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
随机推荐
- WebJars
WebJarsWebJars是一个很神奇的东西,可以让大家以jar包的形式来使用前端的各种框架.组件. 什么是WebJars 什么是WebJars?WebJars是将客户端(浏览器)资源(JavaSc ...
- 简化异常处理的Throwables类
简化异常处理的Throwables类 有时候, 当我们我们捕获异常, 并且像把这个异常传递到下一个try/catch块中.Guava提供了一个异常处理工具类, 可以简单地捕获和重新抛出多个异常.例如: ...
- 关于MySQL死锁
最近项目中遇到一个问题,使用Spring事务嵌套时,导致MySQL死锁.记录一下,时刻提醒自己. 场景如下, 事务嵌套, 最外层有默认事务, 嵌套一个独立事务, 独立事务和外部事务同时操作一张表.
- BZOJ_1040_[ZJOI2008]骑士_树形DP
BZOJ_1040_[ZJOI2008]骑士_树形DP 题意: Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各 界的赞扬.最近发生了一件可怕的事情,邪 ...
- 命令提示符编译java
先新建一个文件夹kun,kun就是类所在的package.新建一个java文件. HelloWorld.java的代码如下: package kun; public class HelloWorld{ ...
- 死链接检查工具:Xenu 使用教程
一.软件作用 Xenu 全称Xenu’s Link Sleuth,是一款英文软件,界面单一,功能简单,使用方法很容易掌握.虽然看起来简单,但Xenu却拥有强大的功能.Xenu可以对网站的内链进行详细的 ...
- 浅析 .Net Core中Json配置的自动更新
Pre 很早在看 Jesse 的Asp.net Core快速入门的课程的时候就了解到了在Asp .net core中,如果添加的Json配置被更改了,是支持自动重载配置的,作为一名有着严重" ...
- 关于Redis的常见面试题解析
1. 使用redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string,li ...
- kolla 多节点部署 openstack
kolla 介绍 简介 kolla 的使命是为 openstack 云平台提供生产级别的.开箱即用的交付能力.kolla 的基本思想是一切皆容器,将所有服务基于 Docker 运行,并且保证一个容器只 ...
- 基于思科模拟器的AAA配置与验证
拓扑图: 地址表如图所示 三个路由器之间采用ospf协议达到互通 先做ping通测试 由ApingB 由ApingC 配置AAA认证 在R1上 R1(config)#username shuaiqiy ...