import{ax as o,al as n,z as l,A as h,B as d,R as s,b2 as r,O as e,J as i}from"./chunks/framework.DkLJC2NO.js";const y=JSON.parse('{"title":"DatePicker 日期选择器","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/date-picker.md","filePath":"form-config/fields/date-picker.md"}'),p={name:"form-config/fields/date-picker.md"};function c(k,t,m,g,b,f){const a=n("demo-block");return h(),l("div",null,[t[4]||(t[4]=d("h1",{id:"datepicker-日期选择器",tabindex:"-1"},[e("DatePicker 日期选择器 "),d("a",{class:"header-anchor",href:"#datepicker-日期选择器","aria-label":'Permalink to "DatePicker 日期选择器"'},"​")],-1)),t[5]||(t[5]=d("p",null,"用于选择或输入日期",-1)),t[6]||(t[6]=d("h2",{id:"基础用法",tabindex:"-1"},[e("基础用法 "),d("a",{class:"header-anchor",href:"#基础用法","aria-label":'Permalink to "基础用法"'},"​")],-1)),s(a,{type:"form",config:[{type:"date",name:"date",text:"日期选择器"}]},{source:i(()=>[...t[0]||(t[0]=[d("p",null," 以日期为基本单位，基础的日期选择控件 ",-1)])]),_:1}),t[7]||(t[7]=d("h2",{id:"禁用状态",tabindex:"-1"},[e("禁用状态 "),d("a",{class:"header-anchor",href:"#禁用状态","aria-label":'Permalink to "禁用状态"'},"​")],-1)),s(a,{type:"form",config:[{type:"date",name:"date",text:"日期选择器",disabled:()=>!0}]},{source:i(()=>[...t[1]||(t[1]=[d("p",null,[e(" 通过 "),d("code",null,"disabled"),e(" 属性禁用日期选择器 ")],-1)])]),_:1}),t[8]||(t[8]=d("h2",{id:"占位符",tabindex:"-1"},[e("占位符 "),d("a",{class:"header-anchor",href:"#占位符","aria-label":'Permalink to "占位符"'},"​")],-1)),s(a,{type:"form",config:[{type:"date",name:"date",text:"日期选择器",placeholder:"请选择日期"}]},{source:i(()=>[...t[2]||(t[2]=[d("p",null,[e(" 通过 "),d("code",null,"placeholder"),e(" 属性设置输入框占位文本 ")],-1)])]),_:1}),t[9]||(t[9]=r('<h2 id="日期格式" tabindex="-1">日期格式 <a class="header-anchor" href="#日期格式" aria-label="Permalink to &quot;日期格式&quot;">​</a></h2><p>使用<code>format</code>指定输入框的格式；使用<code>valueFormat</code>指定绑定值的格式。</p><p>默认情况下，组件的 <code>format</code> 默认值为 <code>YYYY/MM/DD</code>，<code>valueFormat</code> 默认值为 <code>YYYY/MM/DD</code>。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>请注意大小写</p></div><table tabindex="0"><thead><tr><th>格式</th><th>含义</th><th>备注</th><th>举例</th></tr></thead><tbody><tr><td><code>YYYY</code></td><td>年</td><td></td><td>2017</td></tr><tr><td><code>M</code></td><td>月</td><td>不补0</td><td>1</td></tr><tr><td><code>MM</code></td><td>月</td><td></td><td>01</td></tr><tr><td><code>D</code></td><td>日</td><td>不补0</td><td>2</td></tr><tr><td><code>DD</code></td><td>日</td><td></td><td>02</td></tr><tr><td><code>H</code></td><td>小时</td><td>24小时制；不补0</td><td>3</td></tr><tr><td><code>HH</code></td><td>小时</td><td>24小时制</td><td>03</td></tr><tr><td><code>h</code></td><td>小时</td><td>12小时制，须和 <code>A</code> 或 <code>a</code> 使用；不补0</td><td>3</td></tr><tr><td><code>hh</code></td><td>小时</td><td>12小时制，须和 <code>A</code> 或 <code>a</code> 使用</td><td>03</td></tr><tr><td><code>m</code></td><td>分钟</td><td>不补0</td><td>4</td></tr><tr><td><code>mm</code></td><td>分钟</td><td></td><td>04</td></tr><tr><td><code>s</code></td><td>秒</td><td>不补0</td><td>5</td></tr><tr><td><code>ss</code></td><td>秒</td><td></td><td>05</td></tr><tr><td><code>x</code></td><td>JS时间戳</td><td>组件绑定值为<code>number</code>类型</td><td>1483326245000</td></tr><tr><td><code>[MM]</code></td><td>不需要格式化字符</td><td>使用方括号标识不需要格式化的字符 (如 [A] [MM])</td><td>MM</td></tr></tbody></table>',5)),s(a,{type:"form",config:[{type:"date",name:"date",text:"日期选择器",format:"YYYY-MM-DD",valueFormat:"x"}]},{source:i(()=>[...t[3]||(t[3]=[d("p",null,[e(" 设置 "),d("code",null,"valueFormat"),e(" 为 "),d("code",null,"timestamp"),e("，绑定值将返回时间戳格式 ")],-1)])]),_:1}),t[10]||(t[10]=r(`<h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to &quot;Attributes&quot;">​</a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>绑定值的字段名</td><td>string</td><td>—</td><td>—</td></tr><tr><td>text</td><td>表单标签</td><td>string</td><td>—</td><td>—</td></tr><tr><td>placeholder</td><td>输入框占位文本</td><td>string</td><td>—</td><td>—</td></tr><tr><td>disabled</td><td>是否禁用</td><td>boolean / <a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts" target="_blank" rel="noreferrer">FilterFunction</a></td><td>—</td><td>false</td></tr><tr><td>format</td><td>显示在输入框中的格式</td><td>string</td><td>见<a href="#日期格式">日期格式</a></td><td>YYYY/MM/DD</td></tr><tr><td>valueFormat</td><td>绑定值的格式。不指定则绑定值为 Date 对象</td><td>string</td><td>见<a href="#日期格式">日期格式</a></td><td>YYYY/MM/DD</td></tr><tr><td>onChange</td><td>值变化时触发的函数</td><td><a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts" target="_blank" rel="noreferrer">OnChangeHandler</a></td><td>—</td><td>—</td></tr></tbody></table><h2 id="typescript-定义" tabindex="-1">TypeScript 定义 <a class="header-anchor" href="#typescript-定义" aria-label="Permalink to &quot;TypeScript 定义&quot;">​</a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> DateConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;date&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  format</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;YYYY-MM-dd HH:mm:ss&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  valueFormat</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;YYYY-MM-dd HH:mm:ss&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div>`,4))])}const F=o(p,[["render",c]]);export{y as __pageData,F as default};