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特性绘制简易版围棋效果
Sep 28 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
CSS 伪元素::marker详解
Jun 26 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框架Phpbean说明
2008/01/10 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
[原创]图片分页查看
2006/08/28 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
浅谈Python数据类型之间的转换
2016/06/08 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
深入了解python中元类的相关知识
2019/08/29 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
财务部岗位职责
2013/11/19 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
消防应急演练方案
2014/02/12 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
雾霾停课通知
2015/04/24 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
浅谈react useEffect闭包的坑
2021/06/08 Javascript
Nginx反向代理配置的全过程记录
2021/06/22 Servers
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js
python解析照片拍摄时间进行图片整理
2022/07/23 Python