So erstellen Sie eine Kalenderüberprüfungsfunktion in H5

Dieses Mal zeige ich Ihnen, wie Sie eine Kalenderüberprüfungsfunktion in H5 erstellen. Was sind die Vorsichtsmaßnahmen für H5, um die Kalenderüberprüfungsfunktion zu implementieren? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Benutzerdefinierter Kalendersteuerungsstil

HTML5 bietet die Kalendersteuerungsfunktion, die die Entwicklungszeit verkürzt, aber manchmal ist ihr Stil tatsächlich unbefriedigend. Wir können ihn 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 die restlichen Zeiträume sind nicht wählbar.

Hinweis: Die folgenden Codeausschnitte verwenden Jquery-Prinzipien

//转换时间类型为 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 nach dem Lesen dieser Fälle beherrschen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Verwandte Lektüre:

Was sind die neuen interaktiven Funktionen von H5 und C3

H5-Tag-Zusammenfassung auf Blockebene

So erzeugen Sie einen Drag-Effekt in H5

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Kalenderüberprüfungsfunktion in H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!