Question

我正在编写以下代码。

<!doctype html> 
<html><head>
  <meta charset="utf-8" /> 
  <title>jQuery UI Datepicker - Icon trigger</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>
$(function () {
    $("#datepicker").datepicker({
        minDate: -0,
        maxDate: "+1M +2D",
        showOn: "button",
        buttonImage: "calendar.png",
        buttonImageOnly: true,
        dateFormat: 'D dd MM yy' });
    $.datepicker.formatDate('yy-mm-dd');
});
 function updateDate(){
    var inputDate=document.getElementById('datepicker').value; 
    var selectedDate=new Date(inputDate);
    var today=new Date();
    var tomorrow=new Date();
    tomorrow.setDate(today.getDate()+1);
    selectedDate.setHours(0,0,0,0);
    today.setHours(0,0,0,0);
    tomorrow.setHours(0,0,0,0);
    var DaysFull=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
    var DaysShort=["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
    var MonthsFull=["January","February","March","April","May","June","July","August","September","October","November","December","January"];
    var MonthsShort=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan"];
    var finalDate=DaysShort[selectedDate.getDay()]+" "+selectedDate.getDate()+" "+MonthsFull[selectedDate.getMonth()];
    if(selectedDate.getTime() == today.getTime()){

        document.getElementById('datepicker').value=finalDate+" (Today)";
    }
    else if(selectedDate.getTime() == tomorrow.getTime()){document.getElementById('datepicker').value=finalDate+" (Tomorrow)";}
    else {document.getElementById('datepicker').value=finalDate;}
}

function addDaysToDate() {
var date1= document.getElementById('datepicker').value;
var date = new Date( Date.parse( date1 ) ); 
date.setDate( date.getDate() + 1 );
alert(date);
document.getElementById('datepicker').value=date;
}

</script>
</head>
<body>
<form><input type="text" id="datepicker" onchange="javascript:updateDate()" style="width:160px" />
<button onclick="addDaysToDate()">add</button></form>
</body></html>

我点击了一个按钮，文本框中的日期应该增加1到接下来的32天而不是beyong但是上面的代码会增加日期和值从文本框中消失而不是显示...

Answer 1

您正在设置日期字段以设置其他文本，以使日期不是有效日期对象并破坏插件。

您正在使用datepicker插件，因此您可以使用getDate和setDate方法来获取/设置值作为日期对象。

文档：http://api.jqueryui.com/datepicker/#method-getDate和http://api.jqueryui.com/datepicker/#method-setDate

我通过使用附加字段来更改您的代码，以显示日期是今天还是明天：

$(function () {
    $("#datepicker").datepicker({
        minDate: -0,
        maxDate: "+1M +2D",
        showOn: "button",
        buttonImage: "calendar.png",
        buttonImageOnly: true,
        dateFormat: 'D dd MM yy'
    });
    $("#datepicker").change(function () {
        updateDate();
    });
    $("#addDate").click(function () {
        addDaysToDate();
    });
});

function updateDate() {
    var today = new Date();
    var tomorrow = new Date();
    tomorrow.setDate(today.getDate() + 1);
    var date2 = $('#datepicker').datepicker('getDate');

    date2.setHours(0,0,0,0);
    today.setHours(0,0,0,0);
    tomorrow.setHours(0,0,0,0);

    if (date2.getTime() == today.getTime()) {
        $('#todtom').text(" (Today)");
    } else if (date2.getTime() == tomorrow.getTime()) {
        $('#todtom').text(" (Tomorrow)");
    } else {
        $('#todtom').text("");
    }
}

function addDaysToDate() {
    var date2 = $('#datepicker').datepicker('getDate');
    date2.setDate(date2.getDate() + 1);
    $('#datepicker').datepicker('setDate', date2);
    $('#datepicker').change();
}

我改变了代码以使用完整的jQuery代码而不是混合使用jQuery和JS进行DOM操作。

演示：

用于在文本框中增加日期的按钮

1 个答案: