list.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Demo</title>
  7. <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  8. <link href="//unpkg.com/layui@2.8.11/dist/css/layui.css" rel="stylesheet">
  9. </head>
  10. <body>
  11. <div class="layui-form">
  12. <h5 style="margin-bottom: 16px;">
  13. 左右面板<strong class="layui-font-red">独立</strong>选择模式(默认) :
  14. </h5>
  15. <div class="layui-form-item">
  16. <div class="layui-inline">
  17. <label class="layui-form-label">日期范围</label>
  18. <div class="layui-inline" id="ID-laydate-range">
  19. <div class="layui-input-inline">
  20. <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
  21. </div>
  22. <div class="layui-form-mid">-</div>
  23. <div class="layui-input-inline">
  24. <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. <h5 style="margin-bottom: 16px;">
  30. 左右面板<strong class="layui-font-red">联动</strong>选择模式 <sup>2.8+</sup> :
  31. </h5>
  32. <div class="layui-form-item">
  33. <div class="layui-inline">
  34. <label class="layui-form-label">日期范围</label>
  35. <div class="layui-inline" id="ID-laydate-rangeLinked">
  36. <div class="layui-input-inline">
  37. <input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="开始日期">
  38. </div>
  39. <div class="layui-form-mid">-</div>
  40. <div class="layui-input-inline">
  41. <input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="结束日期">
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <h5 style="margin-bottom: 16px;">其他类型的范围选择 :</h5>
  47. <div class="layui-form-item">
  48. <div class="layui-inline">
  49. <label class="layui-form-label">年范围</label>
  50. <div class="layui-input-inline">
  51. <input type="text" class="layui-input" id="ID-laydate-range-year" placeholder=" - ">
  52. </div>
  53. </div>
  54. <div class="layui-inline">
  55. <label class="layui-form-label">年月范围</label>
  56. <div class="layui-input-inline">
  57. <input type="text" class="layui-input" id="ID-laydate-range-month" placeholder=" - ">
  58. </div>
  59. </div>
  60. <div class="layui-inline">
  61. <label class="layui-form-label">时间范围</label>
  62. <div class="layui-input-inline">
  63. <input type="text" class="layui-input" id="ID-laydate-range-time" placeholder=" - ">
  64. </div>
  65. </div>
  66. <div class="layui-inline">
  67. <label class="layui-form-label">日期时间范围</label>
  68. <div class="layui-input-inline">
  69. <input type="text" class="layui-input" id="ID-laydate-range-datetime" placeholder=" - ">
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
  75. <script src="//unpkg.com/layui@2.8.11/dist/layui.js"></script>
  76. <script>
  77. layui.use(function(){
  78. var laydate = layui.laydate;
  79. // 日期范围 - 左右面板独立选择模式
  80. laydate.render({
  81. elem: '#ID-laydate-range',
  82. range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
  83. });
  84. // 日期范围 - 左右面板联动选择模式
  85. laydate.render({
  86. elem: '#ID-laydate-rangeLinked',
  87. range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
  88. rangeLinked: true // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
  89. });
  90. // 年范围
  91. laydate.render({
  92. elem: '#ID-laydate-range-year',
  93. type: 'year',
  94. range: true
  95. });
  96. // 年月范围
  97. laydate.render({
  98. elem: '#ID-laydate-range-month',
  99. type: 'month',
  100. range: true
  101. });
  102. // 时间范围
  103. laydate.render({
  104. elem: '#ID-laydate-range-time',
  105. type: 'time',
  106. range: true
  107. });
  108. // 日期时间范围
  109. laydate.render({
  110. elem: '#ID-laydate-range-datetime',
  111. type: 'datetime',
  112. range: true
  113. });
  114. });
  115. </script>
  116. </body>
  117. </html>