我需要在单个页面上放置三个不同的Jquery Ui日期选择器。第一个日期选择器是普通的“每天选择”日期选择器,第二个将允许用户选择每周的日期范围,最后一个将使用户可以按月/年选择日期。
我可以让所有三个Datepicker单独工作,但不能让它们全部在同一页面上工作。截至目前,所有三个选择器都只允许我按周选择日期(当它们都在同一页面上时)。
我已经尝试过if / else语句,show hide语句以及其他大约一千种我能想到的东西,但似乎没有任何效果。任何帮助将不胜感激!
以下是我的日期选择器的代码:
//datepicker for day
$('#daypicker').datepicker();
//datepicker for week
$(function () {
var startDate,
endDate,
selectCurrentWeek = function () {
window.setTimeout(function () {
$('#weekpicker').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
};
$('#weekpicker').datepicker({
"showOtherMonths": true,
"selectOtherMonths": true,
"onSelect": function (dateText, inst) {
var date = $(this).datepicker('getDate'),
dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
$('#weekpicker').val($.datepicker.formatDate(dateFormat, startDate, inst.settings) + ' - ' + $.datepicker.formatDate(dateFormat, endDate, inst.settings));
selectCurrentWeek();
},
"beforeShow": function () {
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();
}
}).datepicker('widget').addClass('ui-weekpicker');
$('.ui-weekpicker').on('mousemove', 'tr', function () {
$(this).find('td a').addClass('ui-state-hover');
});
$('.ui-weekpicker').on('mouseleave', 'tr', function () {
$(this).find('td a').removeClass('ui-state-hover');
});
});
//datepicker for month/year
$( "#monthpicker" ).datepicker({
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true
});
这是html:
<div class="day">
<label for="daypicker">Month</label>
<input class="datepicker" type="text" id="daypicker">
</div>
<div class="week">
<label for="weekpicker">Month</label>
<input class="datepicker" type="text" id="weekpicker">
</div>
<div class="month">
<label for="monthpicker">Month</label>
<input class="datepicker" type="text" id="monthpicker">
</div>
答案 0 :(得分:2)
我运行了以下代码:
$(function() {
var startDate = new Date(),
endDate = new Date(),
selectCurrentWeek = function() {
window.setTimeout(function() {
$('#weekpicker').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
};
//datepicker for day
$('#daypicker').datepicker();
//datepicker for week
$('#weekpicker').datepicker({
"showOtherMonths": true,
"selectOtherMonths": true,
"onSelect": function(dateText, inst) {
var date = $(this).datepicker('getDate'),
dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
$('#weekpicker').val($.datepicker.formatDate(dateFormat, startDate, inst.settings) + ' - ' + $.datepicker.formatDate(dateFormat, endDate, inst.settings));
selectCurrentWeek();
},
"beforeShow": function() {
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();
}
}).datepicker('widget').addClass('ui-weekpicker');
$('.ui-weekpicker').on('mousemove', 'tr', function() {
$(this).find('td a').addClass('ui-state-hover');
});
$('.ui-weekpicker').on('mouseleave', 'tr', function() {
$(this).find('td a').removeClass('ui-state-hover');
});
//datepicker for month/year
$("#monthpicker").datepicker({
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true
});
});
.wrapper label {
display: inline-block;
width: 60px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="day wrapper">
<label for="daypicker">Day</label>
<input class="datepicker" type="text" id="daypicker">
</div>
<div class="week wrapper">
<label for="weekpicker">Week</label>
<input class="datepicker" type="text" id="weekpicker">
</div>
<div class="month wrapper">
<label for="monthpicker">Month</label>
<input class="datepicker" type="text" id="monthpicker">
</div>
这似乎可以正常工作。