jquery There are several date plugins for ,H5 Medium input You can also bring your own date selection . But why write another , There are two reasons , One is that the referenced file is too large , And sometimes it's just a very simple function , The second is to add some custom effects, which are not easy to change .

The function I wrote is relatively simple , You can change the month , There is an appointment effect , You can set an appointment date range , After the compression 1.4kb, First, the last figure , Explain it slowly :

js Code :

$.fn.datebox = function (options) {
var config = {
$valueEle: $("#outputTime"),
$prev: $(".datetitle #up"),
$next: $(".datetitle #down"),
minDate:null,
maxDate:null,
}
config = $.extend(config, options);
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format))
format = format.replace(RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
return format;
};
var self = this;
var $ele = $(this); var maxdate,mindate;
var nstr = new Date();
var ynow = nstr.getFullYear();
var mnow = nstr.getMonth();
var dnow = nstr.getDate();
if(!config.minDate){
mindate=nstr;
}else{
mindate=new Date(config.mindate)
}
if(config.maxDate){
maxdate=new Date(config.maxDate)
} self.isLeap = function (year) {
return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0) : res = (year % 4 == 0 ? 1 : 0));
}
console.log(" The minimum date is :",mindate.format("yyyy-MM-dd"))
console.log(" The maximum date is :",maxdate.format("yyyy-MM-dd"))
console.log(" The current date :",currentDate())
pain();
function pain() {
var n1str = new Date(ynow, mnow, 1); // The first day of the month
var firstday = n1str.getDay(); // What day is the first day of the month
var m_days = new Array(31, 28 + self.isLeap(ynow), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); // The total number of days in each month
var tr_str = Math.ceil((m_days[mnow] + firstday) / 7); // The number of rows required for the table // Print the first line of the form ( There's a week sign )
$("#datetb").remove();
var str = "<table id='datetb' cellspacing='0'><tr><td> Sunday </td><td> Monday </td><td> Tuesday </td><td> Wednesday </td><td> Thursday </td><td> Friday </td><td> Saturday </td></tr>";
for (i = 0; i < tr_str; i++) { // The lines of the form
str += "<tr>";
for (k = 0; k < 7; k++) { // The cells in each row of the table
idx = i * 7 + k; // Cell natural serial number
date_str = idx - firstday + 1; // Calculate the date
(date_str <= 0 || date_str > m_days[mnow]) ? date_str = "&nbsp;" : date_str = idx - firstday + 1; // Filter invalid dates ( Less than or equal to zero 、 Greater than the total number of days in a month )
// Print date : Today's background style
date_str == dnow ? str += "<td class='selected' data-day=" + date_str + ">" + "<div>" + date_str + "</div>" + "<div class='subscribe'> make an appointment </div>" + "</td>" : str += "<td data-day=" + date_str + ">" + date_str + "</td>";
}
str += "</tr>"; // The end of the row of the table
}
str += "<tfoot><tr><td colspan='7'>" + ynow + " year " + (mnow + 1) + " month </td></tr></tfoot>";
str += "</table>"; // End of form
$ele.html(str);
setDate(ynow, mnow, dnow);
} function setDate(y, m, d) {
var current = (new Date(y, m, d, 10, 0, 0)).format("yyyy-MM-dd");
console.log(y, m, d, current);
config.$valueEle.val(current);
}
function currentDate(){
return (new Date(ynow, mnow, dnow, 10, 0, 0)).format("yyyy-MM-dd");
}
self.prev=function(){
var temp = mnow - 1;
if (temp < 0) {
mnow = 11;
ynow--;
} else {
var prevdate=new Date(ynow, mnow-1, 31, 10, 0, 0);
if (prevdate <mindate) {
console.log(" Over the minimum booking date ",prevdate.format("yyyy-MM-dd"))
return;
}
mnow--;
}
if(ynow==mindate.getFullYear()&&mnow==mindate.getMonth()){
var _mday=mindate.getDate();
if(dnow<_mday) dnow=_mday;
}
pain();
}
self.next=function(){
var nextdate=new Date(ynow, mnow+1, 1, 10, 0, 0);
if (nextdate>maxdate) {
console.log(" Beyond the maximum booking date ",nextdate.format("yyyy-MM-dd"))
return ;
}
var temp = mnow + 1;
if (temp > 11) {
mnow = 0;
ynow++;
} else {
mnow++;
}
if(ynow==maxdate.getFullYear()&&mnow==maxdate.getMonth()){
var _mday=maxdate.getDate();
if(dnow>_mday) dnow=_mday;
}
pain();
}
self.seleted=function($td){
if (!$td.hasClass('selected')) {
var day = $td.data("day");
var selectedDate=new Date(ynow, mnow, day, 1, 0, 0);
if (selectedDate<mindate||selectedDate>maxdate) {
console.log(" This date cannot be reserved ");
return;
}
$(".datebox table td").removeClass('selected').children('.subscribe').remove();
$td.addClass('selected');
$td.html('<div>' + $td.html() + '</div><div class="subscribe"> make an appointment </div>');
dnow=day;
setDate(ynow, mnow, day);
}
}
self.getDate=function(){
return currentDate();
} $ele.on("click", "table td", function () {
self.seleted($(this));
});
config.$prev.click(function () {
self.prev();
});
config.$next.click(function () {
self.next();
});
return self;
}

css: You're free to play .

body {
font-family: Helvetica,Microsoft JhengHei;
font-size:1.5rem;
}
*{ padding:; margin:;}
.content {
padding-top: 11%;
font-family: hyxmtj,Microsoft JhengHei;
text-shadow: 0.5px 1px 1px #e3eab7;
}
.datetitle {
width: 100%;
background: #fed700;
text-align: center;
line-height: 3rem;
-moz-border-radius: 1.7rem;
-webkit-border-radius: 1.7rem;
border-radius: 1.7rem;
border-bottom: 0.25rem solid #d1a802;
color: black;
text-shadow: 1px 1px 1px #d1a802;
position: relative;
}
.datetitle:before {
content: "";
position: absolute;
width: 62%;
border-left: 0.5rem solid #d1a802;
border-right: 0.5rem solid #d1a802;
height: 1.5rem;
bottom: -1.5rem;
left:;
margin-left: 17%; }
.datebox{ border:1px solid #d1a802;margin: 0 auto; margin-top: 1.2rem; width:68%; -moz-border-radius:1.5rem; -webkit-border-radius:1.5rem; border-radius:1.5rem; padding:0 1rem; font-size:0.7rem; background:white; text-shadow:none;}
.datebox table{width:100%; border:none;}
.datebox table td{ width: 2rem;height: 2rem;text-align: center;border: 1px solid transparent;}
.datebox table td div{ font-size: small; }
.datebox table td.selected{border:1px solid #deaa5d; color:#deaa5d; }
.datebox table td.selected .subscribe{display:block;}
.datebox table td .subscribe{display:none;}
.datebox table tfoot td{ font-weight: bold;}
.databox #up ,.databox #down {
cursor: pointer;
}
.datetitle #down {
float: right;
margin-right:2rem;
}
.datetitle #up {
float: left;
margin-left:2rem;
}
.datetitle #up:hover ,.datetitle #down:hover {
color: green;
}

released isLeap,next,prev,getdate,seleted Five methods ( There's no need to explain the name ). By default, today is the minimum appointment time .

You can set the maximum booking time in this way :

 var date = $(".datebox").datebox({maxDate:"2016-12-20"});

Similarly, you can set the minimum date .

When changing the month, the date will automatically switch to the date that can be reserved .

demo download :http://files.cnblogs.com/files/stoneniqiu/datebox.zip    If you don't like the style, you can change it yourself . It's very convenient to increase and decrease the function .

Lightweight date plug-in --datebox More articles about

  1. be based on zepto Mobile terminal lightweight date plug-in

    Preface I've done mobile Web All the students of development know , Mobile date selection is a common requirement . stay PC End , We have a lot of choices , The more famous ones are Mobiscroll and jQuery UI Datepicker. Personally , These plug-ins exist ...

  2. ( turn )jQuery Mobile Date plugin in mobile development Mobiscroll 2.3 Instructions

    ( primary )http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile Date plugin in mobile development Mobiscroll ...

  3. jQuery Mobile Date plugin in mobile development Mobiscroll Instructions

    Recent developments in mobile , Use jQuery Mobile , Mobile plug-ins are not as good as Web There are many plug-ins in this aspect , Less choice , Some of them need to be packaged by themselves , But the skill is not enough . Date plugin JQM There are also built-in , But not in style , Only ...

  4. JQuery Date plugin

    JQuery Is a very good script framework , Its rich controls are also very simple to use , The configuration is very flexible . Let's make a date plug-in datapicker Example . 1. download jQuery Needless to say, the core document ,datepicker yes ...

  5. jquery mobile mobiscroll The date plug-in makes use mobiscroll

    Official web site, : http://www.mobiscroll.com/ http://code.google.com/p/mobiscroll/ 1. Lite version Demo: see Demo » download Demo » 2 ...

  6. My97DatePicker Date plugin

    My97DatePicker Is an excellent date plug-in , It can easily achieve a variety of date selection effects , Win over the vast IT The favor of developers . Next, let's talk about its common functions and setting methods . Method / step   Let's start with the simplest configuration method : (1) Next ...

  7. be based on JS Powerful date plug-in Kalendae

    A date plug-in is needed in development , Can be in zepto Next use , You can choose a date period , You can set non optional dates Find a completely satisfied , And based on JS Does not depend on any library . The online demo :http://chipersoft.com/Kalend ...

  8. jsp Date plugin My97DatePicker

    jsp Date plugin My97DatePicker  Powerful date control   Easy to use (2010-10-30 18:59:12) Reprint ▼ label : js javascript Date plugin jsp it classification : jqu ...

  9. jquery ui bootstrap Date plugin

    http://blog.csdn.net/php_897721669/article/details/7404527 Search for “jquery ui How the date plug-in displays the year ”? $("#datepic ...

Random recommendation

  1. android The simulator stops at Waiting for HOME Solution

    Open it directly Android SDK Manager And then from Android SDK Manager Inside tools open Android AVD Manager, Delete in Eclipse Simulator created in . And build a new ...

  2. Keep going [ turn ]php Version of cron Timing task actuator

    Due to server crontab Only to the minute , The starting point of the program is also minutes . It includes but not part of : One . The configuration file : The configuration file is used to return the scheduled task file to be executed , Pay attention to the * Just use it , There are two models , Namely Y-m-d H:i ...

  3. oracle-5- Upgrade steps for

    Steps to upgrade the database 1. Decided to upgrade to that version 2. Make sure the most recent data has been backed up ( Very important ) 3. Install the software upgrade package 4. Start the database in upgrade mode 5. Execute the necessary scripts 6. Check after upgrade

  4. java Novice notes 19 abstract class

    1.Shap package com.yfs.javase; public class Shape /*extends Object */{ // Default inheritance object object Methods inherit all // meter ...

  5. UESTC_ Big brother Qiushi and fast food chain 2015 UESTC Training for Graph Theory&lt;Problem A&gt;

    A - Big brother Qiushi and fast food chain Time Limit: 9000/3000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) S ...

  6. Recover one's original simplicity asp.net mvc (6) - asp.net mvc 2.0 New characteristics

    original text : Recover one's original simplicity asp.net mvc (6) - asp.net mvc 2.0 New characteristics [ Index page ][ Source download ] Recover one's original simplicity asp.net mvc (6) - asp.net mvc 2.0 New characteristics ...

  7. vue Of $nextTick Use summary ,this.$refs by undefined Solutions for ,element Ui Tree control for setCheckedKeys Method cannot be used

    In fact this 3 One is about a problem , Let's talk about the problem first , I am here watch Set up a monitor in , When the pop-up window opens , Automatically add tree default selection , But it's strange this.$refs by undefined, natural setCheckedKeys Unable to make ...

  8. IntelliJ IDEA Use the tutorial ( Very comprehensive )

    IntelliJ IDEA Use the tutorial ( Very comprehensive ) I won't introduce this editor any more . Just start new maven hello world Of Java web The project! You have to have... On your computer jdk1.7, perhaps 1.8, Then is mav ...

  9. redis One of my orders

    Reference resources http://redisdoc.com/ Reference resources http://redis.io/commands Commands related to connection operations Default direct connection   Remote connection -h 192.168.1.20 -p 6379 ping ...

  10. Codeforces729D(SummerTrainingDay01-F)

    D. Sea Battle time limit per test 1 second memory limit per test 256 megabytes input standard input ...