HTML5中input[type='date']自定义样式与日历校验功能的实现代码


Posted in HTML / CSS onJuly 11, 2017

1.日历控件自定义样式

HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改。

建议:复制下面的代码段,单独建立一个css文件,方便我们修改。

/*  修改日历控件类型 */
::-webkit-datetime-edit { padding: 1px;}  /*控制编辑区域的*/
::-webkit-datetime-edit-fields-wrapper { background-color: #fff; }    /*控制年月日这个区域的*/
::-webkit-datetime-edit-text { color: #333; padding: 0 .5em; }  /*这是控制年月日之间的斜线或短横线的*/
::-webkit-datetime-edit-year-field { color: #333; }    /*控制年文字, 如2013四个字母占据的那片地方*/   
::-webkit-datetime-edit-month-field { color: #333; }    /*控制月份*/
::-webkit-datetime-edit-day-field { color: #333; }    /*控制具体日子*/
::-webkit-inner-spin-button { visibility: hidden; }    /*这是控制上下小箭头的*/
::-webkit-calendar-picker-indicator {      /*这是控制下拉小箭头的*/
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: inset 0 1px #fff, 0 1px #eee;
    background-color: #eee;
    background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
    color: #666;
}
::-webkit-clear-button {    /*控制清除按钮*/
}

2.日期校验功能

终止日期不能小于起始日期,日期选择范围为7天,其余时间段为不可选。

注:下述代码段利用Jquery原理

//转换时间类型为 yyyy-mm-dd
    function FormatDate (strTime) {
        var date = new Date(strTime);
         var formatedMonth = ("0" + (date.getMonth() + 1)).slice(-2);
         var formatedDate = ("0" + (date.getDate())).slice(-2);
        return date.getFullYear()+"-"+formatedMonth+"-"+formatedDate;
    }
//开始时间
    $("#keyword_time_min").change(function(){
            var d1=new Date($(this).val());            //获取当前时间
            var d2=new Date(d1);                                        
            // d2.setFullYear(d2.getFullYear()+1);      //当前时间+1年
            d2.setDate(d2.getDate()+7);             //当前时间+7天
            d2=FormatDate(d2);                      //转换d2为YYYY-MM-DD格式
            $("#keyword_time_max").attr("max",d2); //最大时间为d2
            $("#keyword_time_max").attr("min",$(this).val()); //最小时间为当前时间
    });
//终止时间
$("#keyword_time_max").change(function(){
            var d3=new Date($(this).val()); 
            var d4=new Date(d3);
            // d4.setFullYear(d4.getFullYear()-1);
            d4.setDate(d4.getDate()-7);             //当前时间-7天
            d4=FormatDate(d4);
            $("#keyword_time_min").attr("min",d4);
            $("#keyword_time_min").attr("max",$(this).val());
    });

以上所述是小编给大家介绍的HTML5中input[type='date']自定义样式与日历校验功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 #HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 #HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 #HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 #HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 #HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 #HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 #HTML / CSS
You might like
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
PHP面向对象法则
2012/02/23 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
php获取根域名方法汇总
2014/10/28 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
如何手写一个简易的 Vuex
2020/10/10 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python构建自定义回调函数详解
2017/06/20 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
高二数学教学反思
2016/02/18 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python
nginx搭建NFS网络文件系统
2022/04/14 Servers