index.html 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  6. <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <form action="" class="form-horizontal">
  11. <fieldset>
  12. <legend>Test</legend>
  13. <div class="control-group">
  14. <label class="control-label">DateTime Picking</label>
  15. <div class="controls input-append date form_datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
  16. <input size="16" type="text" value="" readonly>
  17. <span class="add-on"><i class="icon-remove"></i></span>
  18. <span class="add-on"><i class="icon-th"></i></span>
  19. </div>
  20. <input type="hidden" id="dtp_input1" value="" /><br/>
  21. </div>
  22. <div class="control-group">
  23. <label class="control-label">Date Picking</label>
  24. <div class="controls input-append date form_date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
  25. <input size="16" type="text" value="" readonly>
  26. <span class="add-on"><i class="icon-remove"></i></span>
  27. <span class="add-on"><i class="icon-th"></i></span>
  28. </div>
  29. <input type="hidden" id="dtp_input2" value="" /><br/>
  30. </div>
  31. <div class="control-group">
  32. <label class="control-label">Time Picking</label>
  33. <div class="controls input-append date form_time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
  34. <input size="16" type="text" value="" readonly>
  35. <span class="add-on"><i class="icon-remove"></i></span>
  36. <span class="add-on"><i class="icon-th"></i></span>
  37. </div>
  38. <input type="hidden" id="dtp_input3" value="" /><br/>
  39. </div>
  40. <hr />
  41. <div class="control-group">
  42. <label class="control-label">Date 年</label>
  43. <div class="controls input-append date form_date_year" data-date="" >
  44. <input size="16" type="text" value="" readonly>
  45. <span class="add-on"><i class="icon-remove"></i></span>
  46. <span class="add-on"><i class="icon-th"></i></span>
  47. </div>
  48. <input type="hidden" id="dtp_input_year" value="" /><br/>
  49. </div>
  50. <div class="control-group">
  51. <label class="control-label">Date 月</label>
  52. <div class="controls input-append date form_date_Moth" data-date="" >
  53. <input size="16" type="text" value="" readonly>
  54. <span class="add-on"><i class="icon-remove"></i></span>
  55. <span class="add-on"><i class="icon-th"></i></span>
  56. </div>
  57. <input type="hidden" id="dtp_input_Moth" value="" /><br/>
  58. </div>
  59. <div class="control-group">
  60. <label class="control-label">Date 日</label>
  61. <div class="controls input-append date form_date_day" data-date="" >
  62. <input id="form_date_day" size="16" type="text" value="" readonly>
  63. <span class="add-on"><i class="icon-remove"></i></span>
  64. <span class="add-on"><i class="icon-th"></i></span>
  65. <button class="btn" onclick="alert($('#form_date_day').val())">获取值</button>
  66. </div>
  67. <input type="hidden" id="dtp_input_day" value="" /><br/>
  68. </div>
  69. </fieldset>
  70. </form>
  71. </div>
  72. <script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
  73. <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
  74. <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
  75. <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
  76. <script type="text/javascript">
  77. $('.form_datetime').datetimepicker({
  78. //language: 'zh-CN',
  79. weekStart: 1,
  80. todayBtn: 1,
  81. autoclose: 1,
  82. todayHighlight: 1,
  83. startView: 2,
  84. forceParse: 0,
  85. showMeridian: 1
  86. });
  87. $('.form_date').datetimepicker({
  88. language: 'zh-CN',
  89. weekStart: 1,
  90. todayBtn: 1,
  91. autoclose: 1,
  92. todayHighlight: 1,
  93. startView: 2,
  94. minView: 2,
  95. forceParse: 0
  96. });
  97. $('.form_time').datetimepicker({
  98. language: 'zh-CN',
  99. weekStart: 1,
  100. todayBtn: 1,
  101. autoclose: 1,
  102. todayHighlight: 1,
  103. startView: 1,
  104. minView: 0,
  105. maxView: 1,
  106. forceParse: 0
  107. });
  108. //--------
  109. $('.form_date_year').datetimepicker({
  110. format: "yyyy",
  111. weekStart: 1,
  112. todayHighlight: 1,
  113. autoclose: true,
  114. todayBtn: true,
  115. startView: 4,
  116. minView: 4,
  117. language:'zh-CN',
  118. pickerPosition:"bottom-left"
  119. });
  120. $('.form_date_Moth').datetimepicker({
  121. format: "yyyy-mm",
  122. weekStart: 1,
  123. todayHighlight: 1,
  124. autoclose: true,
  125. todayBtn: true,
  126. startView: 3,
  127. minView: 3,
  128. language:'zh-CN',
  129. pickerPosition:"bottom-left"
  130. });
  131. $('.form_date_day').datetimepicker({
  132. format: "yyyy-mm-dd",
  133. weekStart: 1,
  134. todayHighlight: 1,
  135. autoclose: true,
  136. todayBtn: true,
  137. startView: 2,
  138. minView: 2,
  139. language:'zh-CN',
  140. pickerPosition:"bottom-left"
  141. });
  142. </script>
  143. </body>
  144. </html>