HTML5 Input Date property of Discovery--datepicker (date selection plugin)

I have to say that H5 's input date property is really good to use, before I wrote http://www.cnblogs.com/tu-0718/p/6729274.html This blog has also mentioned, However, although the mobile side of the H5 support is very good, but the PC-side browser to H5 support is very frustrating. Then recently encountered a demand: need a start time and end time, default display month, such as:

The first reaction to think of is the input date property of H5, because the compatibility problem reluctantly abandoned, and then found a very useful plugin:DatePicker,

Note: When using this plug-in, it is important to note that the DatePicker plugin needs more than just the JS file, but the entire folder, such as:

If you put the inside of the JS file alone to introduce the words are not effective, the console will be prompted to find this JS file, the path of the file can not be changed, can change only the name of the folder.

This plug-in calls the Wdatepicker () method to display the date by default, such as:

　　

If you only want to display the year, onclick= "Wdatepicker ({datefmt: ' yyyy-mm ')", as

　　

　　

Ben came here should end, but after the need to add another, said to give the start time and end time set a default time, tested, this plugin does not have the corresponding method can do.

Then I thought of a method, using jquery to get the value of the start time and end time element, and then call the native JS new Date () method, and use tolocaledatestring () to turn once

The code is as follows:

$ ("#beginDate"). Val (new Date (). tolocaledatestring ());$ ("#endDate"). Val (new Date (). tolocaledatestring ());effects such as:　　　　　　　　The Date object method is described in: http://www.w3school.com.cn/jsref/jsref_obj_date.asp I thought this should be possible, the result is that it can not be day, as long as the years, (my heart is broken), the original date method does not have this method. Anxious to the great God for help, the great God is to force Ah,　　given a method to write, just call this method, and then use substr () to intercept it, the code is as follows: 　　

$ ("#beginDate"). Val (Getdatestr (). substr (0,7)); $("#endDate"). Val (Getdatestr (). substr (0,7)); functionGetdatestr (Addyear,addmonth,addday) {//This parameter is new date, can be set or not setAddyear? Addyear:addyear=0; Addmonth? Addmonth:addmonth=0; Addday? Addday:addday=0; varDD =NewDate (); Dd.setfullyear (Dd.getfullyear ()+addyear); Dd.setmonth (Dd.getmonth ()+addmonth); Dd.setdate (Dd.getdate ()+addday); vary =dd.getfullyear (); varm = Dd.getmonth () +1; varD =dd.getdate (); returny+ "-" +m; }

effects such as:　　

　　attached: I have a one-stop service to the bottom bar, in the attached a code, mainly used to determine the date (start time can not be greater than the end time/can not directly select the end time, you need to select the start time)　

$ (document). Ready (function(){         varCreatedatebegin = $ ("#beginDate"); varCreatedateend = $ ("#endDate"); $ (createdateend). Blur (function(){             if(Createdateend.val ()! = "" && createdatebegin.val ()! = "" &&createdateend.val () <Createdatebegin.val ()) {Alert (' Start time cannot be greater than end time! '); $ (createdateend). Val (""); return; }             if((Createdatebegin). val () = = "") {alert (' Please select the Starting time! '); $ (createdateend). Val (""); return; }             if((Createdatebegin). val ()! = ""){                 return;        }         }); $ (Createdatebegin). Blur (function(){             if(Createdateend.val ()! = "" && createdatebegin.val ()! = "" &&createdateend.val () <Createdatebegin.val ()) {Alert (' Start time cannot be greater than end time! '); $ (createdateend). Val (""); return; }             if($ (Createdateend). val ()! = ""){                return;        }         }); });

　　　　

HTML5 Input Date property of Discovery--datepicker (date selection plugin)