JQuery日期选择器-通过href增加日期

JQuery Datepicker - Increment Date via href

本文关键字：日期 增加 href 选择器 JQuery -通过      更新时间：2023-09-26

我有一个JQuery日期选择器范围。我想在上面添加两个箭头按钮。当按下左箭头时，两个日期都会下降一天。右边的对面。

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

我只是发布了一些代码片段，因为其中大部分都非常相似（左箭头与右箭头以及开始日期与结束日期）

<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>

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

所以你可以用这个绑定你的按钮

$("#leftArrowDateStart").click(function(){
    $("#dateStart").datepicker("setDate", "-1");
}

当您尝试调用setDate时，请尝试删除dateNewStart和dateNewEnd周围的"-否则，您将尝试将日期设置为字符串，而不是创建的日期

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

但如果您只想在一天内订阅TCHdvlp解决方案，使用.datepicker("setDate", "-1");可能会更容易。

相关文章：