twitter bootstrap 3 - jQuery Date Picker popup TO field Calendar -


i'm using plugin display date range calendar on website using bootstrap-datepicker.

i quite new jquery , find hard figure out usage of methods.

when user selects from date, want popup to date calendar automatically. have turned on autoclose calendar disappears once from date selected, cant figure out how popup to calendar.

here sending html . first of need add class our date input , date input .

add class fromdate date input add class todate 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 add below script, , hope helps , give 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 html code have used. set paths css , 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> 

Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

python - pip wont install .WHL files -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -