How to Use the datepicker plug-in of Jquery UI, jquerydatepicker

How to Use the datepicker plug-in of Jquery UI, jquerydatepicker

Http://www.ido321.com/375.html

Jquery UI is a rich array of Jquery plug-ins, and each part of the UI can be separated and used independently, which is not an advantage of many other Jquery plug-ins. Recently I learned about the datepicker plug-in the UI. This date selection/calendar display plug-in is very useful. Let's take a look at the effect:

<Span style = "font-size: 18px;"> <! DOCTYPE> 

You can also display the focus in the text box and make some modifications:


<! -- The text box gets the js file to be imported for the focus display calendar --> <script src = "js/custom. min. js"> </script>

Modify the div part as follows:
Date Selection: <input type = 'text' id = 'dateicker'/>

Others remain unchanged, refresh the browser, and the effect


This is obviously not in line with our habits. We need to modify js to make it fit our usage habits.

<Span style = "font-size: 18px;"> <script type = "text/javascript" >$ ("# datepicker "). datepicker ({showMonthAfterYear: true, // year before, month after yearSuffix: "year", // Add suffix year prevText: "last month ", // text nextText: "Next month", monthNames: ["January", "may ", "August",], // display the month in Chinese // display the week in Chinese (the order must be followed; otherwise, the date has an error) dayNamesMin: ["day", "1", "2 ", "3", "4", "5", "6",], // display the date format in the text box dateFormat: "yy-mm-dd ",}); </script> </span>

Modified Effect


For text boxes, the date is displayed when the focus is obtained by default. You can also add a button later.

<Span style = "font-size: 18px;"> showOn: "button", // Add a selection button after the text box </span>



You can add an image or modify text to beautify the button.

<Span style = "font-size: 18px;"> buttonText: "date", // set the text of the select button buttonImage: "css/images/animated-overlay.gif ", // set the image for the button </span>

If you only want to display images, add the following code:

<Span style = "font-size: 18px;"> // Boolean value: whether to display the image as a button. If it is set to FALSE, the image is displayed as a button. If it is set to TRUE, the image is displayed separately. The default value is FALSEbuttonImageOnly: true, </span>



You can also select the month and year as needed.

<Span style = "font-size: 18px;"> changeYear: true, // Boolean value, whether the year changeMonth: true can be selected, // Boolean value, select a month </span>



Do not like English? OK. replace it with a number.

<Span style = "font-size: 18px;"> // when changeMonth is TRUE, the abbreviation of the month is monthNamesShort: ["01", "02", "03 ", "04", "05", "06", "07", "08", "09", "10", "11", "12"], </span>
View results


You can also set the selected year range.

<Span style = "font-size: 18px;"> // when changeYear is set to true, set the year range. c indicates the current year, plus or minus 10 indicates the current year after the last 10 years and before the last 10 years yearRange: "C-10: c + 10", </span>

You can also add a panel.


<Span style = "font-size: 18px;"> showButtonPanel: true, // whether to display the Panel </span>



If you do not like English, you can change it to Chinese.

<Span style = "font-size: 18px;"> // the text of the current day is returned on the settings panel. Only showButtonPanel: true will display currentText: "Today ", // set the text of the close panel. closeText: "close" is displayed only when showButtonPanel: true. </span>


These are also frequently used. If you need other functions, you can modify js by yourself. I have packaged the above Code and the datepicker extracted from the ui and can directly apply it to your project. If you need it, you can download it from the following link:
Fork Git: https://github.com/dwqs/datepicker
Http://download.csdn.net/detail/u011043843/7809973 (CSDN)
Baidu: http://pan.baidu.com/s/1bnGl07t











JQuery UI Datepicker control usage
Jsp page date pop-up box: (easyUI)
Write class: class = "easyui-datebox"
Introduction: <script type = "text/javascript"
Src = "$ {contextPath}/_ js/jqezui/local/easyui-lang-zh_CN.js"> </script>

Datebos.html:
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> jQuery EasyUI </title>
<Link rel = "stylesheet" type = "text/css" href = "../themes/default/easyui.css">
<Link rel = "stylesheet" type = "text/css" href = "../themes/icon.css">
<Script type = "text/javascript" src = "../jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript" src = ".../jquery. easyui. min. js"> </script>
<Script>
Function disable (){
$ ('# Dd'). datebox ('disable ');
}
Function enable (){
$ ('# Dd'). datebox ('enable ');
}
</Script>
</Head>
<Body>
<H1> DateBox <Div style = "margin-bottom: 10px;">
<A href = "#" onclick = "disable ()"> disable & l ...... remaining full text>

Datepicker plug-in jquery
1. compression is generally used. Separate introduction is not only unnecessary, but also occupies http requests and consumes resources. jquery. ui. min. js is generally introduced.
2. You can see the official API, minDate, and maxDate attributes.
Reference: jqueryui.com/demos/datepicker/