JQuery UI DatePicker Usage Introduction

This blog is written using the Markdown editor

During enterprise Web development, calendar controls and chart controls are the third-party components that use up to 2. The DatePicker of the JQuery UI band, the calendar control can meet most of the scene development needs. This article mainly discusses the use of jquery UI DatePicker, and the Chinese localization configuration.

1.jQuery UI Introduction

The jquery UI is a set of JavaScript class libraries based on jquery controls and animation effects. Can be used to build interactive internet applications. Latest Version 1.10.4. JQuery-based 1.6+jquery UI official website

2.jQuery UI DatePicker Introduction

Datapicker is a control within the jquery UI. The main is to give users a calendar, convenient for users to choose the date and time.

DatePicker Introduction

3.jQuery UI Datepciker Sample

• Step 1. Download the latest version of the jquery UI.
• Step 2 introduces the following three files, respectively: Jquery.js jquery-ui.js jquery-ui.css
• Step 3 Write the code below and configure a very simple DatePicker control

?

1	$("#startdate").datepicker();

The results of the program run as follows:

4.jQuery UI datepicker Display Chinese

The DatePicker control can be displayed, but it's all in English. So we need to modify it so that it is displayed in Chinese by default. For example, Monday to Sunday shows: "One or two, three or four, five or six, day" such as Chinese characters. Before using DatePicker, it would be nice to use the following code to set DatePicker's language to Chinese. The code is as follows:?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

jQuery(function($){     $.datepicker.regional[‘zh-CN‘] = {         closeText: ‘关闭‘,         prevText: ‘<上月‘,         nextText: ‘下月>‘,         currentText: ‘今天‘,         monthNames: [‘一月‘,‘二月‘,‘三月‘,‘四月‘,‘五月‘,‘六月‘,         ‘七月‘,‘八月‘,‘九月‘,‘十月‘,‘十一月‘,‘十二月‘],         monthNamesShort: [‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘,         ‘七‘,‘八‘,‘九‘,‘十‘,‘十一‘,‘十二‘],         dayNames: [‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘],         dayNamesShort: [‘周日‘,‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘],         dayNamesMin: [‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘],         weekHeader: ‘周‘,         dateFormat: ‘yy-mm-dd‘,         firstDay: 1,         isRTL: false,         showMonthAfterYear: true,         yearSuffix: ‘年‘};     $.datepicker.setDefaults($.datepicker.regional[‘zh-CN‘]); });

The results of the operation are as follows:

DatePicker Configuration Display Chinese

Author Weibo @bage88

Here is a link that you can open with a new window:

?

1	<a href="http://www.cnblogs.com"target="_blank">博客园</a>

Blog Park