Shulou(Shulou.com)06/03 Report--

This article is about how HTML5 implements custom styles and calendar verification. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Calendar control custom style

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

Suggestion: copy the following code snippet and create a separate css file for us to modify.

/ * modify the calendar control type * /::-webkit-datetime-edit {padding: 1px;} / * Control the editing area * /::-webkit-datetime-edit-fields-wrapper {background-color: # fff;} / * Control the year, month and day of this area * /::-webkit-datetime-edit-text {color: # 333; padding: 0.5em } / * this is the * /::-webkit-datetime-edit-year-field {color: # 333;} / * control year text, such as the area occupied by four letters in 2013 * /::-webkit-datetime-edit-month-field {color: # 333;} / * Control month * /::-webkit-datetime-edit-day-field {slash: # 333; } / * Control the specific date * /::-webkit-inner-spin-button {visibility: hidden;} / * this is the * /::-webkit-calendar-picker-indicator {/ * this is the * / 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 * /}

two。 Date check function

The end date cannot be less than the start date, the date selection range is 7 days, and the rest of the time period is unselectable.

Note: the following code snippet uses the principle of Jquery

/ / the conversion time type is 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 } / / start time $("# keyword_time_min") .change (function () {var d1=new Date ($(this). Val ()); / / get the current time var d2=new Date (D1); / / d2.setFullYear (d2.getFullYear () + 1) / / 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") .attr ("max", D2) / / maximum time is d2 $("# keyword_time_max"). Attr ("min", $(this). Val (); / / minimum time is current time}); / / end 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); / / current time-7 days d4=FormatDate (d4); $("# keyword_time_min"). Attr ("min", d4); $("# keyword_time_min"). Attr ("max", $(this). Val ()) Thank you for your reading! On "HTML5 how to achieve custom style and calendar check function" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.