Entrée [Type = 'Date'] dans le code d'implémentation de la fonction de vérification personnalisée HTML5 et de la fonction de vérification du calendrier

HTML5 fournit une fonction de contrôle du calendrier et réduit le temps de développement, mais parfois son style n'est vraiment pas satisfaisant, nous pouvons le modifier par nous-mêmes selon le code suivant.

Suggestion: Copiez le segment de code suivant et établissez un fichier CSS séparément pour nous faciliter pour modifier.

 / * Modifiez le type de type de contrôle du calendrier * / :: -webkit-datetime-edit {padding: 1px;} / * contrôler la zone d'édition * / :: -webkit-dates-feelds-wrapper {background-Color: #fff ;;} / * Contrôlez ce domaine de l'année, du mois, du mois et du jour * / :: -webkit-dates-edit-text {couleur: # 333; ou court ou court du contrôle de l'année, du mois et du jour la ligne horizontale * / :: -webkit-datetime-edit-year-champ {couleur: # 333;} / * contrôle le texte annuel, comme l'endroit occupé par les quatre lettres de 2013 * / :: -Month-champ {Color: # 333;} / * Mois de contrôle * / :: -webkit-datetime-day-champ {couleur: # 333;} / * Contrôle les jours spécifiques * / :: - webkit-inner- spin-button {visibilité: caché;} / * Ceci est le contrôle des petites flèches des flèches supérieures et inférieures * / :: -webkit-calendar-picker-identicator {/ * Ceci est le Contrôle de la flèche inférieure * / Border: 1px solide #ccc; -Gradient (haut, # f0f0f00, # e6e6e6);

La date de résiliation ne peut pas être inférieure à la date de début, la portée de la sélection de la date est de 7 jours et le reste du délai n'est pas disponible.

注：下述代码段利用Jquery原理

// Le type de temps de conversion est le formatdate de fonction Yyyy-mm-dd (strtime) {var date = new Date (strtime); = (0+ (date.getDate ()). Slice (-2); return date.getlyar () + - + FormatedMonth + - + FormatedDate;} // Time de début $ (#keyword_time_min) .c haange (function () {{ var d1 = new date ($ (this) .Val ()); // Get the current time var d2 = new date (d1); // d2.setfullyear (d2.getfullyear ()+1); // The current Temps +1 année D2.SetDate (D2.GetDate () +7); )); . (d4.getDate () -7);

The above is the implementation code of the INPUT [type = 'date'] custom style and calendar verification function in html5 introduced by Xiaobian. I hope it will be helpful to everyone. If you have any questions, please leave me a message, small L'éditeur a répondu à tout le monde à temps. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!