下面的javascript代码创建了一个周历,提供了startDate和endDate:Weekly Calendar Widget
- 如何调整它,使其同时给予该范围内每个工作日的月/日值?
- 例如,我需要将以下变量输出到表单中:
- 变量开始日期;(例如:2013年10月11日)
- 变量结束日期;(例如:2013年11月16日)
- 变量sunDate;(需要..11/10)
- 变量monDate;(需要..11/11)
- 变量tue日期;(需要..11/12)
- 日期;(需要..11/13)
- 变量thu日期;(需要..11/14)
- 变量friDate;(需要..11/15)
- 变量饱和日期;(需要..11/16)
会不会是...?
var sunDate =结束日期-6(格式为mm/dd)
下面是javascript日历代码:
see link: Weekly Calendar Widget
以下是我更新后的代码,这些代码最终为我所用:
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var monDate;
var tueDate;
var wedDate;
var thuDate;
var friDate;
var satDate;
var sunDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: "mm/dd",
firstDay: 1, // Start with Monday
onSelect: function(dateText, inst) {
var date = $(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() + 7);
monDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
tueDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
wedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
thuDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
friDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
satDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
sunDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').val($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').val($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
$('#monDate').val($.datepicker.formatDate( dateFormat, monDate, inst.settings ));
$('#tueDate').val($.datepicker.formatDate( dateFormat, tueDate, inst.settings ));
$('#wedDate').val($.datepicker.formatDate( dateFormat, wedDate, inst.settings ));
$('#thuDate').val($.datepicker.formatDate( dateFormat, thuDate, inst.settings ));
$('#friDate').val($.datepicker.formatDate( dateFormat, friDate, inst.settings ));
$('#satDate').val($.datepicker.formatDate( dateFormat, satDate, inst.settings ));
$('#sunDate').val($.datepicker.formatDate( dateFormat, sunDate, 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();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
然后在我的HTML中,我使用了:
<thead>
<tr>
<th>Type</th>
<th>Mon<br>
<input disabled id="monDate" size="5" data-mini="true"></th>
<th>Tue<br>
<input disabled id="tueDate" size="5" data-mini="true"></th>
<th>Wed<br>
<input disabled id="wedDate" size="5" data-mini="true"></th>
<th>Thu<br>
<input disabled id="thuDate" size="5" data-mini="true"></th>
<th>Fri<br>
<input disabled id="friDate" size="5" data-mini="true"></th>
<th>Sat<br>
<input disabled id="satDate" size="5" data-mini="true"></th>
<th>Sun<br>
<input disabled id="sunDate" size="5" data-mini="true"></th>
<th>Totals</th>
<th>Description</th>
</tr>
这是我的完整HTML页面:https://dl.dropboxusercontent.com/u/58096637/Timesheet.txt
2条答案
按热度按时间lmyy7pcs1#
来自手册:www.example.comhttp://api.jqueryui.com/datepicker/#option-dateFormat
在您的代码中:
您的代码看起来很好,但仅当firstDay为1时有效,已更新代码以使用您提供的html
eimct9ow2#
我向Date原型添加了
addSeconds(seconds)
、subtractSeconds(seconds)
和format(some_format)
,format函数使用与MySQL DATE_FORMAT函数完全相同的格式。示例...从your fiddle中的startDate开始
复制并粘贴所有这些代码,这些代码扩展了Date对象的功能。