special datepicker for date range

Question

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>

See [this question](http://stackoverflow.com/questions/3761185/jquery-validate-date-range) for tips on using jQuery Validate for this purpose. — Blazemonger, Jun 25 '12 at 14:30
@Blazemonger The question you're linking to is different from this one, in that this question involves 2 inputs for a start and end date, but the linked question involves a single input with an arbitrary date range constraint. — xiankai, Oct 24 '12 at 03:58

score 3 · Accepted Answer · answered Jun 25 '12 at 14:28

3

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

answered Jun 25 '12 at 14:28

Josh Mein

28,107
15
76
87

Thank you this what i was looking for. is there any posibility to make it readonly so that i cannot introduce data manualy(only by selcting from date picker.And any posibility to allow to date to change after i make change to "from" date because its working at the begin but after i choose from date again and go back to chose and date i cannot do this. – jonny Jun 25 '12 at 15:05
You can just make the textboxes readonly. In the onchange of the from textbox you can either clear out or set the to textbox to a day after the from date. – Josh Mein Jun 25 '12 at 15:07

score 2 · Answer 2 · answered Jun 25 '12 at 14:21

2

Should be able to do that with a JQuery date picker!

You can then use some Javascript/JQuery validation to alert the user if they enter a date outside the range you specify.

answered Jun 25 '12 at 14:21

Danny

468
2
7

1

jQuery datepicker has setting to allow you to set a specific range for users to choose between. – Josh Mein Jun 25 '12 at 14:23
Indeed Josh Mein! There is a tab on the right hand side of the link I gave to see an example where the date is restricted -> 'Restrict Date Range'. – Danny Jun 25 '12 at 14:27
See http://jqueryui.com/demos/datepicker/#min-max -- however, this only applies to the datepicker calendar, and does NOT prevent the user from typing in an out-of-range date. See [this question](http://stackoverflow.com/questions/3761185/jquery-validate-date-range) for suggestions on using jQuery Validate to require dates to be within a a given range. – Blazemonger Jun 25 '12 at 14:27
So, either disable the user from putting input directly into the field, or validate the form values as an extra precaution on form submit using JQuery or JavaScript validation. – Danny Jun 25 '12 at 14:31

score 0 · Answer 3 · answered Jun 25 '12 at 14:28

0

You can restrict the range of selectable dates using the minDate and maxDate options of jQuery datepicker. See an example here:

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

answered Jun 25 '12 at 14:28

Forte L.

2,772
16
25

Thulasiram · Answer 4 · 2012-07-26T11:17:02.520

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

special datepicker for date range

4 Answers4