집 > 기사 > 웹 프론트엔드 > H5에서 캘린더 확인 기능을 만드는 방법

H5에서 캘린더 확인 기능을 만드는 방법

php中世界最好的语言원래의: 2018-01-12 09:41:332549검색

이번에는 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());
    });

이 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요.