Cancel SingleDate

Question

I am using daterangepicker v3.0.3 and initializing all of my inputs that have the .date class to where they are single date pickers using the following code:

function checkDateInput() {
  var input = document.createElement('input');
  input.setAttribute('type','date');

  var notADateValue = 'not-a-date';
  input.setAttribute('value', notADateValue); 

  return (input.value !== notADateValue);
}

// Check if the browser supports the 
if (checkDateInput()) {
  // Change the types on the inputs that are dates
  $('.date').prop('type', 'date');
} else {
  // Iterate through each 
  $.each($('.date'), function(key, value) {
    $(value).daterangepicker({
      drops: "up",
      showDropdowns: true,
      singleDatePicker: true,
    });
  });
}















  
    Dates
    
      Date Written
      
    
    
      Effective Date
      
    
    
      Cancellation Date

The problem that I'm running into is if I decide not to select a date and click outside the calendar, it will automatically input today's date when instead I'd prefer that it not insert anything at all. I assume that I need to set the autoUpdateInput to False, but I don't know how to manually update the input if a date was actually selected.

user_6584883 · Answer

While passing in a callback to the constructor is the easiest way to listen for changes in the selected date range, you can also do something every time the apply button is clicked even if the selection hasn't changed

 
function checkDateInput() {
  var input = document.createElement('input');
  input.setAttribute('type','date');

  var notADateValue = 'not-a-date';
  input.setAttribute('value', notADateValue); 
return false;
   
  return (input.value !== notADateValue);
}

// Check if the browser supports the 
if (checkDateInput()) {
  // Change the types on the inputs that are dates
  $('.date').prop('type', 'date');
} else {
  // Iterate through each 
  $.each($('.date'), function(key, value) {
    $(value).daterangepicker({
      drops: "auto",
      showDropdowns: true,
      singleDatePicker: true,
       autoUpdateInput: false,        
    }).on('hide.daterangepicker', function(ev, picker) {
       //do something, like clearing an input    
     // $(this).val(''); if you want to clear un comment this
   }).on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('YYYY-MM-DD'));                
   });   
  });
}

















  
    Dates
    
      Date Written
      
    
    
      Effective Date
      
    
    
      Cancellation Date

user_1657028 · Answer

If I understand the requirement, the solution should be changing autoUpdateInput: false and handling both'apply.daterangepicker' and 'cancel.daterangepicker'

I report only the piece of code changed below

    $.each($('.date'), function(key, value) {

    $(value).daterangepicker({
    drops: "up",
    showDropdowns: true,
    singleDatePicker: true,
    autoUpdateInput: false 
  });

  $(value).on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('MM/DD/YYYY')); 
  });

  $(value).on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
    });

Also, I think you should change the order of inclusion of js this way:

Cancel SingleDate

2 Answers