CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepicker
Coding Beginner
Coding Beginner

Reputation: 23

Onchange bootstrap datepicker change the value of another bootstrap datepicker

I am having 2 date picker and i want to change value of one date picker and the same value should set for second date picker

form 1 date picker 

<input  name="start" class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />

form 2 date picker 

  <input  name="start" class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />

If i change the form 1 date picker it should change automatically change 2nd form date picker

Upvotes: 0

Views: 3496

Answers (4)

Ragupathi
Ragupathi

Reputation: 11

   <input type="text" class="form-control form-control-sm" readonly="" style="background-color:#FFFFFF;" name="txtFdate" id="txtFdate" placeholder="From Date" />
   <input type="text" class="form-control form-control-sm" readonly="" style="background-color:#FFFFFF;" name="txtTdate" id="txtTdate" placeholder="To Date" />


        $("#txtFdate").datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            endDate: '0'
        }).on('changeDate', function (selected) {
            var minDate = new Date(selected.date.valueOf());
            $('#txtTdate').datepicker('setStartDate', minDate);
        });

        $("#txtTdate").datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            endDate: '0'
        })
        .on('changeDate', function (selected) {
            var minDate = new Date(selected.date.valueOf());
            $('#txtFdate').datepicker('setEndDate', minDate);
        });

Upvotes: 1

PS_
PS_

Reputation: 33

if you meant to get the date selected on the first datepicker to be available on the second one , the below code snippet might help.

.jsp

<input type="text" name="firstDate" id="firstDate" value="" class="datepicker" readonly>  
<input type="text" name="secondDate" id="secondDate" value="" class="datepicker" readonly>

.js

             $(function() {    
           $('.datepicker').datepicker();

           var updateSecondDate= function() {

        var firstDate = new Date($('#firstDate').val());
       $('#secondDate').datepicker('setDate', firstDate);
                                     }
      $('#firstDate').change(updateSecondDate);

         });

Upvotes: 0

jerry
jerry

Reputation: 745

Which bootstrap datepicker you are using I am not sure. But from your question, I can suggest onChange event, you update the other input field explicitly either by id or class name.

But if you are using two inputbox to get ranges of date then you may check for this datepicker with type range

Upvotes: 0

black_pottery_beauty
black_pottery_beauty

Reputation: 879

Change the name of both input type it can be solve your problem but i am not much sure because code is limited in given question.

<input  name="start" class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />

<input  name="start1" class="date-pick form-control" data-date-format="dd/mm/yyyy" type="text" />

Upvotes: 0

Related Questions