How to Use the datepicker plug-in of Jquery UI

How to Use the datepicker plug-in of Jquery UI

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:

 

<Script type = text/javascript src = js/jquery-1.10.2.min.js> </script> <script src = js/calendar. js> </script> <Script type = text/javascript >$ (# datepicker). datepicker (); </script>
You can also display the focus in the text box and make some modifications:

 

 

 <Script src = js/custom. min. js> </script>

 

Modify the div part as follows:

Date selection:

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.

 

<Script type = text/javascript> $ (# datepicker ). datepicker ({showMonthAfterYear: true, // year before, month after yearSuffix: Year, // Add the suffix year prevText: On January, // The text nextText displayed with the mouse over the flip-over button: next month, January 1, monthNames: [January 1, January 1, January 1, January 1, January 1, January 1, november, December,], // display the month in Chinese // display the week in Chinese (this order is required, otherwise the date has an error) dayNamesMin: [Day, one, two, three, 4, 5, 6,], // display the date format in the text box dateFormat: yy-mm-dd,}); </script>

Modified Effect

 

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

 

ShowOn: button, // Add a selection button after the text box

 

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

 

ButtonText: date, // set the text of the select button buttonImage: css/images/animated-overlay.gif, // set the image for the button

 

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

 

// 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 default value is FALSEbuttonImageOnly: true,

 

You can also select the month and year as needed.

 

ChangeYear: true, // Boolean value, whether the year changeMonth: true can be selected, // Boolean value, whether the month can be selected

 

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

 

// When changeMonth is TRUE, the abbreviation of the month is monthNamesShort: [,].

View results

 

You can also set the selected year range.

 

// When changeYear is 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,

You can also add a panel.

 

 

ShowButtonPanel: true, // whether to display the Panel

 

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

 

// Set the Panel to return the current day's text. Only showButtonPanel: true will display currentText: Today, // set the Panel to close the Panel text, only showButtonPanel: true to show closeText: disabled,