Home > Article > Web Front-end > input[type='date'] custom style and calendar verification function
This time I will bring you input[type='date'] custom style and calendar verification function, input[type='date'] custom style and calendar verification Notes What are they? Here are actual cases. Let’s take a look.
1. Calendar control custom style
HTML5 provides the calendar control function, which reduces development time, but sometimes its style is indeed not as good as As you like, we can modify it ourselves according to the code below.
Suggestion: Copy the code snippet below and create a separate css file for our convenience.
/* 修改日历控件类型 */
::-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. Date verification function
The end date cannot be less than the start date, the date selection range is 7 days, and the remaining time periods are Not optional.
Note: The following code snippet uses Jquery principle
//转换时间类型为 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());
});
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the use of History mode in H5
The above is the detailed content of input[type='date'] custom style and calendar verification function. For more information, please follow other related articles on the PHP Chinese website!