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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 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 insert语法详解
2008/06/07 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
vue router demo详解
2017/10/13 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
基于python 字符编码的理解
2017/09/02 Python
python素数筛选法浅析
2018/03/19 Python
python 用下标截取字符串的实例
2018/12/25 Python
python3 实现调用串口功能
2019/12/26 Python
python文件排序的方法总结
2020/09/13 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
仙境之桥观后感
2015/06/16 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python