JQuery UI instance and jqueryui instance

Source: Internet
Author: User
Tags iso 8601

JQuery UI instance and jqueryui instance
Default Function

The Datepicker is bound to a standard form input field. Move focus to input (click or use the tab key) to open an interactive calendar on a small overlay layer. Select a date, click any place on the page (the input box loses focus), or click Esc to close the page. If a date is selected, the feedback is displayed as the input value.

<! Doctype html> 



Different animations are used when datepicker is enabled or disabled. Select an animation from the drop-down list and click it in the input box to view its effect. You can use either of the three standard animations or any of the UI effects.

<! Doctype html> 


Dates of other months

Datepicker can display dates of other months. These dates can also be set as optional.

<! Doctype html> 


Show button bar

Using a Boolean ValueshowButtonPanelSelect to display a "Today" button for the selected day, and a "Done" button for closing the calendar. By default, each button is enabled when the button bar is displayed, but the button can be closed with other options. The button text can be customized.

<! Doctype html> 


Inline display

Datepicker is nested in the page, rather than in a cover layer. You only need to call. datepicker () on the div, instead of the input.

<! Doctype html> 


Show month & year menu

Show the drop-down box of the month and year, instead of displaying the static month/year title, which facilitates navigation over a wide range of time spans. Add a Boolean ValuechangeMonthAndchangeYearOption.

<! Doctype html> 


Show multiple months

SetnumberOfMonthsTo display multiple months in a datepicker.

<! Doctype html> 


Format date

Display date feedback in various ways. Select a date format from the drop-down list, and then click and select a date in the input box to view the date display in the selected format.

<! Doctype html> 


Icon trigger

Click the icon next to the input box to display datepicker. Set datepicker to open when the focus is obtained (default action), or when you click the icon, or when you get the focus/click the icon.

<! Doctype html> 


Localized calendar

Localized datepicker calendar language and format (English/Western by default ). Datepicker includes built-in support for Languages read from right to left, such as Arabic and Hebrew.

<! Doctype html> 


Fill in another input box

UsealtFieldAndaltFormatSelect, and a date with a certain format will be filled in another input box. This feature presents a user-friendly date to users after further processing of Computer-friendly dates.

<! Doctype html> 


Restriction date range

PassminDateAndmaxDateOption to limit the date range that can be selected. Set the start and end dates to the actual Date (new Date (2009, 1-1, 26), or to an offset from today's value (-20 ), or a string of cycles and units ('+ 1 M + 10D '). If it is set as a string, 'D' is used to represent the day, 'w' is used to represent the week, 'M' is used to represent the month, and 'y' is used to represent the year.

<! Doctype html> 


Select a date range

Select the date range to be searched.

<! Doctype html> 


Display the week of the year

Datepicker can display the week of a year. The default calculation is defined by ISO 8601: every week starts from Monday and the first week of each year includes the first Thursday of that year. This means that some days of a year may belong to the week of another year.

<! Doctype html> 

JQuery datepicker into Chinese: jquery. ui. datepicker-zh-CN.js is generally looking for this js, I took out the js code, and then do not need to find it on the Internet:

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']);});

In addition to the Baidu cainiao tutorial, we also have our own Baidu. Repeat multiple times and make a summary.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.