Input [type = 'date'] in html5 custom style and calendar verification function implementation code

HTML5 provides a calendar control function and reduces development time, but sometimes its style is really not satisfactory, we can modify it by ourselves according to the following code.

Suggestion: Copy the following code segment and establish a CSS file separately to facilitate us to modify.

 /*Modify the type of calendar control type*/:: -WEBKIT-DATETIME-EDIT {padding: 1px;}/*Control the editing area*/:: -webkit-dates-feelds-wrapper {background-color: #fff ;; } /*Control this area of ​​the year, month, month and day* /:: -Webkit-dates-edit-text {color: #333; padding: 0.5em;} /*This is the oblique line or short or short of the control of the year, month and day The horizontal line*/:: -weBKit-Datetime-Edit-Year-Field {Color: #333;}/*Controls the annual text, such as the place occupied by the four letters in 2013*/:: -Month-Field {color: #333;} /*Control month* /:: -WEBKIT-DATETIME-DAY-FIELD {color: #333;} /*Control specific days* /::-webkit-inner- spin-button {Visibility: Hidden;} /*This is the control of small arrows of the upper and lower arrows* /:: -Webkit-Calendar-Picker-identicator { /*This is the control of the lower arrow* /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, #F0F0F00, #e6e6e6); color: # 666;} :: -webkit-class-button { /*Control Clear button* /}

The termination date cannot be less than the starting date, the scope of the date selection is 7 days, and the rest of the time period is unavailable.

Note: The following code segment uses jQuery principle

 // The conversion time type is yyyy-mm-dd function formatdate (strtime) {var date = new date (strtime); var form 50month = (date.getmonth () + 1)). Slice (-2); VAR Formateddate = (0+(date.getdate ()). Slice (-2); Return date.getfullyear ()+-+FormatedMonth+-+Formateddate;} // Start time $ (#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 time +1 year d2.setdate (d2.getdate ()+7); // Current time+7 days d2 = formatdate (d2); // Convert d2 to yyyy-mm-dd format $ (#Keyword_time_max). , D2); // The maximum time is d2 $ (#Keyword_time_max) .attr (min, $ (this) .Val ()); // The smallest time was the current time}); // Termination time $ (#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); // The current time-7 days d4 = formatdate (d4); $ (#keyword_time_min) .attr (min, d4); .val ());});

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 The editor replied to everyone in time. Thank you very much for your support for the VEVB Wulin website!