Cancel SingleDate

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

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

    $(value).daterangepicker({

      drops: "up",

      showDropdowns: true,

      singleDatePicker: true,

    });

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>



<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

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.

asked Jan 16 at 16:13

David

1,080714

2

I can't reproduce your issue from chrome browser, can you explain the steps to fall into the problem?

– Shidersz
Jan 18 at 22:22

@Shidersz - The checkDateInput function would prevent daterangepicker from initializing on Chrome. The idea is that if the web browser has a date input UI, then use it, otherwise if it doesn't then use daterangepicker in its place. So if you launch IE, click on a date field, but click anywhere outside of the daterangepicker UI to simulate a user not selecting a value, it will replicate the issue.

– David
Jan 18 at 22:50

add a comment |

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

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

    $(value).daterangepicker({

      drops: "up",

      showDropdowns: true,

      singleDatePicker: true,

    });

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>



<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

asked Jan 16 at 16:13

David

1,080714

2

I can't reproduce your issue from chrome browser, can you explain the steps to fall into the problem?

– Shidersz
Jan 18 at 22:22

@Shidersz - The checkDateInput function would prevent daterangepicker from initializing on Chrome. The idea is that if the web browser has a date input UI, then use it, otherwise if it doesn't then use daterangepicker in its place. So if you launch IE, click on a date field, but click anywhere outside of the daterangepicker UI to simulate a user not selecting a value, it will replicate the issue.

– David
Jan 18 at 22:50

add a comment |

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

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

    $(value).daterangepicker({

      drops: "up",

      showDropdowns: true,

      singleDatePicker: true,

    });

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>



<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

asked Jan 16 at 16:13

David

1,080714

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

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

    $(value).daterangepicker({

      drops: "up",

      showDropdowns: true,

      singleDatePicker: true,

    });

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>



<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

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

    $(value).daterangepicker({

      drops: "up",

      showDropdowns: true,

      singleDatePicker: true,

    });

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>



<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

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

    $(value).daterangepicker({

      drops: "up",

      showDropdowns: true,

      singleDatePicker: true,

    });

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>



<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

jquery daterangepicker

asked Jan 16 at 16:13

David

1,080714

asked Jan 16 at 16:13

David

1,080714

asked Jan 16 at 16:13

David

1,080714

asked Jan 16 at 16:13

David

1,080714

asked Jan 16 at 16:13

David

1,080714

2

I can't reproduce your issue from chrome browser, can you explain the steps to fall into the problem?

– Shidersz
Jan 18 at 22:22

@Shidersz - The checkDateInput function would prevent daterangepicker from initializing on Chrome. The idea is that if the web browser has a date input UI, then use it, otherwise if it doesn't then use daterangepicker in its place. So if you launch IE, click on a date field, but click anywhere outside of the daterangepicker UI to simulate a user not selecting a value, it will replicate the issue.

– David
Jan 18 at 22:50

add a comment |

2

I can't reproduce your issue from chrome browser, can you explain the steps to fall into the problem?

– Shidersz
Jan 18 at 22:22

@Shidersz - The checkDateInput function would prevent daterangepicker from initializing on Chrome. The idea is that if the web browser has a date input UI, then use it, otherwise if it doesn't then use daterangepicker in its place. So if you launch IE, click on a date field, but click anywhere outside of the daterangepicker UI to simulate a user not selecting a value, it will replicate the issue.

– David
Jan 18 at 22:50

I can't reproduce your issue from chrome browser, can you explain the steps to fall into the problem?

– Shidersz
Jan 18 at 22:22

@Shidersz - The checkDateInput function would prevent daterangepicker from initializing on Chrome. The idea is that if the web browser has a date input UI, then use it, otherwise if it doesn't then use daterangepicker in its place. So if you launch IE, click on a date field, but click anywhere outside of the daterangepicker UI to simulate a user not selecting a value, it will replicate the issue.

– David
Jan 18 at 22:50

add a comment |

2 Answers
2

active

oldest

votes

+100

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

  $.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'));                

   });   

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>





<div class="container">

<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

</div>

edited Jan 19 at 10:12

answered Jan 19 at 10:04

Udara Kasun

1,031515

add a comment |

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:

    <!-- daterangepicker -->

<!-- FR: https://github.com/dangrossman/daterangepicker/issues/320 switched js loading order -->

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

edited Jan 19 at 9:07

answered Jan 19 at 8:48

Franco Rondini

7,64373356

The proposed solution is similar to what is shown in the example5 taken from the official documentation if this answer does not fully meet your expectations I hope at least it can be inspirational, or let me message and I'll try to better understand what the need is

– Franco Rondini
Jan 19 at 8:54

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54221103%2fcancel-singledate%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

+100

 

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

  $.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'));                

   });   

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>





<div class="container">

<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

</div>

edited Jan 19 at 10:12

answered Jan 19 at 10:04

Udara Kasun

1,031515

add a comment |

+100

 

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

  $.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'));                

   });   

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>





<div class="container">

<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

</div>

edited Jan 19 at 10:12

answered Jan 19 at 10:04

Udara Kasun

1,031515

add a comment |

+100

 

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

  $.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'));                

   });   

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>





<div class="container">

<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

</div>

edited Jan 19 at 10:12

answered Jan 19 at 10:04

Udara Kasun

1,031515

 

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

  $.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'));                

   });   

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>





<div class="container">

<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

</div>

 

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

  $.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'));                

   });   

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>





<div class="container">

<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

</div>

 

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 <input type="date" />

if (checkDateInput()) {

  // Change the types on the inputs that are dates

  $('.date').prop('type', 'date');

} else {

  // Iterate through each <input class="date" ... />

  $.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'));                

   });   

  });

}

<!-- jquery -->

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>



<!-- bootstrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>



<!-- daterangepicker -->

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>





<div class="container">

<form>

  <fieldset>

    <legend>Dates</legend>

    <div class="form-group">

      <label for="date_written">Date Written</label>

      <input class="form-control date" id="date_written" name="date_written" required="required" />

    </div>

    <div class="form-group">

      <label for="effective_date">Effective Date</label>

      <input class="form-control date" id="effective_date" name="effective_date" required="required" />

    </div>

    <div class="form-group">

      <label for="cancellation_date">Cancellation Date</label>

      <input class="form-control date" id="cancellation_date" name="cancellation_date" />

    </div>

  </fieldset>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

</div>

edited Jan 19 at 10:12

answered Jan 19 at 10:04

Udara Kasun

1,031515

edited Jan 19 at 10:12

answered Jan 19 at 10:04

Udara Kasun

1,031515

answered Jan 19 at 10:04

Udara Kasun

1,031515

answered Jan 19 at 10:04

Udara Kasun

1,031515

add a comment |

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:

    <!-- daterangepicker -->

<!-- FR: https://github.com/dangrossman/daterangepicker/issues/320 switched js loading order -->

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

edited Jan 19 at 9:07

answered Jan 19 at 8:48

Franco Rondini

7,64373356

The proposed solution is similar to what is shown in the example5 taken from the official documentation if this answer does not fully meet your expectations I hope at least it can be inspirational, or let me message and I'll try to better understand what the need is

– Franco Rondini
Jan 19 at 8:54

add a comment |

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:

    <!-- daterangepicker -->

<!-- FR: https://github.com/dangrossman/daterangepicker/issues/320 switched js loading order -->

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

edited Jan 19 at 9:07

answered Jan 19 at 8:48

Franco Rondini

7,64373356

The proposed solution is similar to what is shown in the example5 taken from the official documentation if this answer does not fully meet your expectations I hope at least it can be inspirational, or let me message and I'll try to better understand what the need is

– Franco Rondini
Jan 19 at 8:54

add a comment |

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:

    <!-- daterangepicker -->

<!-- FR: https://github.com/dangrossman/daterangepicker/issues/320 switched js loading order -->

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

edited Jan 19 at 9:07

answered Jan 19 at 8:48

Franco Rondini

7,64373356

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:

    <!-- daterangepicker -->

<!-- FR: https://github.com/dangrossman/daterangepicker/issues/320 switched js loading order -->

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>

<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet"/>

edited Jan 19 at 9:07

answered Jan 19 at 8:48

Franco Rondini

7,64373356

edited Jan 19 at 9:07

answered Jan 19 at 8:48

Franco Rondini

7,64373356

answered Jan 19 at 8:48

Franco Rondini

7,64373356

answered Jan 19 at 8:48

Franco Rondini

7,64373356

The proposed solution is similar to what is shown in the example5 taken from the official documentation if this answer does not fully meet your expectations I hope at least it can be inspirational, or let me message and I'll try to better understand what the need is

– Franco Rondini
Jan 19 at 8:54

add a comment |

The proposed solution is similar to what is shown in the example5 taken from the official documentation if this answer does not fully meet your expectations I hope at least it can be inspirational, or let me message and I'll try to better understand what the need is

– Franco Rondini
Jan 19 at 8:54

The proposed solution is similar to what is shown in the example5 taken from the official documentation if this answer does not fully meet your expectations I hope at least it can be inspirational, or let me message and I'll try to better understand what the need is

– Franco Rondini
Jan 19 at 8:54

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku