H5 How to implement calendar verification

This article will explain in detail about how H5 implements calendar verification function. Xiaobian feels very practical, so share it with you to do a reference, I hope everyone can gain something after reading this article.

Calendar Control Custom Style

HTML5 provides the calendar control function, which reduces the development time, but sometimes it is not as good as it is, we can modify it according to the following code.

Recommendation: Copy the following code segment, create a CSS file separately, so that we can modify it.

/ * Modify Calendar Control Types * / :: – Webkit-DateTime-Edit {Padding: 1PX;} / * Controls * / :: – Webkit-DateTime-Edit -fields-wrapper {background-color: #fff;} / * The area of ​​this area * / :: – webkit-datetime-edit-text {color: # 333; padding: 0 .5em;} / * Is the slash or short horizontal line between the day and month * / :: – webkit-datetime-edit-year-field {color: # 333;} / * Control year text, such as the 2013 four letters occupied Place * / :: – Webkit-datetime-edit-month-field {color: # 333;} / * control month * / :: – webkit-datetime-edit-day-field {color: # 333;} / * Control specific days * / :: – webkit-inner-spin-button {visibility: hidden;} / * This is the * / :: – Webkit-Calendar-Picker-INDICATOR {/ * this is the control under the control. Arrows * /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 {/ * Control Clear button * /}
   
2. Date check function

The termination date cannot be less than the start date, and the date selection range is 7 days, and the remaining time segment is not optional.

Note: The following code segment utilizes jQuery principle

// conversion time type is YYYY-mm-dd function formatdate (strtime) {var Date = New Date STRTIME); var formatedMonth = (“0” + (Date.getMope () + 1)))). SLICE (-2); var formatedDate = (“0” + (Date.getdate ())). SLICE (-2) Return Date.GetFullyEar () + “-” + FormatedMonth + “-” + formatedDate;} // Start Time $ (“# keyword_time_min”). Change (function () {var D1 = new date ($ (this) .val ()); // Get the current timeVAR D2 = New Date (D1); // d2.setfullyear (D2.Getfullyear () + 1); // Current time + 1 year D2.Setdate (D2.Getdate () + 7); // Current time +7 Day D2 = Formator (D2); // Convert D2 to YYYY-MM-DD Format $ (“# keyword_time_max”). Attr (“MAX”, D2); // Maximum time is D2 $ (“# keyword_time_max”). Attr (“min”, $ (this) .val ()); // minimum time is 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 () – 7); // Current Time -7 days D4 = Formator (D4); $ (“# keyword_time_min”). Attr (“MIN”, D4); $ (“# keyword_time_min”). Attr (“MAX”, $ (this) .val () }
   
About how to implement the calendar verification function, share it here, I hope that the above can help everyone, you can learn more. If the article is good, you can share it out to let more people see.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment