JQuery Datepicker - 通过href增加日期

时间:2013-08-06 14:51:59

标签: javascript jquery datepicker increment

我有一个JQuery datepicker范围。我想在它上面添加两个箭头按钮。按下向左箭头时,两个日期都会下降一天。与权利相反。

我目前已将日期设置为当前日期,无论我按哪个箭头。

我只发布一些代码片段,因为其中大部分内容非常相似(左箭头与右箭头和开始日期与结束日期相比)

<script>
$(function() {
$( "#startdate" ).datepicker({
onClose: function( selectedDate ) {
$( "#enddate" ).datepicker( "option", "minDate", selectedDate );
}
});
<script>

<script language="Javascript" type="text/javascript">
function reduceDate()
{

    var strCurrStart = $( "#startdate" ).datepicker( "getDate" );
    var strCurrEnd = $( "#enddate" ).datepicker( "getDate" );
    var dateCurrStart = new Date(Date.parse(strCurrStart));
    var dateCurrEnd = new Date(Date.parse(strCurrEnd));
    dateCurrStart.setDate(dateCurrStart.getDate() - 1);
    dateCurrEnd.setDate(dateCurrEnd.getDate() - 1);
    var dateNewStart = dateCurrStart.toDateString();
    var dateNewEnd = dateCurrEnd.toDateString();
    dateNewStart = new Date( Date.parse(dateNewStart));
    dateNewEnd = new Date( Date.parse(dateNewEnd));
    $( "#startdate" ).datepicker( "setDate", "dateNewStart" );
    $( "#enddate" ).datepicker( "setDate", "dateNewEnd" );
    return 1; 
}
</script>
<div align="center">
<a href="#" onClick="return reduceDate();"><img src="Black-Left-Arrow.png" alt="-1d" border="0" height="15"></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="#" onClick="return increaseDate();"><img src="Black-Right-Arrow.png" alt="-1d" border="0" height="15"></a>&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
<form>
<label for="startdate">From</label>
<input type="text" id="startdate" name="startdate" value= <%=$strStartDate%> />
<label for="enddate">to</label>
<input type="text" id="enddate" name="enddate"  value= <%=$strEndDate%>>
<input type="submit" value="Update" ><input type="hidden" name= "query" value= <%=$query%> />
</form>
</div>

2 个答案:

答案 0 :(得分:0)

您正在使用$( "#startdate" ).datepicker( "setDate", "dateNewStart" );来设置日期。但是,setDate方法只接受日期对象或日期格式的字符串。但不是像“dateNewStart”这样的字符串。 无论如何,setDate方法接受“-1”或“+1”。

所以你可以用这个

绑定你的按钮
$("#leftArrowDateStart").click(function(){
    $("#dateStart").datepicker("setDate", "-1");
}

答案 1 :(得分:0)

尝试拨打dateNewStart时尝试删除“dateNewEndsetDate周围 - 否则,您正在尝试将日期设置为字符串而不是您创建的日期

    $( "#startdate" ).datepicker( "setDate", dateNewStart );
    $( "#enddate" ).datepicker( "setDate", dateNewEnd );

但是如果您只想在一天内进行分类,那么使用.datepicker("setDate", "-1");的TCHdvlp解决方案可能更容易。