Home > Others

Jquery date Selector

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

There are many calendar plug-ins in jquery. Next I will introduce you to the Jquery date selector plug-in instructions. For more information, see.


This jQuery plug-in can help developers provide a quick date selector (for example) to help developers easily implement date selection, allowing users to insert dates without entering 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: ["May January", "May February", "May March", "May April", "May", "May June", "May July", "May August", "May September ", "August October", "August November", "August December"],
Short_month_names: ["1", "2", "3", "4", "5", "6", "7", "8", "9 ", "10", "11", "12"],
Short_day_names: ["1", "2", "3", "4", "5", "6", "day"]
});

Note: The default date format is poor and needs to be modified.

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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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: ["May January", "May February", "May March", "May April", "May", "May June", "May July", "May August", "May September ", "August October", "August November", "August December"],
Short_month_names: ["1", "2", "3", "4", "5", "6", "7", "8", "9 ", "10", "11", "12"],
Short_day_names: ["1", "2", "3", "4", "5", "6", "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 ();
$ (". Biuu2"). date_input ();
});
</Script>
</Head>

<Body>
<Input type = "text" name = "date"/>
<Input type = "text" name = "date"/>
</Body>
</Html>


There is also a jquery calendar plug-in

Instance


1. Flat Panel mode, a single choice, starting from the week of Monday.

 

The Code is as follows: Copy code

 

$ ('# Date'). DatePicker ({
Flat: true,
Date: '2014-07-31 ',
Current: '2017-07-31 ',
Calendar: 1,
Starts: 1
});


2. tablet mode, multiple options, disabled date, special days, and Sunday starting from this week.

 

The Code is as follows: Copy code

 

$ ('# Date2'). DatePicker ({
Flat: true,
Date: ['2014-07-31 ', '2014-07-28'],
Current: '2017-07-31 ',
Format: 'Y-m-d ',
Calendar: 1,
Mode: 'Multiple ',
OnRender: function (date ){
Return {
Disabled: (date. valueOf () <now. valueOf ()),
ClassName: date. valueOf () = now2.valueOf ()? 'Dateickerspecial ': false
}
},
Starts: 0
});

$ ('# Date3'). DatePickerClear ();

3. In flat mode, select a range of three calendars.

 

The Code is as follows: Copy code

 

$ ('# Date3'). DatePicker ({
Flat: true,
Date: ['2014-07-28 ', '2014-07-31'],
Current: '2017-07-31 ',
Calendar: 3,
Mode: 'range ',
Starts: 1
});

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

 

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 ();
}
});

Option

Parameter List. All parameters are optional.

EventName String The date selector triggered by the required event. Default Value: "click'
Date String, Date or array The selected Date (S) is a string (will be converted to the Date object based on the German format suplied) and a single selected Date object, array, string or Date object
Flat Boolean Whether the date selector is added to an element or triggered by an event. The default value is false.
Start Integer The start of the daily work week. Default Value: 1 day (Monday)
Prev String Insert HTML to the previous link. The default value is"◀"(UNICODE black left arrow)
Next String Insert HTML to the next step. The default value is"▶"(UNICODE black right arrow)
Mode String ['single '| 'Multiple' | 'range'] Date selection mode. The default value is "single"
View String ['days' | 'months' | 'ears'] Start viewing mode. Default 'day'
Calendars Integer The number of data displayed 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 of the relative position of the date selector (non-flat mode ). Default "bottom"
Locale Hash Location: Provides hash keys "day", "daysShort", "daysMin", "month", "monthsShort", and "Week ". Default English
OnShow Function The display date selector is triggered when the callback function is used.
OnBeforeShow Function Display of the date selector triggered before the callback function
OnHide Function The trigger date selector is hidden when the callback function is called.
OnChange Function The callback function is triggered on a change date.
OnRender Function The trigger date of the callback function is displayed in a calendar. It should return and hash keys: "select" to select a date, "disabled" to disable the date, class name "Additional 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.

Related Keywords:
random date selector jquery date function format jquery get date time jquery current date time jquery parse date jquery convert string to date date time format in jquery

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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