CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
nasty
nasty

Reputation: 7077

jQuery Date Picker popup TO field Calendar

I'm using a plugin to display a Date Range calendar on my website using bootstrap-datepicker.

I am quite new to jQuery and find it hard to figure out the usage of Methods.

When a user selects the FROM date, I want to popup the TO date Calendar automatically. Currently I have turned on autoclose so the calendar disappears once the FROM date is selected, but cant figure out how to popup the TO calendar.

Upvotes: 0

Views: 196

Answers (2)

Punit Gajjar
Punit Gajjar

Reputation: 4987

Here i am sending you my HTML . first of all we need to add some class for our from date input and to date input like this .

add class fromdate for from date input add class todate for to date input 

<div id="sandbox-container">
            <div class="input-daterange input-group" id="datepicker">
                <input type="text" class="input-sm form-control fromdate" name="start" />
                <span class="input-group-addon">to</span>
                <input type="text" class="input-sm form-control todate" name="end" />
            </div>
        </div>

then just add the below script, and i hope its helps you and give you your desire output.

<script>
    $(document).ready(function(){
        $('#sandbox-container .input-daterange').datepicker({
            autoclose: true,
        });

        $(document).on('change', '.input-daterange > .fromdate', function (e) {
           $(".todate").focus();
        });
    });
</script>

Here is the HTML code i have used. Just set the paths for CSS and js accordingly yours.

<!DOCTYPE html>
<html>
    <head>
        <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
        <link id="bs-css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <link id="bsdp-css" href="css/bootstrap-datepicker3.css" rel="stylesheet">
        <script src="js/bootstrap-datepicker.js"></script>
    </head>
    <body class="container">
        <div id="sandbox-container">
            <div class="input-daterange input-group" id="datepicker">
                <input type="text" class="input-sm form-control fromdate" name="start" />
                <span class="input-group-addon">to</span>
                <input type="text" class="input-sm form-control todate" name="end" />
            </div>
        </div>
    </body>
<script>
    $(document).ready(function(){
        $('#sandbox-container .input-daterange').datepicker({
            autoclose: true,
        });

        $(document).on('change', '.input-daterange > .fromdate', function (e) {
           $(".todate").focus();
        });
    });
</script>
</html>

Upvotes: 1

Punit Gajjar
Punit Gajjar

Reputation: 4987

enter image description here

I hope you are looking for this only

Upvotes: 0

Related Questions