input[type='date'] 사용자 정의 스타일 및 달력 확인 기능

이번에는 input[type='date'] 사용자 정의 스타일 및 달력 확인 기능을 가져왔습니다. input[type='date'] 사용자 정의 스타일 및 달력 확인의 Notes는 무엇입니까? 사건을 봐.

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

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

추천 도서:

H5의 기록 모드 사용에 대한 자세한 설명

H5 파일 비동기 업로드

위 내용은 input[type='date'] 사용자 정의 스타일 및 달력 확인 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!