How to Use the JQuery date plug-in datepicker, jquerydatepicker

How to Use the JQuery date plug-in datepicker, jquerydatepicker

JQuery is a very good script framework. Its rich controls are also very simple to use, and the configuration is very flexible. The following is an example of using the date plug-in datapicker.

1. Download The jQuery core file. datepicker is a lightweight plug-in. You only need the jQuery min version. then download the jquery-uicompressed package from the official website http://jqueryui.com/download( you can select the theme you like ), it includes support for datepicker. Of course, you can also download datepicker, including ui. core. js and ui. datepicker. js.

2. reference the downloaded js file in HTML:

<! -- Introduce jQuery --> <mce: script src = "js/jquery.1.4.2.js" mce_src = "js/jquery-1.5.1.min.js" type = "text/javascript"> </mce: script> <! -- Added support for datepicker --> <mce: script src = "js/jquery. ui. core. js "mce_src =" js/jquery. ui. core. js "type =" text/javascript "> </mce: script> <mce: script src =" js/jquery. ui. datepicker. js "mce_src =" js/jquery. ui. datepicker. js "type =" text/javascript "> </mce: script>

3. Introduce the default style sheet file in HTML, which is in the ui compressed package. If you download the CSS file from the official website, you can download the CSS file on the home page or select other skins.

<! -- Introduce style css --> k type = "text/css" rel = "stylesheet" href = "css/jquery-ui-1.8.13.custom.css" mce_href = "css/jquery-ui-1.7.3.custom.css"/>

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.

<input type="text" id="selectDate" readonly="readonly"/> 

5. Write js Code to achieve the final effect.

$(document).ready(function() {      $('#selectDate').datepicker();    }); 

The effect is as follows:

Here is just a basic date control, we also need to display it in Chinese, limit the date Selection Range and other requirements, slightly modify the js Code:

<Mce: script type = "text/javascript"> <! -- // Wait until the dom element is loaded. $ (function () {$ ("# selectDate "). datepicker ({// Add date selection function numberOfMonths: 1, // showButtonPanel: true for a few months, // whether to display the button panel dateFormat: 'yy-mm-dd ', // Date Format clearText: "clear", // The Name Of The clear date button closeText: "close", // The Name Of The button in the close select box yearSuffix: 'Year ', // year suffix showMonthAfterYear: true, // whether to put the month behind the year defaultDate: '2017-03-10 ', // default date minDate: '2017-03-05 ', // minimum date maxDate: '2014-03-20 ', // maximum date monthNames: ['2014-1, 2011', '2014-1, ', '2014-1 ', 'October 22, ', 'October 22,', 'October 13, 'October 22, '], dayNames: ['sunday', 'monday ', 'tuesday', 'wedday', 'thurday', 'Friday', 'satur'], dayNamesShort: ['sunday', 'monday', 'tuesday', 'weday ', 'thurs', 'Friday', 'satur'], dayNamesMin: ['day', 'yi', '2', '3', '4', '5 ', '6'], onSelect: function (selectedDate) {// The operation alert (selectedDate) ;}}) executed after the selected date; // --> </mce: script>

The effect is as follows:

This basically satisfies our needs. The datepicker control is in English by default. You can specify Chinese display values for months and days by using the monthNames and dayNames attributes when constructing a datepicker. However, it is too troublesome to configure these attributes every time you use them, you can add a js file to put the Chinese configuration in it. You can directly reference it each time, and put it in jquery. ui. datepicker-zh-CN.js, the content is as follows:

JQuery (function ($) {$. datepicker. regional ['zh-cn'] = {closeText: 'close', prevText: '<last month', nextText: 'Next month> ', currentText: 'Today', monthNames: ['October ', 'October ', 'August 11', 'August 11', 'August 11'], monthNamesShort: ['1', 'two', '3', '4', '5', '6 ', '7', '8', '9', '10', '11', '12'], dayNames: ['sunday', 'monday', 'tues ', 'wedday', 'thurday', 'Friday', 'saturday'], dayNamesShort: ['sunday', 'monday', 'tues', 'wedday', 'thurday ', '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 ['zh-cn']);});

6. Introduce the Chinese plug-in to the page

<! -- Add Chinese support --> <mce: script src = "js/jquery. ui. datepicker-zh-CN.js "mce_src =" js/jquery. ui. datepicker-zh-CN.js "type =" text/javascript "> </mce: script>

The complete page code is as follows:

<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <meta http-equiv = "Content-Type" content = "text /html; charset = UTF-8 "/> <TITLE> date control datepicker </TITLE> <! -- Introduce jQuery --> <mce: script src = "js/jquery.1.4.2.js" mce_src = "js/jquery.1.4.2.js" type = "text/javascript"> </mce: script> <! -- Added support for datepicker --> <mce: script src = "js/jquery. ui. core. js "mce_src =" js/jquery. ui. core. js "type =" text/javascript "> </mce: script> <mce: script src =" js/jquery. ui. datepicker. js "mce_src =" js/jquery. ui. datepicker. js "type =" text/javascript "> </mce: script> <! -- Or introduce the jquery ui package, which also includes support for datepicker <mce: script src = "js/jquery-ui-1.7.3.custom.min.js" mce_src = "js/jquery-ui-1.7.3.custom.min.js" type = "text/javascript"> </mce: script> --> <! -- Introduce style css --> <link type = "text/css" rel = "stylesheet" href = "css/jquery-ui-1.7.3.custom.css" mce_href = "css/jquery-ui-1.7.3.custom.css"/> <! -- Add Chinese support --> <mce: script src = "js/jquery. ui. datepicker-zh-CN.js "mce_src =" js/jquery. ui. datepicker-zh-CN.js "type =" text/javascript "> </mce: script> <mce: script type =" text/javascript "> <! -- // Wait until the dom element is loaded. $ (function () {$ ("# selectDate "). datepicker ({// Add date selection function numberOfMonths: 1, // showButtonPanel: true for a few months, // whether to display the button panel dateFormat: 'yy-mm-dd ', // Date Format clearText: "clear", // The Name Of The clear date button closeText: "close", // The Name Of The button in the close select box yearSuffix: 'Year ', // year suffix showMonthAfterYear: true, // whether to put the month behind the year defaultDate: '2017-03-10 ', // default date minDate: '2017-03-05 ', // minimum date maxDate: '2014-03-20 ', // maximum date // monthNames: ['2014-1, 2011', '2014-1, ', '2014-1 ', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11', 'August 11'], // dayNames: ['sunday', 'monday', 'tuesday', 'wedday', 'thurs', 'Friday'], // dayNamesShort: ['sunday ', 'monday', 'tues', 'wedday', 'thurs', 'Friday', 'satur'], // dayNamesMin: ['day', '1 ', '2', '3', '4', '5', '6'], onSelect: function (selectedDate) {// The operation alert (selectedDate) ;}) executed after the date is selected; // --> </mce: script> </HEAD> <BODY> <input type = "text" id = "selectDate" readonly = "readonly"/> </BODY> </HTML>

Note: The ui on the jquery datepicker homepage. core. js and ui. datepicker. js is not the latest version, if you download the new version of the jquery-ui-1.8.13 In the css file will cause the date control can not be displayed, so here use 1.7.3 ui. Simply put, JavaScript is compressed using jquery-ui.

The above is all the content in this article. We will introduce so much about the JQuery date plug-in datepicker, and hope it will help you in your learning.

Articles you may be interested in:

• Jquery automatically adds the current date for the date plug-in when loading the page
• Preferred framework for mobile device web development: zeptojs Introduction
• Implementation of the tap event in zepto. js to prevent bubbling
• Implementation of Image view. js, a big image display component based on zepto. js, similar to the QQ space of mobile phones
• JQuery plug-in zepto. js simple tab Switch
• SwipeUp is attached to a carousel Image Using swipe. js in zepto, and swipeDown is ineffective.
• Method for referencing the date plug-in yii2-date-picker in bootstrap in the Yii2 framework
• How to Use the date plug-in Mobiscroll in jQuery Mobile development
• Zepto-based lightweight date plug-in for mobile terminals -- date_picker