j查询日期选取器周选择
jQuery datePicker week selection
我有一个jQueryUI日期选择器,我正在尝试获取代码来选择选择日期的特定星期,它适用于除星期日以外的日常工作。当我选择星期日时,将显示下一周,但它应该显示当前一周。例如,如果我选择 5 月 9 日,范围是 2016 年 5 月 9 日至 5 月 15 日,但是当我选择 15 日时,我得到 2016 年 5 月 16 日至 5 月 22 日,当时我认为它应该显示与我选择 9 日相同的范围
.HTML
<input style="display: none" name="date" type="input" id="datePick"/>
<span>Week Of: </span>
<span style="font-weight: bold" id="weekRange">
</span>
<br/>
M : <span id="mondayNum"></span>
<br/>
TU : <span id="tuesdayNum"></span>
<br/>
W : <span id="wednesdayNum"></span>
<br/>
TH : <span id="thursdayNum"></span>
<br/>
F : <span id="fridayNum"></span>
<br/>
SA : <span id="saturdayNum"></span>
<br/>
SU : <span id="sundayNum"></span>
JavaScript
$( document ).ready(function()
{
//alert(t1);
$("#datePick").datepicker(
{
showWeek:true,
showOtherMonths: true,
selectOtherMonths: true,
firstDay: 1,
showOn: "button",
buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
buttonImageOnly:true,
onSelect: function(dateText, inst)
{
var dayOne,dayTwo,dayThree,dayFour,dayFive,daySix,daySeven;
var date = $(this).datepicker('getDate');
//console.log($.datepicker.iso8601Week(new Date(dateText)));
tempDay = $.datepicker.formatDate( 'D', date);
if(tempDay == 'Sun')
{
console.log("Sunday");
console.log(date);
console.log(tempDay);
dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
//
dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
$('#weekRange').text($.datepicker.formatDate( 'M d', dayOne) + " to " + $.datepicker.formatDate( 'M d, yy', daySeven));
$('#mondayNum').text($.datepicker.formatDate( 'd', dayOne));
$('#tuesdayNum').text($.datepicker.formatDate( 'd', dayTwo));
$('#wednesdayNum').text($.datepicker.formatDate( 'd', dayThree));
$('#thursdayNum').text($.datepicker.formatDate( 'd', dayFour));
$('#fridayNum').text($.datepicker.formatDate( 'd', dayFive));
$('#saturdayNum').text($.datepicker.formatDate( 'd', daySix));
$('#sundayNum').text($.datepicker.formatDate( 'd', daySeven));
$("#datePick").datepicker("setDate", dayOne);
}
else
{
console.log("Not Sunday");
console.log(tempDay);
previousWeek = ($.datepicker.iso8601Week(date) - 1);
console.log("Picked day previous Week: " + previousWeek);
console.log("Current week: " + $.datepicker.iso8601Week(date));
var nextWeek = ($.datepicker.iso8601Week(date) + 1);
console.log("Picked day following Week: " + nextWeek);
console.log(dateText);
dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
}
console.log("2nd: " + dayTwo);
console.log("3rd: " + dayThree);
console.log("4th: " + dayFour);
console.log("5th: " + dayFive);
console.log("6th: " + daySix);
console.log("7th: " + daySeven);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
//console.log($.datepicker.formatDate( 'M d', monday, inst.settings ) + " to " + $.datepicker.formatDate( 'M d, yy', sunday, inst.settings ));
$('#weekRange').text($.datepicker.formatDate( 'M d', dayOne, inst.settings ) + " to " + $.datepicker.formatDate( 'M d, yy', daySeven, inst.settings ));
$('#mondayNum').text($.datepicker.formatDate( 'd', dayOne));
$('#tuesdayNum').text($.datepicker.formatDate( 'd', dayTwo));
$('#wednesdayNum').text($.datepicker.formatDate( 'd', dayThree));
$('#thursdayNum').text($.datepicker.formatDate( 'd', dayFour));
$('#fridayNum').text($.datepicker.formatDate( 'd', dayFive));
$('#saturdayNum').text($.datepicker.formatDate( 'd', daySix));
$('#sundayNum').text($.datepicker.formatDate( 'd', daySeven));
$("#datePick").datepicker("setDate", dayOne);
//alert($.datepicker.formatDate( 'd', dayOne, inst.settings ));
}
});
//console.log("1st: " + dayOne);
$("#datePick").datepicker("setDate", new Date());
var date = $("#datePick").datepicker('getDate');
//console.log(test);
dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
$('#weekRange').text($.datepicker.formatDate( 'M d', dayOne) + " to " + $.datepicker.formatDate( 'M d, yy', daySeven));
//console.log("1st: "+ bob);
});
斯菲德尔https://jsfiddle.net/gauldivic/vexuu26j/
由于它总是偏离一天,这可能是由于您将一周的第一天设置为星期一引起的,因此您可以通过从所选日期中减去一天来解决此问题。
var date = $(this).datepicker('getDate');
date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1);
在行动中:
var t1;
$(document).ready(function() {
$("#datePick").datepicker({
showWeek: true,
showOtherMonths: true,
selectOtherMonths: true,
firstDay: 1,
showOn: "button",
buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
buttonImageOnly: true,
onSelect: function(dateText, inst) {
var dayOne, dayTwo, dayThree, dayFour, dayFive, daySix, daySeven;
// Subtract one day to account for different first day of the week
var date = $(this).datepicker('getDate');
date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1);
var tempDay = $.datepicker.formatDate('D', date);
var previousWeek = ($.datepicker.iso8601Week(date) - 1);
var nextWeek = ($.datepicker.iso8601Week(date) + 1);
dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#weekRange').text($.datepicker.formatDate('M d', dayOne, inst.settings) + " to " + $.datepicker.formatDate('M d, yy', daySeven, inst.settings));
$('#mondayNum').text($.datepicker.formatDate('d', dayOne));
$('#tuesdayNum').text($.datepicker.formatDate('d', dayTwo));
$('#wednesdayNum').text($.datepicker.formatDate('d', dayThree));
$('#thursdayNum').text($.datepicker.formatDate('d', dayFour));
$('#fridayNum').text($.datepicker.formatDate('d', dayFive));
$('#saturdayNum').text($.datepicker.formatDate('d', daySix));
$('#sundayNum').text($.datepicker.formatDate('d', daySeven));
$("#datePick").datepicker("setDate", dayOne);
}
});
$("#datePick").datepicker("setDate", new Date());
var date = $("#datePick").datepicker('getDate');
dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
$('#weekRange').text($.datepicker.formatDate('M d', dayOne) + " to " + $.datepicker.formatDate('M d, yy', daySeven));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input style="display: none" name="date" type="input" id="datePick" />
<span>Week Of: </span>
<span style="font-weight: bold" id="weekRange">
</span>
<br/>M : <span id="mondayNum"></span>
<br/>TU : <span id="tuesdayNum"></span>
<br/>W : <span id="wednesdayNum"></span>
<br/>TH : <span id="thursdayNum"></span>
<br/>F : <span id="fridayNum"></span>
<br/>SA : <span id="saturdayNum"></span>
<br/>SU : <span id="sundayNum"></span>
相关文章:
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 从动态创建的html选择中选择所选选项
- Angular:使用选择列表选择过滤代码中的对象
- 在第二次选择中选择2更改属性
- 在v-for中选择中选择框的第一个选项
- Angularjs选择以选择数据传递
- 如何根据下拉选择来选择数组的第一列
- 显示基于上一个se的选择的选择选项;选择
- 如何基于另一个已经存在的选择器选择元素
- Angularjs 通过选择不同选择框中的两个字段来填充选择框
- 为动态选择框选择更新功能
- 根据以前的选择显示选择选项
- 多个<选择>使用选择,选项删除(已选择)
- 通过在d3中单击来选择/取消选择
- 剑道日期选择器选择日期应从年开始
- 复选框选择/取消选择触发器第一次工作,但在随后的尝试中失败
- 为什么要使用链式选择禁用选择选项
- 如何在selenium网络驱动程序中选择周范围值
- 如何放置日期范围从周选择器用于两个文本输入
- j查询日期选取器周选择