将开始日期和结束日期填入两个输入的星期选择器
Week picker that fills in start and end date into two inputs
我的html中有两个输入字段,一个用于开始日期,另一个用于结束日期。我有我的web应用程序背后的逻辑,两个日期范围内的任何约会将被显示。而不是用户必须点击日期字段和选择开始日期和结束日期在两个不同的日历选择器在每个单独的字段,我希望实现一个星期的选择器,将在开始日期输入字段,允许您选择一个星期的天数,而不仅仅是一个单一的一天。然后,当单击周时,我希望开始日期输入字段显示一周的开始日期,结束日期显示一周的结束日期。
我在网上看了很多关于星期选择器的例子,但我似乎找不到一个在星期选择器中选择时自动填充2个输入字段的例子。
任何想法?
感谢编辑:星期选择器脚本:
<script>
jQuery(function(){
initsetup("FORM_R06630");
jQuery("#search_input").hide();
setAsmSelect();
setRuntimeSelect();
});
jQuery(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
jQuery('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
jQuery('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
jQuery('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
jQuery('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
jQuery('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
jQuery('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
输入字段:
<tr>
<td class="ten td_left"><strong>START DATE </strong> Is in the range</td>
<td align="left" class="ten">from
<input class="mrcinput week-picker" id="R001" name="R001" size="8" title="R001" type="text" value="${select.R001}" /> to
<input class="mrcinput" id="S001" name="R001" size="8" title="S001" type="text" value="${select.S001}" /> <font color="red" id="msgR001">${select.errMsg_R001}</font></td>
</tr>
我已经弄清楚如何使一周选择器正确工作:
<tr>
<td class="ten td_left"><strong>START DATE </strong> Is in the range</td>
<td align="left" class="ten">from
<input class="mrcinput startDate" id="R001" name="R001" size="8" title="R001" type="text" value="${select.R001}" /> to
<input class="mrcinput endDate" id="S001" name="R001" size="8" title="S001" type="text" value="${select.S001}" />
<font color="red" id="msgR001">${select.errMsg_R001}</font></td>
</tr>
jQuery jQuery(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
jQuery('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
jQuery('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = jQuery(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
var dateFormat = inst.settings.dateFormat || jQuery.datepicker._defaults.dateFormat;
jQuery('.startDate').val(jQuery.datepicker.formatDate( 'yymmdd', startDate, inst.settings ));
jQuery('.endDate').val(jQuery.datepicker.formatDate( 'yymmdd', endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
jQuery('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { jQuery(this).find('td a').addClass('ui-state-hover'); });
jQuery('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { jQuery(this).find('td a').removeClass('ui-state-hover'); });
});
通过在开始日期和结束日期上使用+1和+5来选择星期一到星期五。如果你想要周日或周六等,这些都可以更改。
相关文章:
- 将日期添加到日期输入字段Angular
- 离子/角度日期输入使用时刻以编程方式设置
- 开始日期和结束日期输入字段的 JQuery 筛选器表
- 正在侦听HTML日期输入的更改
- 关于如何将日期输入值与最小/最大日期范围进行比较的建议
- 在Javascript中填充日期和日期:输入:月和年
- 使用angularJS设置HTML5日期输入字段的默认值
- 为什么我的AngularJS ngModel绑定到时间输入,而不绑定到日期输入
- 如何在引导日期输入中使今天的日期默认值
- 如何通过Javascript编辑HTML中日期输入的值
- JavaScript 中的日期输入类型验证
- angularjs 中的日期输入有些奇怪
- 验证日期输入 - 最小值和最大值
- 仅 angularjs 日期输入
- 轨道 - 日期输入格式
- 如何使用另一个日期输入字段将日期设置为输入字段
- 日期输入类型 HTML 中的变量“min”
- 添加使用 JS 的日期输入的第二次使用使它们都不起作用
- 使用提交验证日期输入字段
- 在 JavaScript 中对日期输入进行单元测试处理,而不考虑时区