datapicker 日期选择控件

最新推荐文章于 2025-06-29 10:03:46 发布

原创最新推荐文章于 2025-06-29 10:03:46 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#stylesheet #function #class #input #xhtml #date

jquery ui 专栏收录该内容

5 篇文章

订阅专栏

这篇博客详细介绍了jQuery UI的datepicker组件，包括如何显示周的日期、设置日期范围、展示多个月份、内嵌显示、通过图标触发、日期范围选择以及格式化日期。此外，还提供了设置月份和年份下拉框以及自定义日期格式的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在使用jquery-ui时，应该先将jquery-1.4.3.js放在前面，接着放置ui的jquery。

2.显示周的日期：并且以周一为起始日期：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <mce:script src="jquery-ui-1.8.6.custom/js/jquery-1.4.2.min.js" mce_src="jquery-ui-1.8.6.custom/js/jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script src="jquery-ui-1.8.6.custom/js/jquery-ui-1.8.6.custom.min.js" mce_src="jquery-ui-1.8.6.custom/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></mce:script> <link href="jquery-ui-1.8.6.custom/css/redmond/jquery-ui-1.8.6.custom.css" mce_href="jquery-ui-1.8.6.custom/css/redmond/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> </style> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="demo"> <p>Date: <input type="text" id="datepicker"/></p> </div> </body> </html>

2.datapicker 设置可选日期的范围：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <mce:script src="jquery-ui-1.8.6.custom/js/jquery-1.4.2.min.js" mce_src="jquery-ui-1.8.6.custom/js/jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script src="jquery-ui-1.8.6.custom/js/jquery-ui-1.8.6.custom.min.js" mce_src="jquery-ui-1.8.6.custom/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></mce:script> <link href="jquery-ui-1.8.6.custom/css/redmond/jquery-ui-1.8.6.custom.css" mce_href="jquery-ui-1.8.6.custom/css/redmond/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> </style> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="demo"> <p>Date: <input type="text" id="datepicker"/></p> <p id="data">123</p> </div> </body> </html>

3datepicker设置多个月的日期选项卡。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Display multiple months</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" mce_href="themes/base/jquery.ui.all.css"> <mce:script src="../../../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script src="../../ui/jquery.ui.core.js" mce_src="ui/jquery.ui.core.js"></mce:script> <mce:script src="../../ui/jquery.ui.widget.js" mce_src="ui/jquery.ui.widget.js"></mce:script> <mce:script src="../../ui/jquery.ui.datepicker.js" mce_src="ui/jquery.ui.datepicker.js"></mce:script> <link rel="stylesheet" href="../demos.css" mce_href="demos.css"> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="demo"> <p>Date: <input type="text" id="datepicker"></p> </div> <div class="demo-description"> <p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p> </div> </body> </html>

4.datepicker：日期控件内嵌在div中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Display inline</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" mce_href="themes/base/jquery.ui.all.css"> <mce:script src="../../../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script src="../../ui/jquery.ui.core.js" mce_src="ui/jquery.ui.core.js"></mce:script> <mce:script src="../../ui/jquery.ui.widget.js" mce_src="ui/jquery.ui.widget.js"></mce:script> <mce:script src="../../ui/jquery.ui.datepicker.js" mce_src="ui/jquery.ui.datepicker.js"></mce:script> <link rel="stylesheet" href="../demos.css" mce_href="demos.css"> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="demo"> Date: <div id="datepicker"></div> </div> <div class="demo-description"> <p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p> </div> </body> </html>

5.datepicker，通过点击日历按钮来显示日期控件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Icon trigger</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" mce_href="themes/base/jquery.ui.all.css"> <mce:script src="../../../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script src="../../ui/jquery.ui.core.js" mce_src="ui/jquery.ui.core.js"></mce:script> <mce:script src="../../ui/jquery.ui.widget.js" mce_src="ui/jquery.ui.widget.js"></mce:script> <mce:script src="../../ui/jquery.ui.datepicker.js" mce_src="ui/jquery.ui.datepicker.js"></mce:script> <link rel="stylesheet" href="../demos.css" mce_href="demos.css"> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="demo"> <p>Date: <input type="text" id="datepicker"></p> </div> <div class="demo-description"> <p>Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.</p> </div> </body> </html>

6.datepicker日期控件使用from to

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Display multiple months</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" mce_href="themes/base/jquery.ui.all.css"> <mce:script src="../../../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script src="../../ui/jquery.ui.core.js" mce_src="ui/jquery.ui.core.js"></mce:script> <mce:script src="../../ui/jquery.ui.widget.js" mce_src="ui/jquery.ui.widget.js"></mce:script> <mce:script src="../../ui/jquery.ui.datepicker.js" mce_src="ui/jquery.ui.datepicker.js"></mce:script> <link rel="stylesheet" href="../demos.css" mce_href="demos.css"> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="demo"> <label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/> </div> <div class="demo-description"> <p>Select the date range to search for.</p> </div> </body> </html>

7.使用下拉框显示修改年，月

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Display month & year menus</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" mce_href="themes/base/jquery.ui.all.css"> <mce:script src="../../../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script src="../../ui/jquery.ui.core.js" mce_src="ui/jquery.ui.core.js"></mce:script> <mce:script src="../../ui/jquery.ui.widget.js" mce_src="ui/jquery.ui.widget.js"></mce:script> <mce:script src="../../ui/jquery.ui.datepicker.js" mce_src="ui/jquery.ui.datepicker.js"></mce:script> <link rel="stylesheet" href="../demos.css" mce_href="demos.css"> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="demo"> <p>Date: <input type="text" id="datepicker"></p> </div> <div class="demo-description"> <p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p> </div> </body> </html>

****知识点****

1.changeMonth: true, 使日期控件可以使用下拉框选择月

changeYear: true使日期控件可以使用下拉框选择月

8.。格式化日期：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Format date</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" mce_href="themes/base/jquery.ui.all.css"> <mce:script src="../../../js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script src="../../ui/jquery.ui.core.js" mce_src="ui/jquery.ui.core.js"></mce:script> <mce:script src="../../ui/jquery.ui.widget.js" mce_src="ui/jquery.ui.widget.js"></mce:script> <mce:script src="../../ui/jquery.ui.datepicker.js" mce_src="ui/jquery.ui.datepicker.js"></mce:script> <link rel="stylesheet" href="../demos.css" mce_href="demos.css"> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="demo"> <p>Date: <input type="text" id="datepicker" size="30"/></p> <p>Format options:<br /> <select id="format"> <option value="mm/dd/yy">Default - mm/dd/yy</option> <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> <option value="d M, y">Short - d M, y</option> <option value="d MM, y">Medium - d MM, y</option> <option value="y.m.d.o ">Full - DD, d MM, yy</option> <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option> </select> </p> </div> <div class="demo-description"> <p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p> </div> </body> </html>

****知识点******

d - 每月的第几天 (没有前导零)

`02`	`dd - 每月的第几天 (两位数字)`

`03`	`o - 一年中的第几天 (没有前导零)`

`04`	`oo - 一年中的第几天 (三位数字)`

`05`	`D - day name short`

`06`	`DD - day name long`

`07`	`m - 月份 (没有前导零)`

`08`	`mm - 月份 (两位数字)`

`09`	`M - month name short`

`10`	`MM - month name long`

`11`	`y - 年份 (两位数字)`

`12`	`yy - 年份 (四位数字)`

`13`	`@ - Unix 时间戳 (从 01/01/1970 开始)`

`14`	`'...'` `- 文本`

`15`	`''` `- 单引号`

`16`	`（其它） - 文本`

其它标准日期格式:

 
    01ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601)
 
    02COOKIE - 'D, dd M yy'
 
    03ISO_8601 - 'yy-mm-dd'
 
    04RFC_822 - 'D, d M y'
 
    05RFC_850 - 'DD, dd-M-y'
 
    06RFC_1036 - 'D, d M y
 
    07RFC_1123 - 'D, d M yy'
 
    08RFC_2822 - 'D, d M yy'
 
    09RSS - 'D, d M y'
 
    10TIMESTAMP - '@'

`11`	`W3C -` `'yy-mm-dd'`

9本地化日期，设置：

代码：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <mce:script src="jquery-ui-1.8.6.custom/js/jquery-1.4.2.min.js" mce_src="jquery-ui-1.8.6.custom/js/jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script src="jquery-ui-1.8.6.custom/js/jquery-ui-1.8.6.custom.min.js" mce_src="jquery-ui-1.8.6.custom/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></mce:script> <link href="jquery-ui-1.8.6.custom/css/redmond/jquery-ui-1.8.6.custom.css" mce_href="jquery-ui-1.8.6.custom/css/redmond/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> </style> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="demo"> Date: <input type="text" id="datepicker"/> </div> <p> dfdfd</p> </body> </html>

*****知识点****

dateFormat : String : 'mm/dd/yy'

068 设置日期字符串的显示格式。

069 初始：$('.selector').datepicker({ dateFormat: 'yy-mm-dd' });

070 获取：var dateFormat = $('.selector').datepicker('option', 'dateFormat');

071 设置：$('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd');

072

073 dayNames : Array : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday','Friday', 'Saturday']

074 设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。

075 初始：$('.selector').datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi','Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });

076 获取：var dayNames = $('.selector').datepicker('option', 'dayNames');

077 设置：$('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi','Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']);

078

079 dayNamesMin : Array : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

080 设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示。

dateFormat : String : 'mm/dd/yy'

068 设置日期字符串的显示格式。

069 初始：$('.selector').datepicker({ dateFormat: 'yy-mm-dd' });

070 获取：var dateFormat = $('.selector').datepicker('option', 'dateFormat');

071 设置：$('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd');

072

073 dayNames : Array : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday','Friday', 'Saturday']

074 设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。

075 初始：$('.selector').datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi','Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] });

076 获取：var dayNames = $('.selector').datepicker('option', 'dayNames');

077 设置：$('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi','Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']);

078

079 dayNamesMin : Array : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

080 设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示。

初始：$('.selector').datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je','Ve', 'Sa'] });

082 获取：var dayNamesMin = $('.selector').datepicker('option', 'dayNamesMin');

083 设置：$('.selector').datepicker('option', 'dayNamesMin', ['Di', 'Lu', 'Ma','Me', 'Je', 'Ve', 'Sa']);

dayNamesShort : Array : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

086 设置一星期中每天的缩语，从星期天开始，此内容用于dateFormat时显示，以前日历中的行头显示。

087 初始：$('.selector').datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer','Jeu', 'Ven', 'Sam'] });

088 获取：var dayNamesShort = $('.selector').datepicker('option','dayNamesShort');

089 设置：$('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun','Mar', 'Mer', 'Jeu', 'Ven', 'Sam']);

可参考： http://www.opensoce.com/?p=629#printSource

http://www.opensoce.com/?p=629#printSource