Javascript 获取范围内每个工作日的 MM/DD 值
Javascript to get MM/DD values for each weekday in a range?
下面的javascript代码创建了一个每周日历,给我开始日期和结束日期: 每周日历小部件
- 如何调整它以同时为我提供范围内每个工作日的 MM/DD 值?
-
例如,我需要将以下变量放到我的表单中:
- 变量开始日期;(例:11/10/2013)
-
var endDate;(例:2013年11月16日)
-
var sunDate;(需要.. 11/10)
- var monDate;(需要.. 11/11)
- var tueDate;(需要.. 11/12)
- var wedDate;(需要.. 11/13)
- var thuDate;(需要.. 11/14)
- var friDate;(需要.. 11/15)
- var satDate;(需要.. 11/16)
会是这样的..?
var sunDate = endDate - 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
从手册:http://api.jqueryui.com/datepicker/#option-dateFormat
$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });
在您的代码中:
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: "dd/mm",
您的代码看起来不错,但仅在 firstDay 为 1 时才有效,更新了代码以使用您提供的 html
$(function() {
//removed all variables
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a')
.addClass('ui-state-active')
}, 1);
}
//changed this function
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
dateFormat: "mm/dd",
firstDay: 1, // Start with Monday
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate'),
start = inst.settings.firstDay || $.datepicker._defaults.firstDay,
year = date.getFullYear(),month = date.getMonth(),
day = (date.getDate()-date.getDay()),
elIds=["#monDate","#tueDate","#wedDate","#thuDate","#friDate","#satDate",
"#sunDate","#startDate","#endDate"],
i=-1,start,dates=[],
dateFormat = inst.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
day=(date.getDay()<start)?(day+start)-7:day+start;
while(++i<7){
dates.push(new Date(year,month,day+i));
$(elIds[i]).val($.datepicker.formatDate( dateFormat, dates[i]
, inst.settings ));
}
i=-1;
$(elIds[7]).val($.datepicker.formatDate( dateFormat, dates[0],
inst.settings ));
$(elIds[8]).val($.datepicker.formatDate( dateFormat, dates[6],
inst.settings ));
selectCurrentWeek();
},
});
$('.week-picker .ui-datepicker-calendar tr').on('mousemove', function() {
$(this).find('td a').addClass('ui-state-hover');
});
$('.week-picker .ui-datepicker-calendar tr').on('mouseleave', function() {
$(this).find('td a').removeClass('ui-state-hover');
});
});
我添加到日期原型中,addSeconds(seconds)
,subtractSeconds(seconds)
和format(some_format)
。格式函数使用与MySQL DATE_FORMAT函数完全相同的格式。
例。。。从开始开始日期在你的小提琴中
var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
for (var x = 1; x <= 7; ++x) {
// add 1 day (in seconds)
startDate.addSeconds(24 * 60 * 60);
alert("day " + x + " = " + startDate.format("%m/%d"));
}
并复制并粘贴所有这些代码,这些代码扩展了Date对象可以执行的操作。
/**
* Add a number of seconds to the current date
* @return Date The date object
*/
Date.prototype.addSeconds = function(seconds) {
var time = this.getTime();
alert("time = " + time);
time += seconds * 1000;
this.setTime(time);
return this;
}
/**
* Subtract a number of seconds to the current date
* @return Date The date object
*/
Date.prototype.subtractSeconds = function(seconds) {
var time = this.getTime();
alert("time = " + time);
time -= seconds * 1000;
this.setTime(Math.max(0, time));
return this;
}
/**
* DATE
* format() - uses MySQL date formatting... a few of the more obscure formats are left unfinished
*/
Date.prototype.format = function(format) {
var short_months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var short_days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var escaped = false;
var pieces = new Array();
for (var x = 0; x < format.length; ++x) {
if (!escaped) {
if (format.charAt(x) != "%") {
pieces.push(format.charAt(x));
} else {
escaped = true;
}
continue;
}
switch (format.charAt(x)) {
case "a":
pieces.push(short_days[this.getDay()]); break;
case "b":
pieces.push(short_months[this.getMonth()]); break;
case "c":
pieces.push(Number(this.getMonth()) + 1); break;
case "D":
pieces.push(this.getDate()); break;
case "d":
var day_of_month = new String(this.getDate());
pieces.push(day_of_month.pad(2, "0")); break;
case "e":
pieces.push(this.getDate()); break;
case "f":
var microseconds = new String(this.getMilliseconds() * 1000);
pieces.push(microseconds.pad(6, "0")); break;
case "H":
pieces.push(this.getHours()); break;
case "h":
var hours = this.getHours() % 12;
hours = (hours == 0) ? "12" : new String(hours);
pieces.push(hours.pad(2, "0")); break;
case "I":
var hours = this.getHours() % 12;
hours = (hours == 0) ? "12" : new String(hours);
pieces.push(hours.pad(2, "0")); break;
case "i":
var minutes = new String(this.getMinutes());
pieces.push(minutes.pad(2, "0")); break;
case "j": // day of the year 001...365
pieces.push("???"); break;
case "k":
pieces.push(this.getHours()); break;
case "l":
var hours = this.getHours() % 12;
pieces.push((hours == 0) ? "12" : hours); break;
case "M":
pieces.push(months[this.getMonth()]); break;
case "m":
var month = new String(Number(this.getMonth()) + 1);
pieces.push(month.pad(2, "0")); break;
case "p":
pieces.push((this.getHours() < 12) ? "AM" : "PM"); break;
case "r": // 12-hour hh:mm:ss AM/PM
pieces.push("?"); break;
case "S": case "s":
pieces.push(this.getSeconds()); break;
case "T": // 24-hour hh:mm:ss
pieces.push("?"); break;
case "u": case "U":
case "v": case "V":
pieces.push("?"); break;
case "W":
pieces.push(days[this.getDay()]); break;
case "w":
pieces.push(this.getDay()); break;
case "x": case "X": // year for the week w/sunday or monday starting???
pieces.push("?"); break;
case "Y":
pieces.push(this.getFullYear()); break;
case "y":
var full_year = new String(this.getFullYear());
pieces.push(full_year.substr(2, 2)); break;
default:
pieces.push(format.charAt(x)); break;
}
escaped = false;
}
return pieces.join("");
}
相关文章:
- 用javascript将日期格式从d/m/yyyy转换为yyyy-mm-dd
- 在Datepicker中将日期格式更改为yyyy-mm-dd
- 在 JavaScript 中的个位数月份和日期之前添加零 (MM/DD/YYYY)
- 如何使用moment.js将秒转换为时间格式(YYYY:MM:DD HH:MM:ss)
- JavaScript 将长日期格式转换为 mm/dd/yyy
- Javascript Date 对象因格式而异:yyyy-mm-dd vs mm-dd-yyyy
- 使用 YYYY-MM-DD 值的比较构建 D3 时间线
- 在Javascript中用YYYY-mm-dd格式计算年龄
- 在 Angular 中将日期格式从 yyyy/MM/dd 更改为 MM/dd/yyyy
- javascript/jQuery date.toString(“yyyy-MM-dd HH:MM:ss”)在服务器之间
- Javascript正在删除DateTime[YYYY/MM/DD/HH:MM:SS:MM]中的毫秒
- 我们可以将控制器中的JSON数据(MM/DD/YYYY格式)与今天的's日期,并在数组中显示筛选列表
- 将YYYY/MM/DD转换为有效格式
- 使用new date()将数据与当前日期的MM/DD/YYYY格式的日期进行比较和筛选,同时从用户输入值中减去new d
- 用JavaScript将日期格式设置为MM/dd/yyyy
- 我想在日期中添加月份,并采用mm/dd/yy格式
- 使用RegEx在javascript中重写格式错误的日期yyyy-MM-d到yyyy-MM-dd
- 创建一个等于yyyy-mm-dd 00:00:00或23:59:59的时间戳
- 如何获得日期以 YYYY-mm-dd 为单位的年份差异
- 日期格式 yyyy-mm-dd 到 dd-M-yy