在jquery ui中的日历控件，有时需要用户选择某个日期范围，比如选定某天后，就只能给7天后或者N天后的日期范围给用户选择，这时可以这样做：
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var txtStartDate = $('#<%= txtStartDate.ClientID %>');
var txtEndDate = $('#<%= txtEndDate.ClientID %>');
txtStartDate.datepicker({ onClose: clearEndDate });
txtEndDate.datepicker({ beforeShow: setRange });
function setRange() {
var minDate = txtStartDate.datepicker('getDate');
var maxDate = txtStartDate.datepicker('getDate');
maxDate.setDate(maxDate.getDate() + 7);
return {
minDate: minDate,
maxDate: maxDate
}
}
//Clears the end date textbox
function clearEndDate(dateText, inst) {
txtEndDate.val('');
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
Start Date:
<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>
End Date:
<asp:TextBox ID="txtEndDate" runat="server"></asp:TextBox>
</form>
</body>
</html>
分享到：
相关推荐
4. **可定制化**：开发者可以通过设置各种选项来自定义插件的行为，如更改日期格式、设定默认值、设置日期范围限制等。 5. **事件回调**：插件提供了丰富的事件回调函数，如onSelect、onClose等，开发者可以借此...
DateTimePicker是jQuery库中的一个强大工具，用于在网页表单中添加日期和时间选择功能。这个插件使得用户能够方便地选取日期和时间，而无需手动输入，极大地提高了用户体验。以下将详细介绍DateTimePicker的特性、...
这通常通过在dependencies块中指定库的Gradle坐标来完成。例如： ```groovy dependencies { implementation 'com.example.datetim picker:library:版本号' } ``` 然后，需要在布局XML文件中添加DataTimePicker...
在JavaScript库如jQuery UI中，也有类似的datetimepicker插件，它可以提供丰富的自定义选项，包括主题、语言支持、日期范围限制等。通过这些插件，开发者可以创建具有高度定制性的日期时间选择器，以适应各种设计...
开发者可以根据项目需求自定义其外观和行为，例如更改日期格式、设置日期范围限制、添加预设时间等。此外，还可以通过事件监听和回调函数来响应用户的操作，实现更复杂的交互逻辑。 在实际开发中，DateTimepicker ...
"flex DataTimePicker时间控件"是一个专为Adobe Flex平台设计的组件，用于帮助用户方便地选择日期和时间。Flex是一个开放源代码的框架，主要用于构建富互联网应用程序(RIA)，它基于ActionScript编程语言和MXML标记...
- 有时可能需要扩展DateTimePicker的功能，例如添加日期范围限制，这时可以通过继承DateTimePicker类并重写相关方法或添加新的属性来实现。 通过这些深入的理解和实践，开发者可以充分利用WPF DateTimePicker控件...
在本项目中，我们聚焦于"bootstrap-datetimepicker"，这是一个基于Bootstrap框架的日期时间选择器插件。经过改造后，该插件现在支持用户不仅可以选择日期，还可以精确地选择时、分、秒，极大地提升了输入时间数据的...
在Android开发中，数据和时间的选择是一个常见的需求，`DateTimePicker`通常用于让用户选择日期和时间。在标准的Android SDK中，虽然提供了`DatePicker`和`TimePicker`两个组件，但它们通常是分开使用的，如果需要在...
- 可设置日期范围限制，避免用户选择无效日期或时间。 - 具有多种触发方式，如点击、聚焦、按键等。 - 可以单独选择日期或时间，也可以同时选择。 - 可以设置默认值，显示当前日期或特定日期。 2. **安装与引入...
在Android开发中，DateTimePicker是用户...在实际项目中，还可以根据需要扩展DateTimePicker的行为，例如添加日期范围限制、禁用特定日期或时间等。不断学习和实践，你将能更熟练地掌握Android中DateTimePicker的使用。
最近在项目中引用了bootstrap-datatimepicker控件，但是发现该控件在日期选择框弹出状态下再次点击input则日期选择框消失但再次点击input日期选择框不再弹出。 解决办法： 在日期控件的show方法中给input加上...
3. **日期范围限制**：可以设置最小和最大可选日期，防止用户选择超出范围的日期。 4. **时间间隔**：可以设定时间选择的步进，例如每5分钟或每15分钟为一个选项。 5. **输入框与弹出框**：既可以作为输入框内的时间...
今天在项目中需要选择时间的控件，但是winform中的dataTimePicker控件不能认为输入时间，或者就是要么只能选择时间，鄙人就包装了一下。可以选择日期，输入时间，带时分秒的。（vs2008包装的，如打不开，可以看看...
JavaFX中的日期时间选择控件，来自于github开源项目https://github.com/taipeiben/DateTimePicker，这个是自己打包的jar
2. **联动效果**：在多级联动的场景下，例如当用户选择年份时，月份和日期范围会自动更新。这需要在监听事件中进行计算和更新。 3. **自定义逻辑**：如果需要实现特殊的日期选择规则，如禁用某些日期或只允许选择...
在Android开发中，`DatePicker`和`TimePicker`是用于用户选择日期和时间的常见组件。自定义这两个组件可以提供更符合应用风格或用户需求的交互体验。下面将详细介绍如何在Android中自定义`DatePicker`和`TimePicker`...
在Android开发中，用户界面（UI）的设计是至关重要的，特别是在需要用户输入特定日期或时间时。"时间选择器"是这样一个组件，它允许用户在应用程序中方便地选取日期和时间，而无需手动输入所有细节。这个主题主要...
Bootstrap 和 SeaJS 结合的分页器是一种在 Web 开发中实现高效页面导航的方法，尤其适用于数据量大、需要分页展示的场景。Bootstrap 是一个流行的前端开发框架，提供了丰富的 UI 组件，如按钮、表单、网格系统等，而...