datepicker.html 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <div class="datepicker" data-initialize="datepicker" id="myDatepicker">
  2. <div class="input-group">
  3. <input class="form-control" id="myDatepickerInput" type="text"/>
  4. <div class="input-group-btn">
  5. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  6. <span class="glyphicon glyphicon-calendar"></span>
  7. <span class="sr-only">Toggle Calendar</span>
  8. </button>
  9. <div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
  10. <div class="datepicker-calendar">
  11. <div class="datepicker-calendar-header">
  12. <button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
  13. <button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
  14. <button type="button" class="title">
  15. <span class="month">
  16. <span data-month="0">January</span>
  17. <span data-month="1">February</span>
  18. <span data-month="2">March</span>
  19. <span data-month="3">April</span>
  20. <span data-month="4">May</span>
  21. <span data-month="5">June</span>
  22. <span data-month="6">July</span>
  23. <span data-month="7">August</span>
  24. <span data-month="8">September</span>
  25. <span data-month="9">October</span>
  26. <span data-month="10">November</span>
  27. <span data-month="11">December</span>
  28. </span> <span class="year"></span>
  29. </button>
  30. </div>
  31. <table class="datepicker-calendar-days">
  32. <thead>
  33. <tr>
  34. <th>Su</th>
  35. <th>Mo</th>
  36. <th>Tu</th>
  37. <th>We</th>
  38. <th>Th</th>
  39. <th>Fr</th>
  40. <th>Sa</th>
  41. </tr>
  42. </thead>
  43. <tbody></tbody>
  44. </table>
  45. <div class="datepicker-calendar-footer">
  46. <button type="button" class="datepicker-today">Today</button>
  47. </div>
  48. </div>
  49. <div class="datepicker-wheels" aria-hidden="true">
  50. <div class="datepicker-wheels-month">
  51. <h2 class="header">Month</h2>
  52. <ul>
  53. <li data-month="0"><button type="button">Jan</button></li>
  54. <li data-month="1"><button type="button">Feb</button></li>
  55. <li data-month="2"><button type="button">Mar</button></li>
  56. <li data-month="3"><button type="button">Apr</button></li>
  57. <li data-month="4"><button type="button">May</button></li>
  58. <li data-month="5"><button type="button">Jun</button></li>
  59. <li data-month="6"><button type="button">Jul</button></li>
  60. <li data-month="7"><button type="button">Aug</button></li>
  61. <li data-month="8"><button type="button">Sep</button></li>
  62. <li data-month="9"><button type="button">Oct</button></li>
  63. <li data-month="10"><button type="button">Nov</button></li>
  64. <li data-month="11"><button type="button">Dec</button></li>
  65. </ul>
  66. </div>
  67. <div class="datepicker-wheels-year">
  68. <h2 class="header">Year</h2>
  69. <ul></ul>
  70. </div>
  71. <div class="datepicker-wheels-footer clearfix">
  72. <button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
  73. <button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </div>