Reputation: 797

special datepicker for date range

I need urgently to make a range datepicker for two dates :start date and end date. Start date cannot be before date time now and end date cannot be before choosed start date. Here is an example of what i want.Can somebody tell me what to use to make this?

http://rezervari.hotelalpin.ro/

this is what i tried but is not working:

         </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>

Upvotes: 0

Answers (4)

Thulasiram

Reputation: 8552

<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>

Upvotes: 0

Josh Mein

Reputation: 28645

The jquery UI datepicker has a date range option that you can use. You can set it up like this:

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 );
        }
    });
});

Upvotes: 3