Home > Web Front-end > JS Tutorial > Usage of jquery UI Datepicker time control (1)

Usage of jquery UI Datepicker time control (1)

PHPz
Release: 2021-05-28 16:00:32
forward
3203 people have browsed it

This article mainly introduces how to use the jquery ui datepicker time control. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Usage of jquery UI Datepicker time control (1)

Learn about the jquery ui datepicker time control through examples. Let me first take a look at the rendering:

Effect:

Usage of jquery UI Datepicker time control (1)

Common occasions:

1.Input box

2.div

Instructions for use:

1. Restricted date

$("#resultDiv").datepicker({
 onSelect: function (dateText, inst) {
 //代码:选择日期后触发的事件
 },
 minDate: new Date(),//最小日期
 maxDate: new Date($("#DateLimit").val())//最大日期
 });
Copy after login

2.Chinese

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

The above is how to use the jquery ui datepicker time control. The content is very simple. The purpose is to let you know about the UI datepicker time control. I hope you will like it. The jquery ui datepicker time control is not over yet. Next This article will continue to provide in-depth understanding.

Related recommendations

Usage of jquery UI Datepicker time control (2)

Usage of jquery UI Datepicker time control (3)

Recommended related video tutorials: jQuery Tutorial (Video)

The above is the detailed content of Usage of jquery UI Datepicker time control (1). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:jb51.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template