H5怎样做出日历校验功能

时间2024-01-23 04:28:05发布访客分类HTML浏览933

导读：收集整理的这篇文章主要介绍了H5怎样做出日历校验功能，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5怎样做出日历校验功能，怎么用H5做出日历校验功能？H5做出日历校验功能的注意事项有哪些，下面就是实战案例，一起来看一下。...

收集整理的这篇文章主要介绍了H5怎样做出日历校验功能，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5怎样做出日历校验功能，怎么用H5做出日历校验功能？H5做出日历校验功能的注意事项有哪些，下面就是实战案例，一起来看一下。

日历控件自定义样式

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());
    }
    );

相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！