Bootstrap datepicker date range from and to

Question

I have a problem related to bootstrap3 datepicker, this is my code:

$(document).ready( /* This is the function for multi datepicker */ function () { $(document).on('focus',".datepickers", function(){ $("#searchByCreateDate").datepicker({ endDate : new Date(), beforeShow : function() { $(this).datepicker({maxDate: 0}); }, autoclose:true, altFormat: 'yy-mm-dd', format: 'yyyy-mm-dd' }); $("#searchByToDate").datepicker({ endDate : new Date(), beforeShow : function() { $(this).datepicker('option','startDate', $('#searchByCreateDate').val() ); }, altFormat: "yy-mm-dd", format: 'yyyy-mm-dd', autoclose:true }); }); } );

I have two datepickers - one for from date and second for to date. My requirement is when user selects from date then to date starts with from date and previous dates are hidden and in to date user can only select next three months in single time.

please reword your question. It's really really hard to read and understand what exactly you need — Fabian Bettag
– Fabian Bettag, Commented Sep 13, 2016 at 12:02

Community · Accepted Answer · 2017-05-23 11:51:44Z

5

You need to set startDate and endDate to your datepicker. As you don't know the needed dates beforehand, you have to add them when first is chosen - onChange. You should add this..

$('#searchByCreateDate').on("change", function(){ //when chosen from_date, the end date can be from that point forward var startVal = $('#searchByCreateDate').val(); $('#searchByToDate').data('datepicker').setStartDate(startVal); }); $('#searchByToDate').on("change", function(){ //when chosen end_date, start can go just up until that point var endVal = $('#searchByToDate').val(); $('#searchByCreateDate').data('datepicker').setEndDate(endVal ); });

Info taken here.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Sep 13, 2016 at 12:21

Mike B

2,7942 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike B Over a year ago

because they are executed right when your page is loaded. Thus your input fields are empty and restrictions are not set. that datepicker constructor is executed only once. it doesn't work 'live' listening to fields all the time.

Mike B Over a year ago

you can't. You have to add these onchange listeners, that I have in my answer. That code listens to when elements are changed and edits your datepickers. you can add these lines at the end of document.ready and it should work.

mohaa8844 Over a year ago

this works fine, but still has an issue that is the event keeps looping

mohaa8844 Over a year ago

this could help .on("change", function(e){ var endVal = $(this).val(); if($(this).val()!="" && getFormattedDate($('#workFromDate').data('datepicker').getEndDate())!= endVal) $('#workFromDate').data('datepicker').setEndDate(endVal); });

Amjo Over a year ago

This snippet does exactly what it should do. it's odd that it isn't marked as the correct answer

Collectives™ on Stack Overflow

Bootstrap datepicker date range from and to

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related