在文本框 asp.net 上使用 JQuery DatePicker
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4273298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use JQuery DatePicker on Textbox asp.net
提问by Tony
How to attach a DatePicker to Textbox in JQuery.
如何在 JQuery 中将 DatePicker 附加到文本框。
回答by Zachary
You should check out the jQuery UI DatePicker.
您应该查看jQuery UI DatePicker。
ASP.NET Example
ASP.NET 示例
<script>
$(function() {
$( "#<%= txtDate.ClientID %>" ).datepicker();
});
</script>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate" runat="server" />
</div>
</form>
回答by Brett Jones
Where date of birth is a textbox.
其中出生日期是一个文本框。
A basic example:
一个基本的例子：
$(document).ready(function () {
$("#DateOfBirth").datepicker(
});
});
More complex example:
更复杂的例子：
$(document).ready(function () {
$("#DateOfBirth").datepicker({
defaultDate: "-25y",
dateFormat: "dd-mm-yy",
yearRange: "c-80:c+40",
inline: true,
showAnim: 'fadeIn',
changeMonth: true,
changeYear: true,
minDate: "-120y",
maxDate: "-18y",
});
});
Some Explanations:defaultDate is set to today minus 25 years.
一些解释：defaultDate 设置为今天减去 25 年。
dateFormat is set to 26/12/2014. Don't use 'yyyy' otherwise the 4 character year will show twice.
dateFormat 设置为 26/12/2014。不要使用 'yyyy' 否则 4 个字符的年份将显示两次。
yearRange sets the number of years that show in the year drop down box (enabled by 'changeyear: true' option) to be the current year minus 80 years and plus 40 years (but constrained to min and max date settings)
yearRange 将年份下拉框中显示的年数（通过 'changeyear: true' 选项启用）设置为当前年份减去 80 年再加上 40 年（但受限于最小和最大日期设置）
Some basic options:
一些基本选项：
- showOn: button (shows when the calendar button is clicked)
- showOn: focus (shows when the input the calendar is attached to gets focus)
- showsOn: both (shows both as above)
- defaultDate: new Date(2014, 12, 26)
- defaultDate: "-25y" (shows the today's date minus 25 years)
- minDate: new Date(1926, 1, 1)
- maxDate: "+1m +1w" (adds 1 month and 1 week to current set date)
- maxDate: new Date(2012, 1, 1)
- dateFormat: "yy-mm-dd"
- dateFormat: "dd-mm-yy"
- dateFormat: 'DD, MM d, yy'
- navigationAsDateFormat: true (removes silly 'prev' and 'next' button text and replaces with prev and next month names).
- stepMonths: 3 (when the next or prev buttons are clicked will move this many months at once).
- numberOfMonths: [ 2, 3 ] (shows 3 calendars at once)
- showCurrentAtPos: 2 (must be used in conjunction with above 'numberOfMonths:'. Sets the present month in selected position where multiple months are shown.)
- showButtonPanel: true (shows a button panel underneath the cal with 'Today' button for setting the date to today and 'Done' button which will close the calendar')
- showWeek: true (shows the week number out of 52 for the year)
- changeMonth: true (allow the user to change the month via a drop down list)
- changeYear: true (allow the user to change the year via a drop down list)
- yearRange: "c-80:c+40" (c is for current. Year range is current year minus 80 years and plus 40 years but this is constrained by min and max dates settings is
- yearRange: "1990:2014" (in the year drop down list shows the range of years available in the drop down list)
- showOn: 按钮（点击日历按钮时显示）
- showOn：焦点（显示附加日历的输入何时获得焦点）
- showOn：两者（如上显示两者）
- 默认日期：新日期（2014、12、26）
- defaultDate: "-25y"（显示今天的日期减去 25 年）
- minDate: 新日期(1926, 1, 1)
- maxDate: "+1m +1w"（将 1 个月零 1 周添加到当前设置的日期）
- maxDate: 新日期(2012, 1, 1)
- 日期格式：“yy-mm-dd”
- 日期格式：“日-月-年”
- dateFormat: 'DD, MM d, yy'
- navigationAsDateFormat: true（删除愚蠢的“上一个”和“下一个”按钮文本并替换为上一个和下个月的名称）。
- stepMonths: 3（点击下一个或上一个按钮时会一次移动这么多个月）。
- numberOfMonths: [ 2, 3 ]（一次显示 3 个日历）
- showCurrentAtPos: 2（必须与上面的 'numberOfMonths:' 结合使用。在显示多个月份的选定位置设置当前月份。）
- showButtonPanel: true（在 cal 下方显示一个按钮面板，带有用于将日期设置为今天的“今天”按钮和将关闭日历的“完成”按钮）
- showWeek：true（显示该年 52 周中的周数）
- changeMonth: true（允许用户通过下拉列表更改月份）
- changeYear: true（允许用户通过下拉列表更改年份）
- yearRange: "c-80:c+40" (c 代表当前。年份范围是当前年份减去 80 年再加上 40 年，但这受到最小和最大日期设置的限制
- yearRange: "1990:2014"（在年份下拉列表中显示下拉列表中可用的年份范围）
Check here for the full reference: http://api.jqueryui.com/datepicker/
在此处查看完整参考：http: //api.jqueryui.com/datepicker/
回答by WindfallWizard
Here are two ways with Jquery Css selectors:
这里有两种使用 Jquery Css 选择器的方法：
1) Use the fully resolved ID of your textbox based on the containers it is in. You should be able to verify how the ID comes through using your browser's built in developer tools.
1) 根据文本框所在的容器使用完全解析的文本框 ID。您应该能够使用浏览器的内置开发人员工具验证 ID 是如何通过的。
Example of a form view using master pages with placeholder would be something like:
使用带有占位符的母版页的表单视图示例如下：
ContentPlaceHolder ID + FormView ID + Textbox ID
ContentPlaceHolder ID + FormView ID + 文本框 ID
$("#MainContent_F3_TextBox1").datepicker();
2) Or add a css class to the TextBoxID for all your dates fields:
2) 或者为所有日期字段的 TextBoxID 添加一个 css 类：
<asp:TextBox ID="TextBox1" CssClass="datepick" runat="server"></asp:TextBox>
$(".datepick").datepicker();
回答by parijat mishra
$(function() {
$("#txtDatepicker").datepicker();
});
see the Example for how to use this function.
请参阅示例以了解如何使用此功能。
