input[type='date'] benutzerdefinierter Stil und Kalenderüberprüfungsfunktion

Dieses Mal bieten wir Ihnen die Funktion zur Eingabe[type='date']-Benutzerdefinierten Stil- und Kalenderüberprüfung, Eingabe[type='date']-Benutzerdefinierten Stil- und Kalenderüberprüfung Notizen Was sind sie aktuell? Werfen wir einen Blick darauf.

1. Benutzerdefinierter Kalendersteuerungsstil

HTML5 bietet die Kalendersteuerungsfunktion, die die Entwicklungszeit verkürzt, aber manchmal ist ihr Stil tatsächlich nicht so gut wie Sie möchten, wir können es gemäß dem folgenden Code selbst ändern.

Vorschlag: Kopieren Sie das Code-Snippet unten und erstellen Sie zur Vereinfachung eine separate CSS-Datei.

/*  修改日历控件类型 */
::-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. Datumsüberprüfungsfunktion

Das Enddatum darf nicht kleiner als das Startdatum sein, der Datumsauswahlbereich beträgt 7 Tage , und der Rest der Zeit ist Abschnitt nicht optional.

Hinweis: Der folgende Codeausschnitt verwendet das Jquery-Prinzip

//转换时间类型为 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());
    });

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung des Verlaufsmodus in H5

Asynchroner Upload von H5-Dateien

Das obige ist der detaillierte Inhalt voninput[type='date'] benutzerdefinierter Stil und Kalenderüberprüfungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!