w_datepicker.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <h2 class="contentTitle">日历控件</h2>
  2. <div class="pageContent">
  3. <form method="post" action="demo/common/ajaxDone.html" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone);">
  4. <div class="pageFormContent" layoutH="98">
  5. <p>
  6. <label>默认格式:</label>
  7. <input type="text" name="date1" class="date" readonly="true"/>
  8. <a class="inputDateButton" href="javascript:;">选择</a>
  9. <span class="info">yyyy-MM-dd</span>
  10. </p>
  11. <p>
  12. <label>定义日期范围:</label>
  13. <input type="text" name="date2" value="2000-01-15" class="date" minDate="2000-01-15" maxDate="2012-12-15" readonly="true"/>
  14. <a class="inputDateButton" href="javascript:;">选择</a>
  15. </p>
  16. <p>
  17. <label>自定义日期格式:</label>
  18. <input type="text" name="date3" class="date" dateFmt="yyyy/MM/dd" minDate="2000-01" maxDate="2012-06" readonly="true" />
  19. <a class="inputDateButton" href="javascript:;">选择</a>
  20. <span class="info">yyyy/MM/dd</span>
  21. </p>
  22. <p>
  23. <label>自定义日期格式:</label>
  24. <input type="text" name="date4" class="date" dateFmt="dd/MM/yyyy" minDate="2000" maxDate="2012" readonly="true"/>
  25. <a class="inputDateButton" href="javascript:;">选择</a>
  26. <span class="info">dd/MM/yyyy</span>
  27. </p>
  28. <p>
  29. <label>动态参数minDate:</label>
  30. <input type="text" name="date5" class="date" dateFmt="dd/MM/yy" minDate="{%y-10}-%M-%d" maxDate="{%y}-%M-{%d+1}"/>
  31. <a class="inputDateButton" href="javascript:;">选择</a>
  32. <span class="info">dd/MM/yy</span>
  33. </p>
  34. <p>
  35. <label>自定义日期格式:</label>
  36. <input type="text" name="date6" class="date" dateFmt="MMdd" minDate="2000-01-01" maxDate="2020-12-31"/>
  37. <a class="inputDateButton" href="javascript:;">选择</a>
  38. <span class="info">MMdd</span>
  39. </p>
  40. <p>
  41. <label>自定义日期格式:</label>
  42. <input type="text" name="date7" class="date" dateFmt="yyyy年MM月dd日" minDate="2000-01-01" maxDate="2020-12-31"/>
  43. <a class="inputDateButton" href="javascript:;">选择</a>
  44. <span class="info">yyyy年MM月dd日</span>
  45. </p>
  46. <p>
  47. <label>自定义日期格式:</label>
  48. <input type="text" name="date8" class="date" dateFmt="y年M月d日" minDate="2000-01-01" maxDate="2020-12-31"/>
  49. <a class="inputDateButton" href="javascript:;">选择</a>
  50. <span class="info">y年M月d日</span>
  51. </p>
  52. <div class="divider"></div>
  53. <h3>日期 + 时间</h3>
  54. <div class="unit">
  55. <label>自定义日期格式:</label>
  56. <input type="text" name="date10" class="date" dateFmt="yyyy-MM-dd HH:mm:ss" readonly="true"/>
  57. <a class="inputDateButton" href="javascript:;">选择</a>
  58. <span class="info">yyyy-MM-dd HH:mm:ss</span>
  59. </div>
  60. <div class="unit">
  61. <label>自定义日期格式:</label>
  62. <input type="text" name="date11" class="date" dateFmt="yyyy-MM-dd HH:mm" readonly="true"/>
  63. <a class="inputDateButton" href="javascript:;">选择</a>
  64. <span class="info">yyyy-MM-dd HH:mm</span>
  65. </div>
  66. <div class="unit">
  67. <label>自定义日期格式:</label>
  68. <input type="text" name="date12" class="date" dateFmt="yyyy-MM-dd HH:ss" readonly="true"/>
  69. <a class="inputDateButton" href="javascript:;">选择</a>
  70. <span class="info">yyyy-MM-dd HH:ss</span>
  71. </div>
  72. <div class="unit">
  73. <label>自定义日期格式:</label>
  74. <input type="text" name="date13" class="date" dateFmt="y年M月d日 H点" readonly="true"/>
  75. <a class="inputDateButton" href="javascript:;">选择</a>
  76. <span class="info">y年M月d日 H点</span>
  77. </div>
  78. <div class="unit">
  79. <label>自定义日期格式:</label>
  80. <input type="text" name="date14" class="date" dateFmt="EEE HH:mm:ss" readonly="true"/>
  81. <a class="inputDateButton" href="javascript:;">选择</a>
  82. <span class="info">EEE HH:mm:ss</span>
  83. </div>
  84. <div class="unit">
  85. <label>自定义只有时间:</label>
  86. <input type="text" name="date15" class="date" dateFmt="HH:mm:ss" readonly="true"/>
  87. <a class="inputDateButton" href="javascript:;">选择</a>
  88. <span class="info">HH:mm:ss</span>
  89. </div>
  90. <div class="unit">
  91. <label>自定义时间:</label>
  92. <input type="text" name="date16" class="date" dateFmt="HH:mm" mmStep="15" readonly="true"/>
  93. <a class="inputDateButton" href="javascript:;">选择</a>
  94. <span class="info">HH:mm</span>
  95. </div>
  96. <div class="nowrap">
  97. <p>
  98. 定义日期范围属性minDate,maxDate静态格式y-M-d或y-M或y,支持以下几种写法:<br/>
  99. minDate="2000-01-15" maxDate="2012-12-15"<br/>
  100. minDate="2000-01" maxDate="2012-12"<br/>
  101. minDate="2000" maxDate="2012"<br/>
  102. </p>
  103. <p>
  104. 定义日期范围属性minDate,maxDate动态态格式%y-%M-%d或%y-%M或%y,支持以下几种写法:<br/>
  105. minDate="{%y-10}-%M-%d" maxDate="{%y}-%M-{%d+1}"<br/>
  106. minDate="{%y-10}-%M" maxDate="{%y+10}-%M"<br/>
  107. minDate="{%y-10}" maxDate="{%y+10}"<br/>
  108. </p>
  109. </div>
  110. </div>
  111. <div class="formBar">
  112. <ul>
  113. <li><div class="buttonActive"><div class="buttonContent"><button type="submit">提交</button></div></div></li>
  114. <li>
  115. <div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div>
  116. </li>
  117. </ul>
  118. </div>
  119. </form>
  120. </div>