0

テンプレートで Bootstrap DateTime ウィジェットを使用しています。必要に応じて特定の日付、時間、または月の範囲を選択するために、2 つのウィジェット (From、To) を並べて配置しました。ユーザーが常に「From」よりも小さい「To」範囲を選択できるように、両方のウィジェットをリンクしました。その目的のために、次のような数値で日付を加算または減算しました。

        var evDate = ev.date;
        if (evDate != null) {
            $('.'+reportCategoryTo.id).
                        datetimepicker('setStartDate', evDate);
            var evDateObject = new Date(evDate.valueOf());
            var reportDateTimeCategoryFrom = report_date_time_category[0][0];
            var reportDateTimeCategoryTo = report_date_time_category[1][0];
            if (reportDateTimeCategoryFrom.category.indexOf("Daily") !== -1) {
                var newDate = evDateObject.setDate(evDateObject.getDate() + 31);
            }
            else if (reportDateTimeCategoryFrom.category.indexOf("Monthly") !== -1) {
                var newDate = evDateObject.setDate(evDateObject.getDate() + 365);
            }
            else {
                var newDate = evDateObject.setDate(evDateObject.getHours() + 24);
            }

            var newDateObject = new Date(newDate);
            $('.'+reportCategoryTo.id).
                        datetimepicker('setEndDate', newDateObject);
            }
        else {
            console.log('The change is null',evDate);
            $('.'+reportCategoryTo.id).
                            datetimepicker('setStartDate', null);
            $('.'+reportCategoryTo.id).
                            datetimepicker('setEndDate', null);
            }
        });

これは、ユーザーが 5 月 30 日などを選択した場合の範囲を示しません。次に、Datejs日付などの加算または減算に役立つことがわかりました。次のようにDatejsを使用しました。

            if (reportDateTimeCategoryFrom.category.indexOf("Daily") !== -1) {
                var newDate = evDateObject.setDate(evDateObject.getDate().add(31).days());
            }
            else if (reportDateTimeCategoryFrom.category.indexOf("Monthly") !== -1) {
                var newDate = evDateObject.setDate(evDateObject.getDate().add(365));
            }
            else {
                var newDate = evDateObject.setDate(evDateObject.getHours().addHours(24));

しかし、私のコンソールはこのエラーを表示します:

TypeError: evDateObject.getDate(...).add is not a function

ファイルをインポートしましたdate.jsが、それでも機能しません。助けてください！

4

2 に答える 2

1

実際には、実装したい機能についてそれほど心配する必要はありません。jQuery UI を使用できれば、非常に簡単です。以下の例を使用すると、jQuery ライブラリがニーズに対応します

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<form id="process_form" class="form" action="process.php" method="POST">
<label for="DOA">From:</label>
<input type="text" id="txtDOA" name="txtDOA" required="" class="hasDatepicker">
<label for="DOD">To:</label>
<input type="text" id="txtDOD" name="txtDOD" required="" class="hasDatepicker">
</form>

$(function()
  { 
        $("#txtDOA").datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1,
          onClose: function( selectedDate ) { $( "#txtDOD" ).datepicker( "option", "minDate", selectedDate ); }
        });
        $("#txtDOD").datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 1,
          onClose: function( selectedDate ) { $("#txtDOA").datepicker( "option", "maxDate", selectedDate ); }
        });   
  });
于 2013-06-15T08:17:38.813 に答える