Posted on by

bootstrapのpopoverでdatepickerを使う。

bootstrapのpopoverでdatepickerを使う際の手続きとpopoverしてから、popover以外をクリックするとpopoverが消える。ただし、datepicker表示中には消えないようにする方法をサンプルとしてまとめました。

view plaincopy to clipboardprint?
  1. ＜!DOCTYPE html>  
  2. ＜html lang="en" style="height: 100%;">  
  3. ＜head>  
  4. ＜meta charset="UTF-8" />  
  5. <title>sample</title>  
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7. <!-- jquery -->  
  8. <script src="js/jquery/jquery-1.8.3.min.js"></script>  
  9. <script src="js/jquery/jquery-ui-1.9.2.custom.min.js"></script>  
  10. <link rel="stylesheet" href="js/jquery/css/jquery-ui.custom.css">  
  11. <!-- bootstrap -->  
  12. <script src="js/bootstrap.min.js"></script>  
  13. <link href="bootstrap/css/bootstrap.css" rel="stylesheet">  
  14. <!-- カレンダー -->  
  15. <link rel="stylesheet" href="js/jquery/datepicker/ui.datepicker-ja.css">  
  16. <script src="js/jquery/datepicker/ui.datepicker-ja.js"></script>  
  17. <!-- InstanceBeginEditable name="head" -->  
  18. <!-- InstanceEndEditable -->  
  19.   
  20.   
  21. <div>  
  22. <h3>popover sample</h3>  
  23. <a id="search_btn" class="btn" style="position:absolute;top:100px;left:100px;"><i class="icon-search"></i>検索</a>　  
  24. </div>  
  25. <div id="search_data" class="hide">  
  26. <table border="0">  
  27. <tbody><tr>  
  28. <td>納期  
  29.   
  30. <input name="data[Search][date]" type="text" size="10" maxlength="10" class="input-small cals" id="SearchDate">  
  31. </td>  
  32. <td> </td>  
  33. </tr>  
  34. <tr>  
  35. <td colspan="2" class="text-right">  
  36. <a id="search_close_btn" href="#" class="btn">閉じる</a>　  
  37. <a id="search_submit_btn" href="#" class="btn btn-primary">検索</a>  
  38. </td>  
  39. </tr>  
  40. </tbody></table>  
  41. </div>  
  42. <script type="text/javascript">  
  43. $(function(){  
  44. // popover内のclass="cals"にdatepickerを認識させるための手続き  
  45. var tmp = $.fn.popover.Constructor.prototype.show;  
  46. $.fn.popover.Constructor.prototype.show = function () {  
  47. tmp.call(this);  
  48. if (this.options.callback) {  
  49. this.options.callback();  
  50. }  
  51. }  
  52. // search_data内のclass="cals"にdatepickerを設定する。  
  53. $("#search_btn").popover({html: true, content: $("#search_data").html(), placement: 'bottom',  
  54. callback: function() {  
  55. $('.cals').datepicker();  
  56. }  
  57. }).click(function (e) {  
  58. e.preventDefault();  
  59. });  
  60. // 検索popoverを閉じる・検索  
  61. $(document).on('click', '#search_close_btn, #search_submit_btn', function() {  
  62. $('#search_btn').popover('hide');  
  63. });  
  64. // 他のエリアをクリックするとpopoverが消える。  
  65. $('body').on('click', function (e) {  
  66. // datepicker表示中の時無効にする。  
  67. var result = $('#ui-datepicker-div').is(':visible');  
  68. if (result) {  
  69. return;  
  70. }  
  71. $('#search_btn').each(function () {  
  72. if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {  
  73. $(this).popover('hide');  
  74. }  
  75. });  
  76. });  
  77. });  
  78. </script>  
  79. ＜/body＞  
  80. ＜/html＞