Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: c07d6c4e18
Branches Tags
nutui
/
3.1.10
/
doc16.js

doc16.js 11 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 
  1. import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`<h1>Datepicker \u65E5\u671F\u9009\u62E9\u5668</h1><h3>\u4ECB\u7ECD</h3><p>\u65F6\u95F4\u9009\u62E9\u5668\uFF0C\u652F\u6301\u65E5\u671F\u3001\u5E74\u6708\u3001\u65F6\u5206\u7B49\u7EF4\u5EA6\uFF0C\u901A\u5E38\u4E0E\u5F39\u51FA\u5C42\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002</p><h3>\u5B89\u88C5</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;
    2. 

  2. <span class="hljs-keyword">import</span> { DatePicker } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;
    3. 

  3. 

  4. <span class="hljs-keyword">const</span> app = createApp();
    5. 

  5. app.use(DatePicker);
    6. 

  6. </code></pre><h2>\u4EE3\u7801\u6F14\u793A</h2><h3>\u65E5\u671F\u9009\u62E9-\u6BCF\u5217\u4E0D\u663E\u793A\u4E2D\u6587</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-datepicker</span>
    7. 

  7.     <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;currentDate&quot;</span>
    8. 

  8.     @<span class="hljs-attr">confirm</span>=<span class="hljs-string">&quot;confirm&quot;</span>
    9. 

  9.     <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>
    10. 

  10.     <span class="hljs-attr">:is-show-chinese</span>=<span class="hljs-string">&quot;false&quot;</span>
    11. 

  11. &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-datepicker</span>&gt;</span> 
    12. 

  12. </code></pre><pre><code class="language-javascript">&lt;script&gt;
    13. 

  13. <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> createDemo({
    14. 

  14.   <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params">props, { emit }</span>)</span> {
    15. 

  15.     <span class="hljs-keyword">const</span> show = ref(<span class="hljs-literal">false</span>);
    16. 

  16.     <span class="hljs-keyword">const</span> desc = ref(<span class="hljs-string">&#39;2020-1-1&#39;</span>);
    17. 

  17. 

  18.     <span class="hljs-keyword">return</span> {
    19. 

  19.       show,
    20. 

  20.       desc
    21. 

  21.       <span class="hljs-attr">open</span>: <span class="hljs-function">(<span class="hljs-params">index</span>) =&gt;</span> {
    22. 

  22.         show.value = <span class="hljs-literal">true</span>;
    23. 

  23.       },
    24. 

  24.       <span class="hljs-attr">confirm</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {
    25. 

  25.         desc.value = val.join(<span class="hljs-string">&#39;-&#39;</span>);
    26. 

  26.       }
    27. 

  27.     };
    28. 

  28.   }
    29. 

  29. });
    30. 

  30. &lt;/script&gt;
    31. 

  31. </code></pre><h3>\u65E5\u671F\u9009\u62E9-\u9650\u5236\u5F00\u59CB\u7ED3\u675F\u65F6\u95F4</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-datepicker</span>
    32. 

  32.     <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;currentDate&quot;</span>
    33. 

  33.     <span class="hljs-attr">:min-date</span>=<span class="hljs-string">&quot;minDate&quot;</span>
    34. 

  34.     <span class="hljs-attr">:max-date</span>=<span class="hljs-string">&quot;maxDate&quot;</span>
    35. 

  35.     @<span class="hljs-attr">confirm</span>=<span class="hljs-string">&quot;confirm&quot;</span>
    36. 

  36.     <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>
    37. 

  37.     <span class="hljs-attr">:is-show-chinese</span>=<span class="hljs-string">&quot;false&quot;</span>
    38. 

  38. &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-datepicker</span>&gt;</span> 
    39. 

  39. </code></pre><pre><code class="language-javascript">&lt;script&gt;
    40. 

  40. <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> createDemo({
    41. 

  41.   <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params">props, { emit }</span>)</span> {
    42. 

  42.     <span class="hljs-keyword">const</span> show = ref(<span class="hljs-literal">false</span>);
    43. 

  43.     <span class="hljs-keyword">const</span> desc = ref(<span class="hljs-string">&#39;2020-1-1&#39;</span>);
    44. 

  44. 

  45.     <span class="hljs-keyword">return</span> {
    46. 

  46.       show,
    47. 

  47.       desc,
    48. 

  48.       <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>),
    49. 

  49.       <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2025</span>, <span class="hljs-number">10</span>, <span class="hljs-number">1</span>),
    50. 

  50.       <span class="hljs-attr">open</span>: <span class="hljs-function">(<span class="hljs-params">index</span>) =&gt;</span> {
    51. 

  51.         show.value = <span class="hljs-literal">true</span>;
    52. 

  52.       },
    53. 

  53.       <span class="hljs-attr">confirm</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {
    54. 

  54.         desc.value = val.join(<span class="hljs-string">&#39;-&#39;</span>);
    55. 

  55.       }
    56. 

  56.     };
    57. 

  57.   }
    58. 

  58. });
    59. 

  59. &lt;/script&gt;
    60. 

  60. </code></pre><h3>\u65E5\u671F\u65F6\u95F4-\u9650\u5236\u5F00\u59CB\u7ED3\u675F\u65F6\u95F4\uFF08\u6709\u9ED8\u8BA4\u503C\uFF09</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-datepicker</span>
    61. 

  61.     <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;currentDate&quot;</span>
    62. 

  62.     <span class="hljs-attr">:min-date</span>=<span class="hljs-string">&quot;minDate&quot;</span>
    63. 

  63.     <span class="hljs-attr">:max-date</span>=<span class="hljs-string">&quot;maxDate&quot;</span>
    64. 

  64.     <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;datetime&quot;</span>
    65. 

  65.     @<span class="hljs-attr">confirm</span>=<span class="hljs-string">&quot;confirm&quot;</span>
    66. 

  66.     <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span> 
    67. 

  67. &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-datepicker</span>&gt;</span> 
    68. 

  68. </code></pre><pre><code class="language-javascript">&lt;script&gt;
    69. 

  69. <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> createDemo({
    70. 

  70.   <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params">props, { emit }</span>)</span> {
    71. 

  71.     <span class="hljs-keyword">const</span> show = ref(<span class="hljs-literal">false</span>);
    72. 

  72.     <span class="hljs-keyword">const</span> desc = ref(<span class="hljs-string">&#39;2020\u5E74-1\u6708-1\u65E5-0\u65F6-0\u5206&#39;</span>);
    73. 

  73. 

  74.     <span class="hljs-keyword">return</span> {
    75. 

  75.       show,
    76. 

  76.       desc,
    77. 

  77.       <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>),
    78. 

  78.       <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2025</span>, <span class="hljs-number">10</span>, <span class="hljs-number">1</span>),
    79. 

  79.       <span class="hljs-attr">open</span>: <span class="hljs-function">(<span class="hljs-params">index</span>) =&gt;</span> {
    80. 

  80.         show.value = <span class="hljs-literal">true</span>;
    81. 

  81.       },
    82. 

  82.       <span class="hljs-attr">confirm</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {
    83. 

  83.         desc.value = val.join(<span class="hljs-string">&#39;-&#39;</span>);
    84. 

  84.       }
    85. 

  85.     };
    86. 

  86.   }
    87. 

  87. });
    88. 

  88. &lt;/script&gt;
    89. 

  89. </code></pre><h3>\u65F6\u95F4\u9009\u62E9-12\u5C0F\u65F6\u5236</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-datepicker</span>
    90. 

  90.     <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;currentDate&quot;</span>
    91. 

  91.     <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;time&quot;</span>
    92. 

  92.     <span class="hljs-attr">:min-date</span>=<span class="hljs-string">&quot;minDate&quot;</span>
    93. 

  93.     <span class="hljs-attr">:max-date</span>=<span class="hljs-string">&quot;maxDate&quot;</span>
    94. 

  94.     <span class="hljs-attr">:is-use12-hours</span>=<span class="hljs-string">&quot;true&quot;</span>
    95. 

  95.     @<span class="hljs-attr">confirm</span>=<span class="hljs-string">&quot;confirm&quot;</span>
    96. 

  96.     <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>
    97. 

  97. &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-datepicker</span>&gt;</span>
    98. 

  98. </code></pre><h3>\u65F6\u95F4\u9009\u62E9-\u5206\u949F\u6570\u9012\u589E\u6B65\u957F\u8BBE\u7F6E</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-datepicker</span>
    99. 

  99.     <span class="hljs-attr">v-model</span>=<span class="hljs-string">&quot;currentDate&quot;</span>
    100. 

  100.     <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;time&quot;</span>
    101. 

  101.     <span class="hljs-attr">:minute-step</span>=<span class="hljs-string">&quot;5&quot;</span>
    102. 

  102.     <span class="hljs-attr">:min-date</span>=<span class="hljs-string">&quot;minDate&quot;</span>
    103. 

  103.     <span class="hljs-attr">:max-date</span>=<span class="hljs-string">&quot;maxDate&quot;</span>
    104. 

  104.     <span class="hljs-attr">:is-use12-hours</span>=<span class="hljs-string">&quot;true&quot;</span>
    105. 

  105.     @<span class="hljs-attr">confirm</span>=<span class="hljs-string">&quot;confirm&quot;</span>
    106. 

  106.     <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;show&quot;</span>
    107. 

  107. &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-datepicker</span>&gt;</span>
    108. 

  108. </code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>v-model</td><td>\u521D\u59CB\u503C</td><td>Date</td><td><code>null</code></td></tr><tr><td>v-model:visible</td><td>\u662F\u5426\u53EF\u89C1</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>type</td><td>\u7C7B\u578B\uFF0C\u65E5\u671F\u2019date\u2019\uFF0C \u65E5\u671F\u65F6\u95F4\u2019datetime\u2019\uFF0C\u65F6\u95F4\u2019time\u2019</td><td>String</td><td><code>&#39;date&#39;</code></td></tr><tr><td>is-use12-hours</td><td>\u662F\u5426\u5341\u4E8C\u5C0F\u65F6\u5236\u5EA6\uFF0C\u53EA\u9650\u7C7B\u578B\u4E3A\u2019time\u2019\u65F6\u4F7F\u7528</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>minute-step</td><td>\u5206\u949F\u6B65\u8FDB\u503C</td><td>Number</td><td><code>1</code></td></tr><tr><td>is-show-chinese</td><td>\u6BCF\u5217\u662F\u5426\u5C55\u793A\u4E2D\u6587</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>title</td><td>\u8BBE\u7F6E\u6807\u9898</td><td>String</td><td><code>null</code></td></tr><tr><td>min-date</td><td>\u5F00\u59CB\u65E5\u671F</td><td>Date</td><td><code>\u5341\u5E74\u524D</code></td></tr><tr><td>max-date</td><td>\u7ED3\u675F\u65E5\u671F</td><td>Date</td><td><code>\u5341\u5E74\u540E</code></td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>confirm</td><td>\u70B9\u51FB\u786E\u5B9A\u6309\u94AE\u65F6\u89E6\u53D1</td><td>event: Event</td></tr><tr><td>close</td><td>\u5173\u95ED\u65F6\u89E6\u53D1</td><td>event: Event</td></tr></tbody></table>`,24),e=[p],j={setup(c,{expose:s}){return s({frontmatter:{}}),(h,o)=>(n(),a("div",l,e))}};export{j as default};
    109.