<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
<script type="text/javascript">
var disabledToolBefore = new Date();
disabledToolBefore.setDate(disabledToolBefore.getDate() - 1);
var disabledToolAfter = new Date();
disabledToolAfter.setDate(disabledToolAfter.getDate() + 33);
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM yy',
showAnim: "clip",
beforeShowDay: function (date) {
var tooltipDate = "We don't have a timetable for the date you choose. Please select a date between today and the next 32 days";
if (date.getTime() < disabledToolBefore.getTime() || date.getTime() > disabledToolAfter.getTime()) {
return [true, '', tooltipDate];
} else {
return [true, '', ''];
}
}
});
$("#datepicker").change(function () {
updateDate();
});
$("#addDate").click(function () {
addDaysToDate();
});
$("#subtractDate").click(function () {
subtractDaysToDate();
});
});
function updateDate() {
var today = new Date();
var tomorrow = new Date();
var lastDate = new Date();
var date2 = $('#datepicker').datepicker('getDate');
date2.setHours(0, 0, 0, 0);
today.setHours(0, 0, 0, 0);
tomorrow.setHours(0, 0, 0, 0);
lastDate.setHours(0, 0, 0, 0);
tomorrow.setDate(today.getDate() + 1);
lastDate.setDate(today.getDate() + 33);
if (date2.getTime() == today.getTime()) {
//alert(date2);
$('#datepicker').val($('#datepicker').val() + " (TODAY)");
$('#subtractDate').attr("disabled", true);
$('#addDate').attr("disabled", false);
$('#subtractDate').attr("src", "datedecrementer_gray.png");
$('#addDate').attr("src", "dateincrementer.png");
} else if (date2.getTime() == tomorrow.getTime()) {
$('#datepicker').val($('#datepicker').val() + " (TOMORROW)");
$('#subtractDate').attr("disabled", false);
$('#addDate').attr("disabled", false);
$('#subtractDate').attr("src", "datedecrementer.png");
$('#addDate').attr("src", "dateincrementer.png");
} else if (date2.getTime() == lastDate.getTime()) {
//alert(lastDate);
//$('#addDate').addClass('newClass');
$('#addDate').attr("disabled", true);
$('#subtractDate').attr("disabled", false);
$('#addDate').attr("src", "dateincrementer_gray.png");
$('#subtractDate').attr("src", "datedecrementer.png");
} else {
$('#addDate').attr("disabled", false);
$('#subtractDate').attr("disabled", false);
$('#subtractDate').attr("src", "datedecrementer.png");
$('#addDate').attr("src", "dateincrementer.png");
}
}
function addDaysToDate() {
var date2 = $('#datepicker').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#datepicker').datepicker('setDate', date2);
$('#datepicker').change();
}
function subtractDaysToDate() {
var date2 = $('#datepicker').datepicker('getDate');
date2.setDate(date2.getDate() - 1);
$('#datepicker').datepicker('setDate', date2);
$('#datepicker').change();
}
</script>
</head>
<body>
<input type="image" id="subtractDate" src="datedecrementer.png" />
<input type="text" id="datepicker" style="width:220px;border:0" />
<input type="image" id="addDate" src="dateincrementer.png" />
<div id="dialog-message" title="Message" style="display:none">
<p> <span style="float: left; margin: 0 7px 50px 0;">
</span> We don't have a timetable for the date you chose. Please
select a date between today and the next 2 months.</p>
</div>
</body>
</html>
答案 0 :(得分:0)
尝试这个
var x = $("#datepickerid").datetimepicker('getDate');
var todaydate = new Date();
var todaydate1 = new Date(todaydate.getFullYear(), todaydate.getMonth(), todaydate.getDate(), 0, 0, 0, 0);
if (x== todaydate1) {
$( '#subtractDate')ATTR( “无效”, “无效”)。 }
从
更改此行 $('#subtractDate').attr("disabled",true);
到
$('#subtractDate').attr("disabled","disabled");
答案 1 :(得分:0)
我尝试了您的代码here
此外,您可以尝试从此处添加迁移插件:http://jquery.com/download/ 迁移将帮助您使用jQuery&gt; 1.9
的旧函数它工作正常,可能是你使用的jQuery UI和jQuery版本不兼容,或者是其他东西弄乱了它
HTML:
<input type="image" id="subtractDate" style="height:30px;width:30px;" src="http://www.designofsignage.com/application/symbol/building/image/600x600/arrow-down-circle.jpg" />
<input type="text" id="datepicker" style="width:220px;border:0" />
<input type="image" id="addDate" style="height:30px;width:30px;" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRC01Om5stwaQi8a4E2mVnniWabNYdQihXQQ50uv3vP6V-PCePp" />
<div id="dialog-message" title="Message" style="display:none">
<p> <span style="float: left; margin: 0 7px 50px 0;">
</span> We don't have a timetable for the date you chose. Please select a date between today and the next 2 months. </p>
</div>
var disabledToolBefore = new Date();
disabledToolBefore.setDate(disabledToolBefore.getDate() - 1);
var disabledToolAfter = new Date();
disabledToolAfter.setDate(disabledToolAfter.getDate() + 33);
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM yy',
showAnim: "clip",
beforeShowDay: function (date) {
var tooltipDate = "We don't have a timetable for the date you choose. Please select a date between today and the next 32 days";
if (date.getTime() < disabledToolBefore.getTime() || date.getTime() > disabledToolAfter.getTime()) {
return [true, '', tooltipDate];
} else {
return [true, '', ''];
}
}
});
$("#datepicker").change(function () {
updateDate();
});
$("#addDate").click(function () {
addDaysToDate();
});
$("#subtractDate").click(function () {
subtractDaysToDate();
});
});
function updateDate() {
var today = new Date();
var tomorrow = new Date();
var lastDate = new Date();
var date2 = $('#datepicker').datepicker('getDate');
date2.setHours(0,0,0,0);
today.setHours(0,0,0,0);
tomorrow.setHours(0,0,0,0);
lastDate.setHours(0,0,0,0);
tomorrow.setDate(today.getDate()+1);
lastDate.setDate(today.getDate()+33);
if (date2.getTime() == today.getTime()) {
//alert(date2);
$('#datepicker').val($('#datepicker').val() + " (TODAY)");
$('#subtractDate').attr("disabled",true);
$('#addDate').attr("disabled",false);
//$('#subtractDate').attr("src","datedecrementer_gray.png");
//$('#addDate').attr("src","dateincrementer.png");
} else if (date2.getTime() == tomorrow.getTime()) {
$('#datepicker').val($('#datepicker').val() + " (TOMORROW)");
$('#subtractDate').attr("disabled",false);
$('#addDate').attr("disabled",false);
// $('#subtractDate').attr("src","datedecrementer.png");
// $('#addDate').attr("src","dateincrementer.png");
}
else if (date2.getTime() == lastDate.getTime()) {
//alert(lastDate);
//$('#addDate').addClass('newClass');
$('#addDate').attr("disabled",true);
$('#subtractDate').attr("disabled",false);
// $('#addDate').attr("src","dateincrementer_gray.png");
// $('#subtractDate').attr("src","datedecrementer.png");
}
else {
$('#addDate').attr("disabled",false);
$('#subtractDate').attr("disabled",false);
// $('#subtractDate').attr("src","datedecrementer.png");
// $('#addDate').attr("src","dateincrementer.png");
}
}
function addDaysToDate() {
var date2 = $('#datepicker').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#datepicker').datepicker('setDate', date2);
$('#datepicker').change();
}
function subtractDaysToDate() {
var date2 = $('#datepicker').datepicker('getDate');
date2.setDate(date2.getDate() - 1);
$('#datepicker').datepicker('setDate', date2);
$('#datepicker').change();
}