Member Avatar for ramsiva

given below my code is displaying two date pickers

  <script>
  $(function() {
    $( "#from" ).datepicker({
            minDate: -2,
      maxDate: "+1d",

      changeMonth: true,
      numberOfMonths: 2,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
            minDate: -2,
            maxDate: "+1d",     
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </script>

but i neet to set and use only one date picker.

any body help me.
by using only datepicker function.
not daterangepicker.

please help me to get only one date picker to set date range using datepicker ui

  • 2 Contributors
  • 3 Replies
  • 846 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by ramsiva

Dani AI

Generated

A single jQuery UI datepicker can act as a start/end selector by treating the first click as the start date and the second click as the end date. This builds on 's idea of remembering the first selection and on 's remark about using onSelect/onClose, but adds visual range highlighting via beforeShowDay and automatic swapping when the second click is earlier than the first.

Pattern: first selection sets start, second selection sets end (swapped if needed), the input is filled with "start - end", and beforeShowDay adds a CSS class to every day inside the chosen range. Example implementation:

var fmt = "mm/dd/yy", rangeStart = null, rangeEnd = null;

$("#range").datepicker({
  numberOfMonths: 2,
  changeMonth: true,
  // add minDate / maxDate here if required
  onSelect: function(dateText) {
    var d = $.datepicker.parseDate(fmt, dateText);
    if (rangeStart && !rangeEnd) {
      // finish range (swap if necessary)
      if (d < rangeStart) { rangeEnd = rangeStart; rangeStart = d; }
      else { rangeEnd = d; }
      $(this).val($.datepicker.formatDate(fmt, rangeStart) + " - " + $.datepicker.formatDate(fmt, rangeEnd));
      $(this).datepicker("hide");
    } else {
      // start new range
      rangeStart = d;
      rangeEnd = null;
      $(this).val($.datepicker.formatDate(fmt, rangeStart));
    }
    $(this).datepicker("refresh");
  },
  beforeShowDay: function(date) {
    if (!rangeStart) return [true, ""];
    if (!rangeEnd) return [true, date.getTime() === rangeStart.getTime() ? "range-start" : ""];
    return [true, (date >= rangeStart && date <= rangeEnd) ? "in-range" : ""];
  }
});
.ui-datepicker .in-range a { background:#2b85c3; color:#fff; }
.ui-datepicker .range-start a { background:#195a78; color:#fff; }

Notes: carry any original minDate/maxDate constraints into the options; support manual typing by parsing the input on focus and setting rangeStart/rangeEnd; add a clear control that resets both variables and calls datepicker("refresh"). This keeps the UI compact while providing the same validation and visual cues that a two-input setup offers.

Recommended Answers

All 3 Replies

Member Avatar for AleMonteiro

Uhm, what you're asking seems strange to me... if you need to inputs of dates why do you want to use only one input?

Anyway, once the first date is selected you can store it in a var and clear the input to get the second date:

        var firstDate = false,
            secondDate;
        $( "#from" ).datepicker({
         minDate: -2,
          maxDate: "+1d",
          changeMonth: true,
          numberOfMonths: 2,
          onClose: function( selectedDate ) {
              if ( firstDate === false ) { // if first selection
                  firstDate = selectedDate; // store the first date
                  $("#from").val('').datepicker( "option", "minDate", selectedDate);  // set the min date of it self
              }
              // if second date...
              else {
                  secondDate = selectedDate; //
              }
          }
        });

I don't recommend, but it should work.

Edited by AleMonteiro
Member Avatar for AleMonteiro

lol, could at least say what you downvoted my answer

Member Avatar for ramsiva

Using Onclose and Onselect on datepicker we can do dude

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.