JQuery Datepicker date selection plug-in Usage Details

This article recommends a good jQuery Datepicker date selection plug-in. I have tested the compatibility with WordPress and WPML. I hope some methods will help you.

1. download the jQuery core file. datepicker is a lightweight plug-in. You only need to download the jQuery min version, and then download datepicker (containing jQuery1.2.6 _ min ), you can also download it from the official website: http://marcgrabanski.com/pages/code/jquery-ui-datepicker.

2. reference the two downloaded js files in HTML:

The Code is as follows:	Copy code
<Script language = "javascript" src = "js/jquery-1.2.6.min.js"> </script> <Script language = "javascript" src = "js/ui. datepicker. js"> </script>

3. introduce the default style sheet file in HTML. This file is also in the compressed package. If you download the file from the official website, the CSS file will be downloaded on the homepage. You can also select CSS for other skins:

The Code is as follows:	Copy code
<Link rel = "stylesheet" href = "js/ui.datepicker.css" type = "text/css" media = "screen" title = "core css file" charset = "UTF-8"/>

4. Insert text fields in HTML. It is best to set them to read-only and do not accept manual input from users. This prevents format confusion and marks them with IDs.

The Code is as follows:	Copy code
<Input id = "dateinput" type = "text" readonly = "readonly"/>

5. Write js Code to achieve the final effect.

The Code is as follows:	Copy code
<Script language = "javascript"> $ (Document). ready (function (){ $ ('# Dateinput'). datepicker (); }); </Script>

Show today and OK

The Code is as follows:	Copy code
$ (". Dp"). datepicker ({showButtonPanel: true });

You can also set the calendar view to be adjusted from today to the current month:

The Code is as follows:	Copy code
$ (". Dp"). datepicker ({showButtonPanel: true, gotoCurrent: true });

Format input

Define the mask format:

The Code is as follows:	Copy code
$ (". Dp"). datepicker (). setMask ("9999-19-39 ")

In this way, the text field of Date input is basically completed, but it is in English. According to different MIS systems, some target users are grade users. We recommend that you change the interface to Chinese.

 

The Code is as follows:

Copy code

JQuery (function ($ ){ $. Datepicker. regional ['zh-hans '] = $. datepicker. regional ['zh _ cn'] = { CloseText: 'close ', PrevText: '& # x3c; last month ', NextText: 'Next month & # x3e ;', CurrentText: 'Today ', MonthNames: ['August 11', 'August 11', 'August 11', 'August 11', 'August 11 ', 'October ', 'October'], MonthNamesShort: ['1', '2', '3', '4', '5', '6 ', '7', '8', '9', '10', '11', '12'], DayNames: ['sunday', 'monday', 'tuesday', 'weday', 'thursday', 'Friday'], DayNamesShort: ['sunday', 'monday', 'tues', 'wedneth', 'thurs', 'Friday', 'satur'], DayNamesMin: ['day', 'yi', '2', '3', '4', '5', '6'], WeekHeader: 'Week ', DateFormat: 'yy-mm-dd ', FirstDay: 1, IsRTL: false, ShowMonthAfterYear: true, YearSuffix: 'Year '}; $. Datepicker. setDefaults ($. datepicker. regional ["<? Php echo defined ('icl _ Your age_code ')? ICL_LANGUAGE_CODE: WPLANG;?> "]); });

Control date range
Use minDate/maxDate to set the date range that can be selected. It can be of the date type;

Or a specific format, which is represented by three characters:

1. The first character is + or-
2. The second character is a number.
3. The third character indicates that the Unit is y, m, w, and d, indicating the year, month, week, and day. The result in N can be spelled out, for example, "+ 1y" "-1 m"
4. It can be superimposed. If spaces are separated in the middle, "+ 1 m + 1 w + 2d" means one month + one week + two days

The Code is as follows:	Copy code
$ (". Dp"). datepicker ({maxDate: "+ 1 m + 1 w + 1d", minDate: "-1d "}); $ (". Dp"). datepicker ({maxDate: new Date (hz12, 21), minDate: new Date (hz12, 08 )});