Changing startDate and endDate params of BootStrap Datepicker on change of a select Box

Question

What I am trying to do :

I am trying to set the startDate and endDate params depending on the current value of year. I think that currenty what I have just sets the params onLoad, however I need to know if there is a way which can enable me to trigger the updation of startDate / endDate Params on some event

Here is the code :

html :

<select id="mySelect"> <option value="2012-2013">2012-2013</option> <option value="2012-2013">2013-2014</option> <option value="2012-2013">2015-2016</option> </select> <input type="text" id="myStartDate" placeholder="dd-mon-yyyy" data-date-format="dd-M-yyyy" readonly="readonly">

js :

var myStartDt = $('#myStartDate') .datepicker({ startDate: getStartDate(), endDate: getEndDate() }).on('changeDate', function (ev) { myStartDt.hide(); }).data('datepicker'); function getStartDate() { var f = $('#mySelect').val().split('-'); return '01/04/' + f[0]; } function getEndDate() { var f = $('#mySelect').val().split('-'); alert(f); return '31/03/' + f[1]; }

fiddle : http://jsfiddle.net/fRzyL/1/

ivkremer · Accepted Answer · 2014-06-24 11:16:32Z

24

I think you can simply use setStartDate and setEndDate methods: http://jsfiddle.net/ivkremer/fRzyL/21/

answered Jun 24, 2014 at 11:16

ivkremer

1,2753 gold badges25 silver badges46 bronze badges

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

2 Comments

Quasipickle Over a year ago

Thanks for the comment. I don't see anywhere else on the interwebs where it states you have to access the datepicker object via data().

Pieter van Ginkel Over a year ago

Even though this works perfectly. For me I could set the start/end date once while loading the page, but changes weren't applied later on. Using this method however does allow dynamically updating the start/end date.

Rohan Kumar · Accepted Answer · 2013-10-09 11:07:27Z

Change the values of option 2013-2014 and 2015-2016 like

<select id="mySelect"> <option value="2012-2013">2012-2013</option> <option value="2013-2014">2013-2014</option> <option value="2015-2016">2015-2016</option> </select>

Change this to js,

var myStartDt; function mydatepicker(){ myStartDt= $('#myStartDate') .datepicker({ startDate: getStartDate(), endDate: getEndDate() }).on('changeDate', function (ev) { myStartDt.hide(); }).data('datepicker'); } $("#mySelect").on('change',function(){ // alert(this.value) $('#myStartDate').datepicker("remove"); mydatepicker();//$('#id-element').datepicker("destroy"); }); mydatepicker();

Fiddle

does not work, already tried that before. I think that when the page loads, the datepicker gets the values from getStartDate and getEndDate functions and set it as params (only once). As a result, no matter what option I choose, it will show dates for 2012-2013

Collectives™ on Stack Overflow

Changing startDate and endDate params of BootStrap Datepicker on change of a select Box

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related