Question

我正在尝试为我的网页制作日历应用程序。

我想让这个日历可以在几个月或几年内轻松浏览而无需刷新页面。

HTML：

    <select id="monthselect">
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
    </select> 
    <select id="yearselect">
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
    </select> 
    <input type="submit" id="month-submit" value="Select Month">
    <br>
    <input type="submit" id="month-next" value="Next Month">
    <input type="submit" id="month-prev" value="Previous Month">
    <div id="month-data">
        Place for calendar
    </div>

脚本：

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="js/global.js"></script>

我希望在选择的月份时使用calendar.php（日历的功能）更改month-data div中的内容。

但是，我还有2个按钮，分别是上个月和下个月。问题是，在我从选定的月份和年份获得日历后，当我按下下一个按钮时，我无法从月份和时间获取信息。年份当前显示在页面上。

这是我的global.js javascript：

$('input#month-submit').on('click',function(){
    var month=$('select#monthselect').val();
    var year=$('select#yearselect').val();
    // $.post('ajax/calendar.php',{month:month},function(){
        $('div#month-data').load('ajax/calendar.php?month='+month+'&year='+year);

    // });
});

$('input#month-next').click(function(){
    if(month==12){
        ++year;
        month=0;
    }
    ++month;

    $('div#month-data').load('ajax/calendar.php?month='+month+'&year='+year);
});
$('input#month-prev').click(function(){
            if(month==1){
            --year;
            month=13;
        }
        --month;
    $('div#month-data').load('ajax/calendar.php?month='+month+'&year='+year);
});

我该如何解决这个问题？或者是否有任何替代逻辑来创建我的日历应用程序？

谢谢

Answer 1

请使用jQuery UI datepicker：

jsfiddle：http://jsfiddle.net/jondinham/ocgy6bez/

<input id="myDate"/>

<script>
$(document).ready(function(){
  $("#myDate").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm-dd"
  });
});
</script>

是否可以将div内容更改为php脚本，并从该脚本中获取数据？

1 个答案: