3 
<!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&#39;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&#39;t have a timetable for the date you chose. Please
                select a date between today and the next 2 months.</p>
        </div>
    </body>

</html>
4

2 回答 2

0

我在这里试过你的代码

此外，您可以尝试从此处包含迁移插件：http: //jquery.com/download/ 迁移将帮助您使用 jQuery >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&#39;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&#39;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();
}
于 2013-08-30T08:27:01.520 回答
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("disabled","disabled"); }

将这一行从

 $('#subtractDate').attr("disabled",true);

至

$('#subtractDate').attr("disabled","disabled");
于 2013-08-30T06:31:19.450 回答