0

開始日と終了日の2つの日付の範囲日付ピッカーを早急に作成する必要があります。開始日を現在の日時より前にすることはできず、終了日を選択した開始日より前にすることはできません。これが私が欲しいものの例です。誰かがこれを作るために何を使うべきか教えてもらえますか？

http://rezervari.hotelalpin.ro/

これは私が試したものですが、機能していません： 

         </head>
       @using (Html.BeginForm("SearchFree", "Reservation", FormMethod.Get,new {id = "form" }))
     {                    

       <h7>Introduceti perioada Rezervarii</h7>
      <div class="editor-label">
       <label id="cautare" for="StartDate">Data Intrare:        </label>@(Html.JQueryUI().Datepicker("StartDate").DateFormat("mm-dd-yy").MinDate(DateTime.Today).ShowButtonPanel(true).ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))
        </div>
          <div class="editor-label">
         <label  id="cautare"  for="EndDate">Data Iesire:        </label>@(Html.JQueryUI().Datepicker("EndDate").DateFormat("mm-dd-yy").MinDate(DateTime.Today).ShowButtonPanel(true).ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))

         </div>

       <p>
       <input id="buton1" type="submit" value="Cauta camere libere" />
          </p>

  }
         <script type="text/javascript">
      $(document).ready(function () {
  $.validator.addMethod("EndDate", function (value, element) {
    var startDate = $('.StartDate').val();
    return Date.parse(startDate) <= Date.parse(value);
     }
  , "* End date must be after start date");
 $('.form').validate();
});
  </script>
4

4 に答える 4

3

jquery UIの日付ピッカーには、使用できる日付範囲オプションがあります。次のように設定できます。

HTML :

<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>

Javascript :

$(function() {
    $("#from").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onSelect: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
    });

    $("#to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onSelect: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});
于 2012-06-25T14:28:54.263 に答える
2

JQuery日付ピッカーでそれを行うことができるはずです!

次に、Javascript/JQuery 検証を使用して、指定した範囲外の日付を入力した場合にユーザーに警告することができます。

于 2012-06-25T14:21:30.137 に答える
0

jQuery datepickerのminDateおよびオプションを使用して、選択可能な日付の範囲を制限できます。maxDateここで例を見てください：

http://jqueryui.com/demos/datepicker/#min-max

于 2012-06-25T14:28:14.480 に答える
0 
<input type="text" id="tbStartDate" value="" disabled="disabled" />
<input type="text" id="tbEndDate" value="" disabled="disabled" />
<script type="text/javascript">
    $(document).ready(function () {
        $("#tbStartDate").datepicker({
            //minDate: new Date(2007, 1 - 1, 1),  //use for Date time now
            dateFormat: 'dd-mm-yy',
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onSelect: function (dateText, inst) {
                var $endDate = $('#tbStartDate').datepicker('getDate');
                $endDate.setDate($endDate.getDate() + 1);
                $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);
            },
            onClose: function (dateText, inst) {
                //$("#StartDate").val($("#tbStartDate").val());
            }
        });

        $("#tbEndDate").datepicker({
            //minDate: new Date($("#tbStartDate").datepicker('getDate')),
            dateFormat: 'dd-mm-yy',
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Content/Calendar.png',
            buttonText: 'Click here (date)',
            onSelect: function (dateText, inst) {
                $('#tbStartDate').datepicker("option", 'minDate', new Date($("#tbEndDate").datepicker('getDate')));
            },
            onClose: function (dateText, inst) {
                //$("#EndDate").val($("#tbEndDate").val());
            }
        });

            var $endDate = $('#tbStartDate').datepicker('getDate');
            $endDate.setDate($endDate.getDate() + 1);
            $('#tbEndDate').datepicker('setDate', $endDate).datepicker("option", 'minDate', $endDate);              });
</script>
于 2012-07-26T10:43:10.497 に答える