API tools faq
paste
abstractindia

Datepicker-tabindex issue

abstractindia
Oct 8th, 2015
295
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Datepicker Tabindex issue</title>
  5.  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  8. <link rel="stylesheet" href="http://formvalidation.io/vendor/jquery.steps/css/jquery.steps.css" />
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker.min.css" />
  10.  
  11.  
  12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  13. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  14. <script src="http://formvalidation.io/vendor/jquery.steps/js/jquery.steps.min.js"></script>
  15. <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
  16.  
  17. <style>
  18. .wizard > .content {
  19.     min-height: 45em;
  20.     background: #fff;
  21. }
  22.  
  23. </style>
  24.  
  25. </head>
  26. <body>
  27. <div id="maincontent" class="container">
  28. <form id="multiphase" role="form" class="form-horizontal" action="" method="post">
  29. <h2>Step</h2>
  30. <section data-step="2">
  31. <h2>Student's Details:</h2>
  32.  
  33. <hr>        
  34.  
  35. <div class="form-group">
  36. <label for="sd_firstname" class="col-lg-2 control-label">First Name:</label>
  37. <div class="col-lg-3">
  38. <input type="text" name="sd_firstname" id="sd_firstname" class="form-control" placeholder="First Name" value="" tabindex="2">
  39. </div>
  40. </div>
  41.  
  42. <div class="form-group">
  43. <label for="sd_middleinitial" class="col-lg-2 control-label">Middle Initial:</label>
  44. <div class="col-lg-2 ">
  45. <input name="sd_middleinitial" type="text" class="form-control" id="sd_middleinitial" placeholder="Middle Initial " tabindex="3" value="" maxlength="1">
  46. </div>
  47. </div>
  48.  
  49. <div class="form-group">
  50. <label for="sd_gender" class="col-lg-2 control-label">Gender:</label>
  51. <div class="col-lg-3">
  52. <select name="sd_gender" id="sd_gender" class="" data-allow-clear="true" tabindex="4" placeholder="Select Gender">
  53. <option value="">&nbsp;</option>
  54. <option value="F">Female</option>
  55. <option value="M">Male</option>
  56. </select>
  57. </div>
  58. </div>    
  59.  
  60.  
  61. <div class="form-group">
  62. <label for="sd_dob" class="col-lg-2 control-label">Date of Birth:</label>
  63. <div class="col-lg-2">
  64. <div class="input-group date">
  65.     <input type="text" name="sd_dob" id="sd_dob" class="form-control datepicker" placeholder="dd-mm-yyyy" tabindex="5">    <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
  66. </div>
  67. </div>
  68. </div>
  69.  
  70. <div class="form-group">
  71. <label for="sd_address" class="col-lg-2 control-label">Address:</label>
  72. <div class="col-lg-3">
  73. <input type="text" name="sd_address" id="sd_address" class="form-control" placeholder="Address" value="" tabindex="6">
  74. </div>
  75. </div>
  76.                    
  77. <div class="form-group">
  78. <label for="sd_pincode" class="col-lg-2 control-label">Pincode:</label>
  79. <div class="col-lg-2">
  80. <input type="text" name="sd_pincode" id="sd_pincode" class="form-control" placeholder="Pincode" data-mask="999 999" value="" tabindex="8">
  81. </div>
  82. </div>
  83.  
  84. <div class="form-group">
  85. <label for="sd_state" class="col-lg-2 control-label">State:</label>
  86. <div class="col-lg-2">
  87. <input name="sd_state" type="text" disabled class="form-control" id="disabledTextInput" placeholder="Gujarat" value="Gujarat" tabindex="10">
  88. </div>
  89. </div>
  90.  
  91. <div class="form-group">
  92. <label for="sd_phone" class="col-lg-2 control-label">Phone No.:</label>
  93. <div class="col-lg-3">
  94. <input type="text" name="sd_phone" id="sd_phone" class="form-control" placeholder="Phone Number" data-mask="+99-9999-999999" value="" tabindex="11">
  95. </div> 
  96. </div>  
  97.  
  98. <div class="form-group">
  99. <label for="sd_mobile" class="col-lg-2 control-label">Mobile No.:</label>
  100. <div class="col-lg-3">
  101. <input type="text" name="sd_mobile" id="sd_mobile" class="form-control" placeholder="Mobile Number" data-mask="+99-99999-99999" value="" tabindex="12">
  102. </div>
  103. </div>  
  104.  
  105. </section>
  106.  
  107. <h2>Step</h2>
  108. <section data-step="2">
  109. <h2>Parent's Details:</h2>
  110.  
  111. <hr>        
  112.  
  113. <div class="form-group">
  114. <label for="pd_firstname" class="col-lg-2 control-label">First Name:</label>
  115. <div class="col-lg-3">
  116. <input type="text" name="pd_firstname" id="pd_firstname" class="form-control" placeholder="First Name" value="" tabindex="2">
  117. </div>
  118. </div>
  119.  
  120. <div class="form-group">
  121. <label for="pd_middleinitial" class="col-lg-2 control-label">Middle Initial:</label>
  122. <div class="col-lg-2 ">
  123. <input name="pd_middleinitial" type="text" class="form-control" id="pd_middleinitial" placeholder="Middle Initial " tabindex="3" value="" maxlength="1">
  124. </div>
  125. </div>
  126.  
  127. <div class="form-group">
  128. <label for="pd_gender" class="col-lg-2 control-label">Gender:</label>
  129. <div class="col-lg-3">
  130. <select name="pd_gender" id="pd_gender" class="" data-allow-clear="true" tabindex="4" placeholder="Select Gender">
  131. <option value="">&nbsp;</option>
  132. <option value="F">Female</option>
  133. <option value="M">Male</option>
  134. </select>
  135. </div>
  136. </div>    
  137.  
  138.  
  139. <div class="form-group">
  140. <label for="pd_dob" class="col-lg-2 control-label">Date of Birth:</label>
  141. <div class="col-lg-2">
  142. <div class="input-group date">
  143.     <input type="text" name="pd_dob" id="pd_dob" class="form-control datepicker" placeholder="dd-mm-yyyy" tabindex="5">    <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
  144. </div>
  145. </div>
  146. </div>
  147.  
  148. <div class="form-group">
  149. <label for="pd_address" class="col-lg-2 control-label">Address:</label>
  150. <div class="col-lg-3">
  151. <input type="text" name="pd_address" id="pd_address" class="form-control" placeholder="Address" value="" tabindex="6">
  152. </div>
  153. </div>
  154.                    
  155. <div class="form-group">
  156. <label for="pd_pincode" class="col-lg-2 control-label">Pincode:</label>
  157. <div class="col-lg-2">
  158. <input type="text" name="pd_pincode" id="pd_pincode" class="form-control" placeholder="Pincode" data-mask="999 999" value="" tabindex="8">
  159. </div>
  160. </div>
  161.  
  162. <div class="form-group">
  163. <label for="pd_state" class="col-lg-2 control-label">State:</label>
  164. <div class="col-lg-2">
  165. <input name="pd_state" type="text" disabled class="form-control" id="disabledTextInput" placeholder="Gujarat" value="Gujarat" tabindex="10">
  166. </div>
  167. </div>
  168.  
  169. <div class="form-group">
  170. <label for="pd_phone" class="col-lg-2 control-label">Phone No.:</label>
  171. <div class="col-lg-3">
  172. <input type="text" name="pd_phone" id="pd_phone" class="form-control" placeholder="Phone Number" data-mask="+99-9999-999999" value="" tabindex="11">
  173. </div> 
  174. </div>  
  175.  
  176. <div class="form-group">
  177. <label for="pd_mobile" class="col-lg-2 control-label">Mobile No.:</label>
  178. <div class="col-lg-3">
  179. <input type="text" name="pd_mobile" id="pd_mobile" class="form-control" placeholder="Mobile Number" data-mask="+99-99999-99999" value="" tabindex="12">
  180. </div>
  181. </div>  
  182.  
  183. </section>
  184.                            
  185. </form>
  186. </div>     
  187.                            
  188. <script>
  189. $(document).ready(function() {
  190.       function adjustIframeHeight() {
  191.         var $body   = $('body'),
  192.             $iframe = $body.data('iframe.fv');
  193.         if ($iframe) {
  194.             // Adjust the height of iframe
  195.             $iframe.height($body.height());
  196.         }
  197.       }
  198.       $("#multiphase").steps({
  199.             headerTag: "h2",
  200.             bodyTag: "section",
  201.             saveState: true,
  202.             onStepChanged: function(e, currentIndex, priorIndex) {
  203.                 // You don't need to care about it
  204.                 // It is for the specific demo
  205.                 adjustIframeHeight();
  206.             },
  207.     })
  208.    
  209.     $('.datepicker').datepicker({
  210.     format: "dd-mm-yyyy",
  211.     autoclose: true,
  212.     todayHighlight: true,
  213.     //orientation: "bottom"
  214.     todayBtn: "linked",
  215.     })
  216.    
  217. });
  218.  
  219.  
  220.  
  221.  
  222. </script>                          
  223.                            
  224. </body>
  225. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!