Jquery Date Selector Plug-in usage instructions

Last Update:2017-01-13 Source: Internet

Author: User

Tags extend

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This jquery plugin can help developers provide a quick date selector (pictured below) to help developers simply implement date choices that allow users to insert dates without having to fill out their own dates.

Official website: http://jonathanleighton.com/projects/date-input/

Chinese support:

The code is as follows	Copy Code
Jquery.extend (dateinput.default_opts,{ Month_names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], Short_month_names: ["One", "two", "three", "four", "five", "six", "seven", "eight", "Nine", "Ten", "11", "12"], Short_day_names: ["One", "two", "three", "four", "five", "six", "Day"] });

Description: The default is the date format is very bad, need to modify.

All code:

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Calendar </title>
<script type= "Text/javascript" src= "Jquery-1.3.2.js" ></script>
<script type= "Text/javascript" src= "Jquery.date_input.js" ></script>
<link rel= "stylesheet" href= "Date_input.css" type= "Text/css" >
<script>
Jquery.extend (dateinput.default_opts, {
Month_names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
Short_month_names: ["One", "two", "three", "four", "five", "six", "seven", "eight", "Nine", "Ten", "11", "12"],
Short_day_names: ["One", "two", "three", "four", "five", "six", "Day"],
Datetostring:function (date) {
var month = (Date.getmonth () + 1). ToString ();
var dom = Date.getdate (). toString ();
if (month.length = = 1) month = "0" + month;
if (dom.length = = 1) dom = "0" + dom;
return date.getfullyear () + "-" + month + "-" + dom;
}

});

$ (function () {
$ (". Biuuu1"). Date_input ();
$ (". Biuuu2"). Date_input ();
});
</script>

<body>
<input type= "text" name= "date"/>
<input type= "text" name= "date"/>
</body>

There's also a jquery calendar plugin

Instance

1, flat mode, a single choice, the week of Monday began.

The code is as follows

Copy Code

$ (' #date '). DatePicker ({
Flat:true,
Date: ' 2012-07-31 ',
Current: ' 2012-07-31 ',
Calendars:1,
Starts:1
});

2. Flat mode, multiple selection, inactive date, special day, beginning of Sunday this week.

The code is as follows

Copy Code

$ (' #date2 '). DatePicker ({
Flat:true,
Date: [' 2012-07-31 ', ' 2012-07-28 '],
Current: ' 2012-07-31 ',
Format: ' y-m-d ',
Calendars:1,
Mode: ' Multiple ',
Onrender:function (date) {
return {
Disabled: (date.valueof () < now.valueof ()),
ClassName:date.valueOf () = = Now2.valueof ()? ' Datepickerspecial ': false
}
},
starts:0
});

$ (' #date3 '). Datepickerclear ();

3, plate mode, selection range, 3 calendar.

The code is as follows

Copy Code

$ (' #date3 '). DatePicker ({
Flat:true,
Date: [' 2012-07-28 ', ' 2012-07-31 '],
Current: ' 2012-07-31 ',
Calendars:3,
Mode: ' Range ',
Starts:1
});

4. Connect to a text field and use the value of the callback function to select from the field to the date of the update.

The code is as follows

Copy Code

$ (' #inputDate '). DatePicker ({
Format: ' m/d/y ',
Date: $ (' #inputDate '). Val (),
Current: $ (' #inputDate '). Val (),
Starts:1,
Position: ' R ',
Onbeforeshow:function () {
$ (' #inputDate '). Datepickersetdate ($ (' #inputDate '). Val (), true);
},
Onchange:function (formated, dates) {
$ (' #inputDate '). Val (formated);
$ (' #inputDate '). Datepickerhide ();
}
});

Options

The argument list. All parameters are optional.

EventName	String	The required event to trigger the date selector. Default: "Click '
Date	String, Date or array	The selected date (S) is a string (which will be converted to the base de format of the Date object suplied) and a single selected date object, array, string, or Date object
Flat	Boolean	Whether or not the date selector is added to an element or triggered by an event. Default to False
Start	Integer	The beginning of the day's work week. Default value 1st (Monday)
Prev	String	HTML is inserted into the previous link. Default to "◀" (UNICODE Black left arrow)
Next	String	HTML is inserted into the next link. Default to "▶" (Unicode Black Right arrow)
Mode	string [' Single ' \| ' Multiple ' \| ' Range ']	Date selection mode. Default "single"
View	string [' Days ' \| ' Months ' \| ' Years ']	Start viewing mode. Default ' Day '
Calendars	Integer	The number of renders in the date selector of the calendar. Default value 1
Format	String	Date format. Default value ' y-m-d '
Position	string [' Top ' \| ' Left ' \| ' Right ' \| ' Bottom ']	The activation element (non-planar mode) of the relative position of the date selector. Default "Bottom"
Locale	Hash	Location: Provide a hash key "days", "Daysshort", "Daysmin", "Month", "Monthsshort", "Week". Default English
OnShow	function	Trigger Display date Selector when callback function
Onbeforeshow	function	The date selector that fires before the callback function displays
Onhide	function	The trigger date selector is hidden when the callback function
OnChange	function	callback function is the date when the change is triggered
OnRender	function	When the callback function is triggered, the date is rendered in a calendar. It should return and hash the key: "Select" To select the date, "disabled" to disable the date ", Class name" Extra CSS Class

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More