javascript - Daterangepicker - unable to select today's date - Stack Overflow

admin管理员组

文章数量:1403468

I used below code for date picker in my application. daterangepicker plugin used.

/

HTML

<input class="form-control input-lg" id="tripOne" name="tripOne" />

JS:

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);

$('input[name="tripOne"]').daterangepicker({
"autoApply": true,
"autoUpdateInput": false,
"singleDatePicker": true,
"minDate": today,
"maxDate": maxLimitDate,
"opens": "left",
"locale": {
    format: 'DD MMM YYYY'
  }
}, function (start, end) {
  $("#tripOne").val(start.format('DD MMM YYYY'));
  $('#tripOne').parent().parent().removeClass('has-error');
});

$(function() {
    $('.calendar.right').show();
});

But, i cant able to select 'Today's date' or 'already selected date'. Which is mandatory for our requirement. Please let me know how to solve this issue?

Thanks

Thanks

I used below code for date picker in my application. daterangepicker plugin used.

https://jsfiddle/jkenluv/z9tgdh7k/

HTML

<input class="form-control input-lg" id="tripOne" name="tripOne" />

JS:

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);

$('input[name="tripOne"]').daterangepicker({
"autoApply": true,
"autoUpdateInput": false,
"singleDatePicker": true,
"minDate": today,
"maxDate": maxLimitDate,
"opens": "left",
"locale": {
    format: 'DD MMM YYYY'
  }
}, function (start, end) {
  $("#tripOne").val(start.format('DD MMM YYYY'));
  $('#tripOne').parent().parent().removeClass('has-error');
});

$(function() {
    $('.calendar.right').show();
});

But, i cant able to select 'Today's date' or 'already selected date'. Which is mandatory for our requirement. Please let me know how to solve this issue?

Thanks

Thanks

• javascript
• jquery
• daterangepicker
• bootstrap-daterangepicker

Share Improve this question Follow asked Feb 18, 2017 at 7:36 TDGTDG 1,30244 gold badges2121 silver badges5050 bronze badges 5

• Your code seems to work just fine! Where is the problem? – Abdelhakim AKODADI Commented Feb 18, 2017 at 7:42
• For ex: on load.. select 18th Feb (today's date).. it wont be clickable. But, if you select 19th.. it will work – TDG Commented Feb 18, 2017 at 8:13
• I don't know why it's not working for you. But it's working for me. I can select today's date. – Abdelhakim AKODADI Commented Feb 18, 2017 at 8:23
• Hi.. After page loaded, you can select 18th Feb (today)..will value stored in input field?? – TDG Commented Feb 18, 2017 at 8:29
• Select 19th feb for example.. delete input feild manually. If you can able to select 19th feb again and date showing in input field?? – TDG Commented Feb 18, 2017 at 8:29

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

Not the most beautiful solution but you can alter daterangepicker.js and remove the following line in the 'hide' method:

if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate))

It will work but you can never update daterangepicker.js. It should be better to overwrite the hide method.

Add below function after initialization of daterangepicker:

$('input[name="tripOne"]').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
 });

Please read the doc

If you're using a date range as a filter, you may want to attach a picker to an input but leave it empty by default. This example shows how to acplish that using the autoUpdateInput setting, and the apply and cancel events.

So either you can remove autoUpdateInput line or you can set it to true.

"autoUpdateInput": false,

OR

"autoUpdateInput": true,

var nowDate = new Date();
  var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
  var maxLimitDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()+360, 0, 0, 0, 0);

  $('input[name="tripOne"]').daterangepicker({
    "autoApply": true,
    "autoUpdateInput": false,
    "singleDatePicker": true,
    "minDate": today,
    "maxDate": maxLimitDate,
    "locale": {
        format: 'DD MMM YYYY'
    }
  },function(start) {
      $("#tripOne").val(start.format('DD MMM YYYY'));
      $('#tripOne').parent().parent().removeClass('has-error');
      setTimeout(function(){
          $('.daterangepicker').addClass('returnTripEndDatePicker');
          $('.departure--date').hide();
          $(".returnTripEndDatePicker").prepend("<div class='departure--date'>Select Return Date</div>");
          $( "#tripTwo" ).focus();
      },120);
      var returnTripStartDate = new Date(Date.parse(start));
      $(function() {
        $('.calendar.right').show();
      });
  });
  $('input[name="tripTwo"]').daterangepicker({
        "autoApply": true,
        "autoUpdateInput": false,
        "singleDatePicker": true,
        "minDate": today,
        "maxDate": maxLimitDate,
        "locale": {
            format: 'DD MMM YYYY'
        }
      },function(end) {
            $("#tripTwo").val(end.format('DD MMM YYYY'));
            $('#tripTwo').parent().parent().removeClass('has-error');
      });
  $('input[name="tripOne"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
      });
      $('input[name="tripTwo"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD MMM YYYY'));
      });

Do

$("element1").datetimepicker({ maxDate: moment.endOf( 'day' ) })
$("element2").datetimepicker({ maxDate: moment.endOf( 'day' ) })

If you use minDate do the opposite

$("element1").datetimepicker({ minDate: moment.startOf( 'day' ) })
$("element2").datetimepicker({ minDate: moment.startOf( 'day' ) })

The following code can be used to fix the issue and keep the original script updatable, or load it from CDN:

drpDecorator($('input[class="date-input"]').daterangepicker({
        singleDatePicker: true,
        minYear: 1950,
        maxYear: parseInt(moment().format('YYYY'), 10),
        autoApply: true,
        autoUpdateInput: false,
        "showDropdowns": false,
        locale: {
            firstDay: 1,
            cancelLabel: 'Reset',
            format: 'MM/DD/YY'
        }
    }, function (chosen_date) {
        $(this)[0].element.val(chosen_date.format('MM/DD/YY'));
    })
)


function drpDecorator($dateInput) {
    if ($dateInput.length === 0) {
        return
    }
    const drp = $dateInput.data("daterangepicker");

    drp.hide = function (e) {
        if (!this.isShowing) return;

        //inplete date selection, revert to last values
        if (!this.endDate) {
            this.startDate = this.oldStartDate.clone();
            this.endDate = this.oldEndDate.clone();
        }

        this.callback(this.startDate.clone(), this.endDate.clone(), this.chosenLabel);

        //if picker is attached to a text input, update it
        this.updateElement();

        $(document).off('.daterangepicker');
        $(window).off('.daterangepicker');
        this.container.hide();
        this.element.trigger('hide.daterangepicker', this);
        this.isShowing = false;
    }
}

https://jsfiddle/pwd5sLvf/

I has the same problem. You need to edit the daterangepicker.js source code. The best solution is to define difference between cancel and apply. To do this I removed the following code from the hide method and pasted it into the clickApply method. And for the correct operation of autoApply and clicking on the current date, I added a check for an empty control value.

        //inplete date selection, revert to last values
        if (!this.endDate) {
            this.startDate = this.oldStartDate.clone();
            this.endDate = this.oldEndDate.clone();
        }

        //if a new date range was selected, invoke the user callback function
        if (!this.startDate.isSame(this.oldStartDate) || ($(this.element).is(':text') && $(this.element).val() === '') || !this.endDate.isSame(this.oldEndDate))
            this.callback(this.startDate.clone(), this.endDate.clone(), this.chosenLabel);

        //if picker is attached to a text input, update it
        this.updateElement();

本文标签： javascriptDaterangepickerunable to select today39s dateStack Overflow