1 line
144 KiB
JavaScript
1 line
144 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{1236:function(t,a,s){},1332:function(t,a,s){"use strict";var e=s(1236);s.n(e).a},1422:function(t,a,s){"use strict";s.r(a);var e=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-date-picker @change="onChange"/>\n <br/>\n <a-month-picker @change="onChange" placeholder="Select month"/>\n <br/>\n <a-range-picker @change="onChange"/>\n <br/>\n <a-week-picker @change="onChange" placeholder="Select week"/>\n </div>\n',script:"\n export default {\n methods: {\n onChange(date, dateString) {\n console.log(date, dateString);\n },\n },\n };\n",style:null,us:"\n#### Basic\nBasic use case. Users can select or input a date in panel.\n",cn:"\n#### 基本\n最简单的用法，在浮层中可以选择或者输入日期。\n",sourceCode:'<template>\n <div>\n <a-date-picker @change="onChange" />\n <br />\n <a-month-picker @change="onChange" placeholder="Select month" />\n <br />\n <a-range-picker @change="onChange" />\n <br />\n <a-week-picker @change="onChange" placeholder="Select week" />\n </div>\n</template>\n<script>\n export default {\n methods: {\n onChange(date, dateString) {\n console.log(date, dateString);\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",[s("a-date-picker",{on:{change:t.onChange}}),t._v(" "),s("br"),t._v(" "),s("a-month-picker",{attrs:{placeholder:"Select month"},on:{change:t.onChange}}),t._v(" "),s("br"),t._v(" "),s("a-range-picker",{on:{change:t.onChange}}),t._v(" "),s("br"),t._v(" "),s("a-week-picker",{attrs:{placeholder:"Select week"},on:{change:t.onChange}})],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"基本"}},[t._v("基本 "),s("a",{staticClass:"anchor",attrs:{href:"#基本"}},[t._v("#")])]),t._v(" "),s("p",[t._v("最简单的用法，在浮层中可以选择或者输入日期。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Basic"}},[t._v("Basic "),s("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[t._v("#")])]),t._v(" "),s("p",[t._v("Basic use case. Users can select or input a date in panel.")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-month-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select month"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-week-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select week"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"vbscript"},[t._v("\n export "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n methods: {\n onChange("),s("span",{staticClass:"hljs-built_in"},[t._v("date")]),t._v(", dateString) {\n console."),s("span",{staticClass:"hljs-built_in"},[t._v("log")]),t._v("("),s("span",{staticClass:"hljs-built_in"},[t._v("date")]),t._v(", dateString);\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};e._withStripped=!0;var n={methods:{onChange:function(t,a){console.log(t,a)}}},l=s(31),v=Object(l.a)(n,e,[],!1,null,null,null);v.options.__file="components/date-picker/demo/basic.md";var _=v.exports,r=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-date-picker>\n <template slot="dateRender" slot-scope="current, today">\n <div class="ant-calendar-date" :style="getCurrentStyle(current, today)">\n {{current.date()}}\n </div>\n </template>\n </a-date-picker>\n <a-range-picker>\n <template slot="dateRender" slot-scope="current">\n <div class="ant-calendar-date" :style="getCurrentStyle(current)">\n {{current.date()}}\n </div>\n </template>\n </a-range-picker>\n <a-week-picker>\n <template slot="dateRender" slot-scope="current">\n <div class="ant-calendar-date" :style="getCurrentStyle(current)">\n {{current.date()}}\n </div>\n </template>\n </a-week-picker>\n </div>\n',script:"\n export default {\n methods: {\n getCurrentStyle(current, today) {\n const style = {};\n if (current.date() === 1) {\n style.border = '1px solid #1890ff';\n style.borderRadius = '50%';\n }\n return style;\n },\n },\n };\n",style:null,us:"\n#### Customized Date Rendering\nWe can customize the rendering of date cells in the calendar by providing a `dateRender` function to `DatePicker`.\n",cn:"\n#### 定制日期单元格\n使用 `dateRender` 可以自定义日期单元格的内容和样式。\n",sourceCode:'<template>\n <div>\n <a-date-picker>\n <template slot="dateRender" slot-scope="current, today">\n <div class="ant-calendar-date" :style="getCurrentStyle(current, today)">\n {{current.date()}}\n </div>\n </template>\n </a-date-picker>\n <a-range-picker>\n <template slot="dateRender" slot-scope="current">\n <div class="ant-calendar-date" :style="getCurrentStyle(current)">\n {{current.date()}}\n </div>\n </template>\n </a-range-picker>\n <a-week-picker>\n <template slot="dateRender" slot-scope="current">\n <div class="ant-calendar-date" :style="getCurrentStyle(current)">\n {{current.date()}}\n </div>\n </template>\n </a-week-picker>\n </div>\n</template>\n<script>\n export default {\n methods: {\n getCurrentStyle(current, today) {\n const style = {};\n if (current.date() === 1) {\n style.border = \'1px solid #1890ff\';\n style.borderRadius = \'50%\';\n }\n return style;\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",[s("a-date-picker",{scopedSlots:t._u([{key:"dateRender",fn:function(a,e){return[s("div",{staticClass:"ant-calendar-date",style:t.getCurrentStyle(a,e)},[t._v("\n "+t._s(a.date())+"\n ")])]}}])}),t._v(" "),s("a-range-picker",{scopedSlots:t._u([{key:"dateRender",fn:function(a){return[s("div",{staticClass:"ant-calendar-date",style:t.getCurrentStyle(a)},[t._v("\n "+t._s(a.date())+"\n ")])]}}])}),t._v(" "),s("a-week-picker",{scopedSlots:t._u([{key:"dateRender",fn:function(a){return[s("div",{staticClass:"ant-calendar-date",style:t.getCurrentStyle(a)},[t._v("\n "+t._s(a.date())+"\n ")])]}}])})],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"定制日期单元格"}},[t._v("定制日期单元格 "),s("a",{staticClass:"anchor",attrs:{href:"#定制日期单元格"}},[t._v("#")])]),t._v(" "),s("p",[t._v("使用 "),s("code",[t._v("dateRender")]),t._v(" 可以自定义日期单元格的内容和样式。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Customized-Date-Rendering"}},[t._v("Customized Date Rendering "),s("a",{staticClass:"anchor",attrs:{href:"#Customized-Date-Rendering"}},[t._v("#")])]),t._v(" "),s("p",[t._v("We can customize the rendering of date cells in the calendar by providing a "),s("code",[t._v("dateRender")]),t._v(" function to "),s("code",[t._v("DatePicker")]),t._v(".")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"dateRender"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"current, today"')]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"ant-calendar-date"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"getCurrentStyle(current, today)"')]),t._v(">")]),t._v("\n "),s("span",[t._v("{{")]),t._v("current.date()"),s("span",[t._v("}}")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"dateRender"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"current"')]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"ant-calendar-date"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"getCurrentStyle(current)"')]),t._v(">")]),t._v("\n "),s("span",[t._v("{{")]),t._v("current.date()"),s("span",[t._v("}}")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-week-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"dateRender"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"current"')]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"ant-calendar-date"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"getCurrentStyle(current)"')]),t._v(">")]),t._v("\n "),s("span",[t._v("{{")]),t._v("current.date()"),s("span",[t._v("}}")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-week-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n getCurrentStyle(current, today) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" style = {};\n "),s("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (current.date() === "),s("span",{staticClass:"hljs-number"},[t._v("1")]),t._v(") {\n style.border = "),s("span",{staticClass:"hljs-string"},[t._v("'1px solid #1890ff'")]),t._v(";\n style.borderRadius = "),s("span",{staticClass:"hljs-string"},[t._v("'50%'")]),t._v(";\n }\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" style;\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};r._withStripped=!0;var i={methods:{getCurrentStyle:function(t,a){var s={};return 1===t.date()&&(s.border="1px solid #1890ff",s.borderRadius="50%"),s}}},o=Object(l.a)(i,r,[],!1,null,null,null);o.options.__file="components/date-picker/demo/date-render.md";var c=o.exports,d=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-date-picker format="YYYY-MM-DD HH:mm:ss" :disabledDate="disabledDate" :disabledTime="disabledDateTime" :showTime="{ defaultValue: moment(\'00:00:00\', \'HH:mm:ss\') }"/>\n <br/>\n <a-month-picker :disabledDate="disabledDate" placeholder="Select month"/>\n <br/>\n <a-range-picker :disabledDate="disabledDate" :disabledTime="disabledRangeTime" :showTime="{\n hideDisabledOptions: true,\n defaultValue: [moment(\'00:00:00\', \'HH:mm:ss\'), moment(\'11:59:59\', \'HH:mm:ss\')]\n }" format="YYYY-MM-DD HH:mm:ss"/>\n </div>\n',script:"\n import moment from 'moment';\n export default {\n methods: {\n moment,\n range(start, end) {\n const result = [];\n for (let i = start; i < end; i++) {\n result.push(i);\n }\n return result;\n },\n\n disabledDate(current) {\n // Can not select days before today and today\n return current && current < moment().endOf('day');\n },\n\n disabledDateTime() {\n return {\n disabledHours: () => this.range(0, 24).splice(4, 20),\n disabledMinutes: () => this.range(30, 60),\n disabledSeconds: () => [55, 56],\n };\n },\n\n disabledRangeTime(_, type) {\n if (type === 'start') {\n return {\n disabledHours: () => this.range(0, 60).splice(4, 20),\n disabledMinutes: () => this.range(30, 60),\n disabledSeconds: () => [55, 56],\n };\n }\n return {\n disabledHours: () => this.range(0, 60).splice(20, 4),\n disabledMinutes: () => this.range(0, 31),\n disabledSeconds: () => [55, 56],\n };\n },\n },\n };\n",style:null,us:"\n#### Disabled Date & Time\nDisabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.\n",cn:"\n#### 不可选择日期和时间\n可用 `disabledDate` 和 `disabledTime` 分别禁止选择部分日期和时间，其中 `disabledTime` 需要和 `showTime` 一起使用。\n",sourceCode:'<template>\n <div>\n <a-date-picker\n format="YYYY-MM-DD HH:mm:ss"\n :disabledDate="disabledDate"\n :disabledTime="disabledDateTime"\n :showTime="{ defaultValue: moment(\'00:00:00\', \'HH:mm:ss\') }"\n />\n <br />\n <a-month-picker :disabledDate="disabledDate" placeholder="Select month" />\n <br />\n <a-range-picker\n :disabledDate="disabledDate"\n :disabledTime="disabledRangeTime"\n :showTime="{\n hideDisabledOptions: true,\n defaultValue: [moment(\'00:00:00\', \'HH:mm:ss\'), moment(\'11:59:59\', \'HH:mm:ss\')]\n }"\n format="YYYY-MM-DD HH:mm:ss"\n />\n </div>\n</template>\n<script>\n import moment from \'moment\';\n export default {\n methods: {\n moment,\n range(start, end) {\n const result = [];\n for (let i = start; i < end; i++) {\n result.push(i);\n }\n return result;\n },\n\n disabledDate(current) {\n // Can not select days before today and today\n return current && current < moment().endOf(\'day\');\n },\n\n disabledDateTime() {\n return {\n disabledHours: () => this.range(0, 24).splice(4, 20),\n disabledMinutes: () => this.range(30, 60),\n disabledSeconds: () => [55, 56],\n };\n },\n\n disabledRangeTime(_, type) {\n if (type === \'start\') {\n return {\n disabledHours: () => this.range(0, 60).splice(4, 20),\n disabledMinutes: () => this.range(30, 60),\n disabledSeconds: () => [55, 56],\n };\n }\n return {\n disabledHours: () => this.range(0, 60).splice(20, 4),\n disabledMinutes: () => this.range(0, 31),\n disabledSeconds: () => [55, 56],\n };\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",[s("a-date-picker",{attrs:{format:"YYYY-MM-DD HH:mm:ss",disabledDate:t.disabledDate,disabledTime:t.disabledDateTime,showTime:{defaultValue:t.moment("00:00:00","HH:mm:ss")}}}),t._v(" "),s("br"),t._v(" "),s("a-month-picker",{attrs:{disabledDate:t.disabledDate,placeholder:"Select month"}}),t._v(" "),s("br"),t._v(" "),s("a-range-picker",{attrs:{disabledDate:t.disabledDate,disabledTime:t.disabledRangeTime,showTime:{hideDisabledOptions:!0,defaultValue:[t.moment("00:00:00","HH:mm:ss"),t.moment("11:59:59","HH:mm:ss")]},format:"YYYY-MM-DD HH:mm:ss"}})],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"不可选择日期和时间"}},[t._v("不可选择日期和时间 "),s("a",{staticClass:"anchor",attrs:{href:"#不可选择日期和时间"}},[t._v("#")])]),t._v(" "),s("p",[t._v("可用 "),s("code",[t._v("disabledDate")]),t._v(" 和 "),s("code",[t._v("disabledTime")]),t._v(" 分别禁止选择部分日期和时间，其中 "),s("code",[t._v("disabledTime")]),t._v(" 需要和 "),s("code",[t._v("showTime")]),t._v(" 一起使用。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Disabled-Date-&-Time"}},[t._v("Disabled Date & Time "),s("a",{staticClass:"anchor",attrs:{href:"#Disabled-Date-&-Time"}},[t._v("#")])]),t._v(" "),s("p",[t._v("Disabled part of dates and time by "),s("code",[t._v("disabledDate")]),t._v(" and "),s("code",[t._v("disabledTime")]),t._v(" respectively, and "),s("code",[t._v("disabledTime")]),t._v(" only works with "),s("code",[t._v("showTime")]),t._v(".")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("format")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"YYYY-MM-DD HH:mm:ss"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":disabledDate")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"disabledDate"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":disabledTime")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"disabledDateTime"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":showTime")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"{ defaultValue: moment('00:00:00', 'HH:mm:ss') }\"")]),t._v("\n />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-month-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":disabledDate")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"disabledDate"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select month"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":disabledDate")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"disabledDate"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":disabledTime")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"disabledRangeTime"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":showTime")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"{\n hideDisabledOptions: true,\n defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')]\n }\"")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("format")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"YYYY-MM-DD HH:mm:ss"')]),t._v("\n />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" moment "),s("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),s("span",{staticClass:"hljs-string"},[t._v("'moment'")]),t._v(";\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n moment,\n range(start, end) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" result = [];\n "),s("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),s("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = start; i < end; i++) {\n result.push(i);\n }\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" result;\n },\n\n disabledDate(current) {\n "),s("span",{staticClass:"hljs-comment"},[t._v("// Can not select days before today and today")]),t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" current && current < moment().endOf("),s("span",{staticClass:"hljs-string"},[t._v("'day'")]),t._v(");\n },\n\n disabledDateTime() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("disabledHours")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".range("),s("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("24")]),t._v(").splice("),s("span",{staticClass:"hljs-number"},[t._v("4")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("20")]),t._v("),\n "),s("span",{staticClass:"hljs-attr"},[t._v("disabledMinutes")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".range("),s("span",{staticClass:"hljs-number"},[t._v("30")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("60")]),t._v("),\n "),s("span",{staticClass:"hljs-attr"},[t._v("disabledSeconds")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" ["),s("span",{staticClass:"hljs-number"},[t._v("55")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("56")]),t._v("],\n };\n },\n\n disabledRangeTime(_, type) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (type === "),s("span",{staticClass:"hljs-string"},[t._v("'start'")]),t._v(") {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("disabledHours")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".range("),s("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("60")]),t._v(").splice("),s("span",{staticClass:"hljs-number"},[t._v("4")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("20")]),t._v("),\n "),s("span",{staticClass:"hljs-attr"},[t._v("disabledMinutes")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".range("),s("span",{staticClass:"hljs-number"},[t._v("30")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("60")]),t._v("),\n "),s("span",{staticClass:"hljs-attr"},[t._v("disabledSeconds")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" ["),s("span",{staticClass:"hljs-number"},[t._v("55")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("56")]),t._v("],\n };\n }\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("disabledHours")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".range("),s("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("60")]),t._v(").splice("),s("span",{staticClass:"hljs-number"},[t._v("20")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("4")]),t._v("),\n "),s("span",{staticClass:"hljs-attr"},[t._v("disabledMinutes")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".range("),s("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("31")]),t._v("),\n "),s("span",{staticClass:"hljs-attr"},[t._v("disabledSeconds")]),t._v(": "),s("span",{staticClass:"hljs-function"},[s("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" ["),s("span",{staticClass:"hljs-number"},[t._v("55")]),t._v(", "),s("span",{staticClass:"hljs-number"},[t._v("56")]),t._v("],\n };\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};d._withStripped=!0;var h=s(5),p=s.n(h),m={methods:{moment:p.a,range:function(t,a){for(var s=[],e=t;e<a;e++)s.push(e);return s},disabledDate:function(t){return t&&t<p()().endOf("day")},disabledDateTime:function(){var t=this;return{disabledHours:function(){return t.range(0,24).splice(4,20)},disabledMinutes:function(){return t.range(30,60)},disabledSeconds:function(){return[55,56]}}},disabledRangeTime:function(t,a){var s=this;return"start"===a?{disabledHours:function(){return s.range(0,60).splice(4,20)},disabledMinutes:function(){return s.range(30,60)},disabledSeconds:function(){return[55,56]}}:{disabledHours:function(){return s.range(0,60).splice(20,4)},disabledMinutes:function(){return s.range(0,31)},disabledSeconds:function(){return[55,56]}}}}},C=Object(l.a)(m,d,[],!1,null,null,null);C.options.__file="components/date-picker/demo/disabled-date.md";var u=C.exports,g=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-date-picker :defaultValue="moment(\'2015-06-06\', dateFormat)" disabled=""/>\n <br/>\n <a-month-picker :defaultValue="moment(\'2015-06\', \'YYYY-MM\')" disabled=""/>\n <br/>\n <a-range-picker :defaultValue="[moment(\'2015-06-06\', dateFormat), moment(\'2015-06-06\', dateFormat)]" disabled=""/>\n </div>\n',script:"\n import moment from 'moment';\n export default {\n data() {\n this.dateFormat = 'YYYY-MM-DD';\n return {};\n },\n methods: {\n moment,\n },\n };\n",style:null,us:"\n#### Disabled\nA disabled state of the `DatePicker`.\n",cn:"\n#### 禁用\n选择框的不可用状态。\n",sourceCode:"<template>\n <div>\n <a-date-picker :defaultValue=\"moment('2015-06-06', dateFormat)\" disabled />\n <br />\n <a-month-picker :defaultValue=\"moment('2015-06', 'YYYY-MM')\" disabled />\n <br />\n <a-range-picker\n :defaultValue=\"[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]\"\n disabled\n />\n </div>\n</template>\n<script>\n import moment from 'moment';\n export default {\n data() {\n this.dateFormat = 'YYYY-MM-DD';\n return {};\n },\n methods: {\n moment,\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("div",[s("a-date-picker",{attrs:{defaultValue:t.moment("2015-06-06",t.dateFormat),disabled:""}}),t._v(" "),s("br"),t._v(" "),s("a-month-picker",{attrs:{defaultValue:t.moment("2015-06","YYYY-MM"),disabled:""}}),t._v(" "),s("br"),t._v(" "),s("a-range-picker",{attrs:{defaultValue:[t.moment("2015-06-06",t.dateFormat),t.moment("2015-06-06",t.dateFormat)],disabled:""}})],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"禁用"}},[t._v("禁用 "),s("a",{staticClass:"anchor",attrs:{href:"#禁用"}},[t._v("#")])]),t._v(" "),s("p",[t._v("选择框的不可用状态。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Disabled"}},[t._v("Disabled "),s("a",{staticClass:"anchor",attrs:{href:"#Disabled"}},[t._v("#")])]),t._v(" "),s("p",[t._v("A disabled state of the "),s("code",[t._v("DatePicker")]),t._v(".")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":defaultValue")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"moment('2015-06-06', dateFormat)\"")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("disabled")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-month-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":defaultValue")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"moment('2015-06', 'YYYY-MM')\"")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("disabled")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":defaultValue")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]\"")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("disabled")]),t._v("\n />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" moment "),s("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),s("span",{staticClass:"hljs-string"},[t._v("'moment'")]),t._v(";\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".dateFormat = "),s("span",{staticClass:"hljs-string"},[t._v("'YYYY-MM-DD'")]),t._v(";\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {};\n },\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n moment,\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};g._withStripped=!0;var j={data:function(){return this.dateFormat="YYYY-MM-DD",{}},methods:{moment:p.a}},f=Object(l.a)(j,g,[],!1,null,null,null);f.options.__file="components/date-picker/demo/disabled.md";var k=f.exports,b=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-date-picker>\n <template slot="renderExtraFooter">\n extra footer\n </template>\n </a-date-picker>\n <a-date-picker showTime="">\n <template slot="renderExtraFooter">\n extra footer\n </template>\n </a-date-picker>\n <a-range-picker>\n <template slot="renderExtraFooter">\n extra footer\n </template>\n </a-range-picker>\n <a-range-picker showTime="">\n <template slot="renderExtraFooter">\n extra footer\n </template>\n </a-range-picker>\n <a-month-picker placeholder="Select month">\n <template slot="renderExtraFooter">\n extra footer\n </template>\n </a-month-picker>\n </div>\n',script:null,style:null,us:"\n#### Extra Footer\nRender extra footer in panel for customized requirements.\n",cn:"\n#### 额外的页脚\n在浮层中加入额外的页脚，以满足某些定制信息的需求。\n",sourceCode:'<template>\n <div>\n <a-date-picker>\n <template slot="renderExtraFooter">\n extra footer\n </template>\n </a-date-picker>\n <a-date-picker showTime>\n <template slot="renderExtraFooter">\n extra footer\n </template>\n </a-date-picker>\n <a-range-picker>\n <template slot="renderExtraFooter">\n extra footer\n </template>\n </a-range-picker>\n <a-range-picker showTime>\n <template slot="renderExtraFooter">\n extra footer\n </template>\n </a-range-picker>\n <a-month-picker placeholder="Select month">\n <template slot="renderExtraFooter">\n extra footer\n </template>\n </a-month-picker>\n </div>\n</template>\n'}}},[s("template",{slot:"component"},[s("div",[s("a-date-picker",[s("template",{slot:"renderExtraFooter"},[t._v("\n extra footer\n ")])],2),t._v(" "),s("a-date-picker",{attrs:{showTime:""}},[s("template",{slot:"renderExtraFooter"},[t._v("\n extra footer\n ")])],2),t._v(" "),s("a-range-picker",[s("template",{slot:"renderExtraFooter"},[t._v("\n extra footer\n ")])],2),t._v(" "),s("a-range-picker",{attrs:{showTime:""}},[s("template",{slot:"renderExtraFooter"},[t._v("\n extra footer\n ")])],2),t._v(" "),s("a-month-picker",{attrs:{placeholder:"Select month"}},[s("template",{slot:"renderExtraFooter"},[t._v("\n extra footer\n ")])],2)],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"额外的页脚"}},[t._v("额外的页脚 "),s("a",{staticClass:"anchor",attrs:{href:"#额外的页脚"}},[t._v("#")])]),t._v(" "),s("p",[t._v("在浮层中加入额外的页脚，以满足某些定制信息的需求。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Extra-Footer"}},[t._v("Extra Footer "),s("a",{staticClass:"anchor",attrs:{href:"#Extra-Footer"}},[t._v("#")])]),t._v(" "),s("p",[t._v("Render extra footer in panel for customized requirements.")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"renderExtraFooter"')]),t._v(">")]),t._v("\n extra footer\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("showTime")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"renderExtraFooter"')]),t._v(">")]),t._v("\n extra footer\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"renderExtraFooter"')]),t._v(">")]),t._v("\n extra footer\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("showTime")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"renderExtraFooter"')]),t._v(">")]),t._v("\n extra footer\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-month-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select month"')]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"renderExtraFooter"')]),t._v(">")]),t._v("\n extra footer\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-month-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n")])])])],2)]],2)};b._withStripped=!0;var y=Object(l.a)({},b,[],!1,null,null,null);y.options.__file="components/date-picker/demo/extra-footer.md";var w=y.exports,Y=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-date-picker :defaultValue="moment(\'2015/01/01\', dateFormat)" :format="dateFormat"/>\n <br/>\n <a-month-picker :defaultValue="moment(\'2015/01\', monthFormat)" :format="monthFormat"/>\n <br/>\n <a-range-picker :defaultValue="[moment(\'2015/01/01\', dateFormat), moment(\'2015/01/01\', dateFormat)]" :format="dateFormat"/>\n </div>\n',script:"\n import moment from 'moment';\n export default {\n data() {\n return {\n dateFormat: 'YYYY/MM/DD',\n monthFormat: 'YYYY/MM',\n };\n },\n methods: {\n moment,\n },\n };\n",style:null,us:"\n#### Date Format\nWe can set the date format by `format`.\n",cn:"\n#### 日期格式\n使用 `format` 属性，可以自定义日期显示格式。\n",sourceCode:"<template>\n <div>\n <a-date-picker :defaultValue=\"moment('2015/01/01', dateFormat)\" :format=\"dateFormat\" />\n <br />\n <a-month-picker :defaultValue=\"moment('2015/01', monthFormat)\" :format=\"monthFormat\" />\n <br />\n <a-range-picker\n :defaultValue=\"[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]\"\n :format=\"dateFormat\"\n />\n </div>\n</template>\n<script>\n import moment from 'moment';\n export default {\n data() {\n return {\n dateFormat: 'YYYY/MM/DD',\n monthFormat: 'YYYY/MM',\n };\n },\n methods: {\n moment,\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("div",[s("a-date-picker",{attrs:{defaultValue:t.moment("2015/01/01",t.dateFormat),format:t.dateFormat}}),t._v(" "),s("br"),t._v(" "),s("a-month-picker",{attrs:{defaultValue:t.moment("2015/01",t.monthFormat),format:t.monthFormat}}),t._v(" "),s("br"),t._v(" "),s("a-range-picker",{attrs:{defaultValue:[t.moment("2015/01/01",t.dateFormat),t.moment("2015/01/01",t.dateFormat)],format:t.dateFormat}})],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"日期格式"}},[t._v("日期格式 "),s("a",{staticClass:"anchor",attrs:{href:"#日期格式"}},[t._v("#")])]),t._v(" "),s("p",[t._v("使用 "),s("code",[t._v("format")]),t._v(" 属性，可以自定义日期显示格式。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Date-Format"}},[t._v("Date Format "),s("a",{staticClass:"anchor",attrs:{href:"#Date-Format"}},[t._v("#")])]),t._v(" "),s("p",[t._v("We can set the date format by "),s("code",[t._v("format")]),t._v(".")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":defaultValue")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"moment('2015/01/01', dateFormat)\"")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":format")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"dateFormat"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-month-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":defaultValue")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"moment('2015/01', monthFormat)\"")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":format")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"monthFormat"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":defaultValue")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]\"")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":format")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"dateFormat"')]),t._v("\n />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" moment "),s("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),s("span",{staticClass:"hljs-string"},[t._v("'moment'")]),t._v(";\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("dateFormat")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'YYYY/MM/DD'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("monthFormat")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'YYYY/MM'")]),t._v(",\n };\n },\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n moment,\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};Y._withStripped=!0;var D={data:function(){return{dateFormat:"YYYY/MM/DD",monthFormat:"YYYY/MM"}},methods:{moment:p.a}},x=Object(l.a)(D,Y,[],!1,null,null,null);x.options.__file="components/date-picker/demo/format.md";var S=x.exports,T=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-date-picker :mode="mode1" showTime="" @openChange="handleOpenChange1" @panelChange="handlePanelChange1"/>\n <br/>\n <a-range-picker :placeholder="[\'Start month\', \'End month\']" format="YYYY-MM" :value="value" :mode="mode2" @panelChange="handlePanelChange2" @change="handleChange"/>\n </div>\n',script:"\n export default {\n data() {\n return {\n mode1: 'time',\n mode2: ['month', 'month'],\n value: [],\n };\n },\n methods: {\n handleOpenChange1(open) {\n if (open) {\n this.mode1 = 'time';\n }\n },\n handleChange(value) {\n this.value = value;\n },\n handlePanelChange1(value, mode) {\n this.mode1 = mode;\n },\n handlePanelChange2(value, mode) {\n this.value = value;\n this.mode2 = [\n mode[0] === 'date' ? 'month' : mode[0],\n mode[1] === 'date' ? 'month' : mode[1],\n ];\n },\n },\n };\n",style:null,us:"\n#### Controlled Panels\nDeterming which panel to show with `mode` and `onPanelChange`.\n",cn:"\n#### 受控面板\n通过组合 `mode` 与 `onPanelChange` 控制要展示的面板。\n",sourceCode:"<template>\n <div>\n <a-date-picker\n :mode=\"mode1\"\n showTime\n @openChange=\"handleOpenChange1\"\n @panelChange=\"handlePanelChange1\"\n />\n <br />\n <a-range-picker\n :placeholder=\"['Start month', 'End month']\"\n format=\"YYYY-MM\"\n :value=\"value\"\n :mode=\"mode2\"\n @panelChange=\"handlePanelChange2\"\n @change=\"handleChange\"\n />\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n mode1: 'time',\n mode2: ['month', 'month'],\n value: [],\n };\n },\n methods: {\n handleOpenChange1(open) {\n if (open) {\n this.mode1 = 'time';\n }\n },\n handleChange(value) {\n this.value = value;\n },\n handlePanelChange1(value, mode) {\n this.mode1 = mode;\n },\n handlePanelChange2(value, mode) {\n this.value = value;\n this.mode2 = [\n mode[0] === 'date' ? 'month' : mode[0],\n mode[1] === 'date' ? 'month' : mode[1],\n ];\n },\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("div",[s("a-date-picker",{attrs:{mode:t.mode1,showTime:""},on:{openChange:t.handleOpenChange1,panelChange:t.handlePanelChange1}}),t._v(" "),s("br"),t._v(" "),s("a-range-picker",{attrs:{placeholder:["Start month","End month"],format:"YYYY-MM",value:t.value,mode:t.mode2},on:{panelChange:t.handlePanelChange2,change:t.handleChange}})],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"受控面板"}},[t._v("受控面板 "),s("a",{staticClass:"anchor",attrs:{href:"#受控面板"}},[t._v("#")])]),t._v(" "),s("p",[t._v("通过组合 "),s("code",[t._v("mode")]),t._v(" 与 "),s("code",[t._v("onPanelChange")]),t._v(" 控制要展示的面板。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Controlled-Panels"}},[t._v("Controlled Panels "),s("a",{staticClass:"anchor",attrs:{href:"#Controlled-Panels"}},[t._v("#")])]),t._v(" "),s("p",[t._v("Determing which panel to show with "),s("code",[t._v("mode")]),t._v(" and "),s("code",[t._v("onPanelChange")]),t._v(".")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":mode")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"mode1"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("showTime")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("@openChange")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"handleOpenChange1"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("@panelChange")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"handlePanelChange1"')]),t._v("\n />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"['Start month', 'End month']\"")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("format")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"YYYY-MM"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":value")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"value"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":mode")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"mode2"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("@panelChange")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"handlePanelChange2"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"handleChange"')]),t._v("\n />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("mode1")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'time'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("mode2")]),t._v(": ["),s("span",{staticClass:"hljs-string"},[t._v("'month'")]),t._v(", "),s("span",{staticClass:"hljs-string"},[t._v("'month'")]),t._v("],\n "),s("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v(": [],\n };\n },\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n handleOpenChange1(open) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (open) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".mode1 = "),s("span",{staticClass:"hljs-string"},[t._v("'time'")]),t._v(";\n }\n },\n handleChange(value) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".value = value;\n },\n handlePanelChange1(value, mode) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".mode1 = mode;\n },\n handlePanelChange2(value, mode) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".value = value;\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".mode2 = [\n mode["),s("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("] === "),s("span",{staticClass:"hljs-string"},[t._v("'date'")]),t._v(" ? "),s("span",{staticClass:"hljs-string"},[t._v("'month'")]),t._v(" : mode["),s("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("],\n mode["),s("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("] === "),s("span",{staticClass:"hljs-string"},[t._v("'date'")]),t._v(" ? "),s("span",{staticClass:"hljs-string"},[t._v("'month'")]),t._v(" : mode["),s("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("],\n ];\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};T._withStripped=!0;var P={data:function(){return{mode1:"time",mode2:["month","month"],value:[]}},methods:{handleOpenChange1:function(t){t&&(this.mode1="time")},handleChange:function(t){this.value=t},handlePanelChange1:function(t,a){this.mode1=a},handlePanelChange2:function(t,a){this.value=t,this.mode2=["date"===a[0]?"month":a[0],"date"===a[1]?"month":a[1]]}}},M=Object(l.a)(P,T,[],!1,null,null,null);M.options.__file="components/date-picker/demo/mode.md";var V=M.exports,E=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-range-picker :ranges="{ Today: [moment(), moment()], \'This Month\': [moment(), moment().endOf(\'month\')] }" @change="onChange"/>\n <br/>\n <a-range-picker :ranges="{ Today: [moment(), moment()], \'This Month\': [moment(), moment().endOf(\'month\')] }" showTime="" format="YYYY/MM/DD HH:mm:ss" @change="onChange"/>\n </div>\n',script:"\n import moment from 'moment';\n export default {\n data() {\n return {\n dateFormat: 'YYYY/MM/DD',\n monthFormat: 'YYYY/MM',\n };\n },\n methods: {\n moment,\n onChange(dates, dateStrings) {\n console.log('From: ', dates[0], ', to: ', dates[1]);\n console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);\n },\n },\n };\n",style:null,us:"\n#### Presetted Ranges\nWe can set presetted ranges to RangePicker to improve user experience.\n",cn:"\n#### 预设范围\n可以预设常用的日期范围以提高用户体验。\n",sourceCode:"<template>\n <div>\n <a-range-picker\n :ranges=\"{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }\"\n @change=\"onChange\"\n />\n <br />\n <a-range-picker\n :ranges=\"{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }\"\n showTime\n format=\"YYYY/MM/DD HH:mm:ss\"\n @change=\"onChange\"\n />\n </div>\n</template>\n<script>\n import moment from 'moment';\n export default {\n data() {\n return {\n dateFormat: 'YYYY/MM/DD',\n monthFormat: 'YYYY/MM',\n };\n },\n methods: {\n moment,\n onChange(dates, dateStrings) {\n console.log('From: ', dates[0], ', to: ', dates[1]);\n console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);\n },\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("div",[s("a-range-picker",{attrs:{ranges:{Today:[t.moment(),t.moment()],"This Month":[t.moment(),t.moment().endOf("month")]}},on:{change:t.onChange}}),t._v(" "),s("br"),t._v(" "),s("a-range-picker",{attrs:{ranges:{Today:[t.moment(),t.moment()],"This Month":[t.moment(),t.moment().endOf("month")]},showTime:"",format:"YYYY/MM/DD HH:mm:ss"},on:{change:t.onChange}})],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"预设范围"}},[t._v("预设范围 "),s("a",{staticClass:"anchor",attrs:{href:"#预设范围"}},[t._v("#")])]),t._v(" "),s("p",[t._v("可以预设常用的日期范围以提高用户体验。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Presetted-Ranges"}},[t._v("Presetted Ranges "),s("a",{staticClass:"anchor",attrs:{href:"#Presetted-Ranges"}},[t._v("#")])]),t._v(" "),s("p",[t._v("We can set presetted ranges to RangePicker to improve user experience.")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":ranges")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }\"")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v("\n />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":ranges")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }\"")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("showTime")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("format")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"YYYY/MM/DD HH:mm:ss"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v("\n />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" moment "),s("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),s("span",{staticClass:"hljs-string"},[t._v("'moment'")]),t._v(";\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("dateFormat")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'YYYY/MM/DD'")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("monthFormat")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'YYYY/MM'")]),t._v(",\n };\n },\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n moment,\n onChange(dates, dateStrings) {\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),s("span",{staticClass:"hljs-string"},[t._v("'From: '")]),t._v(", dates["),s("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("], "),s("span",{staticClass:"hljs-string"},[t._v("', to: '")]),t._v(", dates["),s("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("]);\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),s("span",{staticClass:"hljs-string"},[t._v("'From: '")]),t._v(", dateStrings["),s("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("], "),s("span",{staticClass:"hljs-string"},[t._v("', to: '")]),t._v(", dateStrings["),s("span",{staticClass:"hljs-number"},[t._v("1")]),t._v("]);\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};E._withStripped=!0;var O={data:function(){return{dateFormat:"YYYY/MM/DD",monthFormat:"YYYY/MM"}},methods:{moment:p.a,onChange:function(t,a){console.log("From: ",t[0],", to: ",t[1]),console.log("From: ",a[0],", to: ",a[1])}}},F=Object(l.a)(O,E,[],!1,null,null,null);F.options.__file="components/date-picker/demo/presetted-ranges.md";var H=F.exports,R=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-radio-group v-model="size">\n <a-radio-button value="large">Large</a-radio-button>\n <a-radio-button value="default">Default</a-radio-button>\n <a-radio-button value="small">Small</a-radio-button>\n </a-radio-group>\n <br/><br/>\n <a-date-picker :size="size"/>\n <br/>\n <a-month-picker :size="size" placeholder="Select Month"/>\n <br/>\n <a-range-picker :size="size"/>\n <br/>\n <a-week-picker :size="size" placeholder="Select Week"/>\n </div>\n',script:"\n import moment from 'moment';\n export default {\n data() {\n return {\n size: 'default',\n };\n },\n };\n",style:null,us:"\n#### Three Sizes\nThe input box comes in three sizes. `default` will be used if `size` is omitted.\n",cn:"\n#### 三种大小\n三种大小的输入框，若不设置，则为 `default`。\n",sourceCode:'<template>\n <div>\n <a-radio-group v-model="size">\n <a-radio-button value="large">Large</a-radio-button>\n <a-radio-button value="default">Default</a-radio-button>\n <a-radio-button value="small">Small</a-radio-button>\n </a-radio-group>\n <br /><br />\n <a-date-picker :size="size" />\n <br />\n <a-month-picker :size="size" placeholder="Select Month" />\n <br />\n <a-range-picker :size="size" />\n <br />\n <a-week-picker :size="size" placeholder="Select Week" />\n </div>\n</template>\n<script>\n import moment from \'moment\';\n export default {\n data() {\n return {\n size: \'default\',\n };\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",[s("a-radio-group",{model:{value:t.size,callback:function(a){t.size=a},expression:"size"}},[s("a-radio-button",{attrs:{value:"large"}},[t._v("Large")]),t._v(" "),s("a-radio-button",{attrs:{value:"default"}},[t._v("Default")]),t._v(" "),s("a-radio-button",{attrs:{value:"small"}},[t._v("Small")])],1),t._v(" "),s("br"),s("br"),t._v(" "),s("a-date-picker",{attrs:{size:t.size}}),t._v(" "),s("br"),t._v(" "),s("a-month-picker",{attrs:{size:t.size,placeholder:"Select Month"}}),t._v(" "),s("br"),t._v(" "),s("a-range-picker",{attrs:{size:t.size}}),t._v(" "),s("br"),t._v(" "),s("a-week-picker",{attrs:{size:t.size,placeholder:"Select Week"}})],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"三种大小"}},[t._v("三种大小 "),s("a",{staticClass:"anchor",attrs:{href:"#三种大小"}},[t._v("#")])]),t._v(" "),s("p",[t._v("三种大小的输入框，若不设置，则为 "),s("code",[t._v("default")]),t._v("。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Three-Sizes"}},[t._v("Three Sizes "),s("a",{staticClass:"anchor",attrs:{href:"#Three-Sizes"}},[t._v("#")])]),t._v(" "),s("p",[t._v("The input box comes in three sizes. "),s("code",[t._v("default")]),t._v(" will be used if "),s("code",[t._v("size")]),t._v(" is omitted.")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-radio-group")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("v-model")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"size"')]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-radio-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"large"')]),t._v(">")]),t._v("Large"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-radio-button")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-radio-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"default"')]),t._v(">")]),t._v("Default"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-radio-button")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-radio-button")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("value")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"small"')]),t._v(">")]),t._v("Small"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-radio-button")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-radio-group")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":size")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"size"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-month-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":size")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"size"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select Month"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":size")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"size"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-week-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v(":size")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"size"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select Week"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" moment "),s("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),s("span",{staticClass:"hljs-string"},[t._v("'moment'")]),t._v(";\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'default'")]),t._v(",\n };\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};R._withStripped=!0;var z={data:function(){return{size:"default"}}},I=Object(l.a)(z,R,[],!1,null,null,null);I.options.__file="components/date-picker/demo/size.md";var W=I.exports,A=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-date-picker :disabledDate="disabledStartDate" showTime="" format="YYYY-MM-DD HH:mm:ss" v-model="startValue" placeholder="Start" @openChange="handleStartOpenChange"/>\n <a-date-picker :disabledDate="disabledEndDate" showTime="" format="YYYY-MM-DD HH:mm:ss" placeholder="End" v-model="endValue" :open="endOpen" @openChange="handleEndOpenChange"/>\n </div>\n',script:"\n export default {\n data() {\n return {\n startValue: null,\n endValue: null,\n endOpen: false,\n };\n },\n watch: {\n startValue(val) {\n console.log('startValue', val);\n },\n endValue(val) {\n console.log('endValue', val);\n },\n },\n methods: {\n disabledStartDate(startValue) {\n const endValue = this.endValue;\n if (!startValue || !endValue) {\n return false;\n }\n return startValue.valueOf() > endValue.valueOf();\n },\n disabledEndDate(endValue) {\n const startValue = this.startValue;\n if (!endValue || !startValue) {\n return false;\n }\n return startValue.valueOf() >= endValue.valueOf();\n },\n handleStartOpenChange(open) {\n if (!open) {\n this.endOpen = true;\n }\n },\n handleEndOpenChange(open) {\n this.endOpen = open;\n },\n },\n };\n",style:null,us:"\n#### Customized Range Picker\nWhen `RangePicker` does not satisfied your requirements, try to implement similar functionality with two `DatePicker`.\n> * Use the `disabledDate` property to limit the start and end dates.\n> * Improve user experience with `open` and `onOpenChange`.\n",cn:"\n#### 自定义日期范围选择\n当 `RangePicker` 无法满足业务需求时，可以使用两个 `DatePicker` 实现类似的功能。\n> * 通过设置 `disabledDate` 方法，来约束开始和结束日期。\n> * 通过 `open` `onOpenChange` 来优化交互。\n",sourceCode:'<template>\n <div>\n <a-date-picker\n :disabledDate="disabledStartDate"\n showTime\n format="YYYY-MM-DD HH:mm:ss"\n v-model="startValue"\n placeholder="Start"\n @openChange="handleStartOpenChange"\n />\n <a-date-picker\n :disabledDate="disabledEndDate"\n showTime\n format="YYYY-MM-DD HH:mm:ss"\n placeholder="End"\n v-model="endValue"\n :open="endOpen"\n @openChange="handleEndOpenChange"\n />\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n startValue: null,\n endValue: null,\n endOpen: false,\n };\n },\n watch: {\n startValue(val) {\n console.log(\'startValue\', val);\n },\n endValue(val) {\n console.log(\'endValue\', val);\n },\n },\n methods: {\n disabledStartDate(startValue) {\n const endValue = this.endValue;\n if (!startValue || !endValue) {\n return false;\n }\n return startValue.valueOf() > endValue.valueOf();\n },\n disabledEndDate(endValue) {\n const startValue = this.startValue;\n if (!endValue || !startValue) {\n return false;\n }\n return startValue.valueOf() >= endValue.valueOf();\n },\n handleStartOpenChange(open) {\n if (!open) {\n this.endOpen = true;\n }\n },\n handleEndOpenChange(open) {\n this.endOpen = open;\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",[s("a-date-picker",{attrs:{disabledDate:t.disabledStartDate,showTime:"",format:"YYYY-MM-DD HH:mm:ss",placeholder:"Start"},on:{openChange:t.handleStartOpenChange},model:{value:t.startValue,callback:function(a){t.startValue=a},expression:"startValue"}}),t._v(" "),s("a-date-picker",{attrs:{disabledDate:t.disabledEndDate,showTime:"",format:"YYYY-MM-DD HH:mm:ss",placeholder:"End",open:t.endOpen},on:{openChange:t.handleEndOpenChange},model:{value:t.endValue,callback:function(a){t.endValue=a},expression:"endValue"}})],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"自定义日期范围选择"}},[t._v("自定义日期范围选择 "),s("a",{staticClass:"anchor",attrs:{href:"#自定义日期范围选择"}},[t._v("#")])]),t._v(" "),s("p",[t._v("当 "),s("code",[t._v("RangePicker")]),t._v(" 无法满足业务需求时，可以使用两个 "),s("code",[t._v("DatePicker")]),t._v(" 实现类似的功能。")]),t._v(" "),s("blockquote",[s("ul",[s("li",[t._v("通过设置 "),s("code",[t._v("disabledDate")]),t._v(" 方法，来约束开始和结束日期。")]),t._v(" "),s("li",[t._v("通过 "),s("code",[t._v("open")]),t._v(" "),s("code",[t._v("onOpenChange")]),t._v(" 来优化交互。")])])])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Customized-Range-Picker"}},[t._v("Customized Range Picker "),s("a",{staticClass:"anchor",attrs:{href:"#Customized-Range-Picker"}},[t._v("#")])]),t._v(" "),s("p",[t._v("When "),s("code",[t._v("RangePicker")]),t._v(" does not satisfied your requirements, try to implement similar functionality with two "),s("code",[t._v("DatePicker")]),t._v(".")]),t._v(" "),s("blockquote",[s("ul",[s("li",[t._v("Use the "),s("code",[t._v("disabledDate")]),t._v(" property to limit the start and end dates.")]),t._v(" "),s("li",[t._v("Improve user experience with "),s("code",[t._v("open")]),t._v(" and "),s("code",[t._v("onOpenChange")]),t._v(".")])])])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":disabledDate")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"disabledStartDate"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("showTime")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("format")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"YYYY-MM-DD HH:mm:ss"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("v-model")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"startValue"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Start"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("@openChange")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"handleStartOpenChange"')]),t._v("\n />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":disabledDate")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"disabledEndDate"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("showTime")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("format")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"YYYY-MM-DD HH:mm:ss"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"End"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("v-model")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"endValue"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":open")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"endOpen"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("@openChange")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"handleEndOpenChange"')]),t._v("\n />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("startValue")]),t._v(": "),s("span",{staticClass:"hljs-literal"},[t._v("null")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("endValue")]),t._v(": "),s("span",{staticClass:"hljs-literal"},[t._v("null")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("endOpen")]),t._v(": "),s("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n };\n },\n "),s("span",{staticClass:"hljs-attr"},[t._v("watch")]),t._v(": {\n startValue(val) {\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),s("span",{staticClass:"hljs-string"},[t._v("'startValue'")]),t._v(", val);\n },\n endValue(val) {\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),s("span",{staticClass:"hljs-string"},[t._v("'endValue'")]),t._v(", val);\n },\n },\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n disabledStartDate(startValue) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" endValue = "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".endValue;\n "),s("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (!startValue || !endValue) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),s("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n }\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" startValue.valueOf() > endValue.valueOf();\n },\n disabledEndDate(endValue) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" startValue = "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".startValue;\n "),s("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (!endValue || !startValue) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" "),s("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n }\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" startValue.valueOf() >= endValue.valueOf();\n },\n handleStartOpenChange(open) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("if")]),t._v(" (!open) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".endOpen = "),s("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n }\n },\n handleEndOpenChange(open) {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".endOpen = open;\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};A._withStripped=!0;var B={data:function(){return{startValue:null,endValue:null,endOpen:!1}},watch:{startValue:function(t){console.log("startValue",t)},endValue:function(t){console.log("endValue",t)}},methods:{disabledStartDate:function(t){var a=this.endValue;return!(!t||!a)&&t.valueOf()>a.valueOf()},disabledEndDate:function(t){var a=this.startValue;return!(!t||!a)&&a.valueOf()>=t.valueOf()},handleStartOpenChange:function(t){t||(this.endOpen=!0)},handleEndOpenChange:function(t){this.endOpen=t}}},$=Object(l.a)(B,A,[],!1,null,null,null);$.options.__file="components/date-picker/demo/start-end.md";var N=$.exports,U=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-date-picker showTime="" placeholder="Select Time" @change="onChange" @ok="onOk"/>\n <br/>\n <a-range-picker :showTime="{ format: \'HH:mm\' }" format="YYYY-MM-DD HH:mm" :placeholder="[\'Start Time\', \'End Time\']" @change="onChange" @ok="onOk"/>\n </div>\n',script:"\n export default {\n methods: {\n onChange(value, dateString) {\n console.log('Selected Time: ', value);\n console.log('Formatted Selected Time: ', dateString);\n },\n onOk(value) {\n console.log('onOk: ', value);\n },\n },\n };\n",style:null,us:"\n#### Choose Time\nThis property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.\n",cn:"\n#### 日期时间选择\n增加选择时间功能，当 `showTime` 为一个对象时，其属性会传递给内建的 `TimePicker`。\n",sourceCode:'<template>\n <div>\n <a-date-picker showTime placeholder="Select Time" @change="onChange" @ok="onOk" />\n <br />\n <a-range-picker\n :showTime="{ format: \'HH:mm\' }"\n format="YYYY-MM-DD HH:mm"\n :placeholder="[\'Start Time\', \'End Time\']"\n @change="onChange"\n @ok="onOk"\n />\n </div>\n</template>\n<script>\n export default {\n methods: {\n onChange(value, dateString) {\n console.log(\'Selected Time: \', value);\n console.log(\'Formatted Selected Time: \', dateString);\n },\n onOk(value) {\n console.log(\'onOk: \', value);\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",[s("a-date-picker",{attrs:{showTime:"",placeholder:"Select Time"},on:{change:t.onChange,ok:t.onOk}}),t._v(" "),s("br"),t._v(" "),s("a-range-picker",{attrs:{showTime:{format:"HH:mm"},format:"YYYY-MM-DD HH:mm",placeholder:["Start Time","End Time"]},on:{change:t.onChange,ok:t.onOk}})],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"日期时间选择"}},[t._v("日期时间选择 "),s("a",{staticClass:"anchor",attrs:{href:"#日期时间选择"}},[t._v("#")])]),t._v(" "),s("p",[t._v("增加选择时间功能，当 "),s("code",[t._v("showTime")]),t._v(" 为一个对象时，其属性会传递给内建的 "),s("code",[t._v("TimePicker")]),t._v("。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Choose-Time"}},[t._v("Choose Time "),s("a",{staticClass:"anchor",attrs:{href:"#Choose-Time"}},[t._v("#")])]),t._v(" "),s("p",[t._v("This property provide an additional time selection. When "),s("code",[t._v("showTime")]),t._v(" is an Object, its properties will be passed on to built-in "),s("code",[t._v("TimePicker")]),t._v(".")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("showTime")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select Time"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@ok")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onOk"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":showTime")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"{ format: 'HH:mm' }\"")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("format")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"YYYY-MM-DD HH:mm"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v(":placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v("\"['Start Time', 'End Time']\"")]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v("\n "),s("span",{staticClass:"hljs-attr"},[t._v("@ok")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onOk"')]),t._v("\n />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onChange(value, dateString) {\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),s("span",{staticClass:"hljs-string"},[t._v("'Selected Time: '")]),t._v(", value);\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),s("span",{staticClass:"hljs-string"},[t._v("'Formatted Selected Time: '")]),t._v(", dateString);\n },\n onOk(value) {\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),s("span",{staticClass:"hljs-string"},[t._v("'onOk: '")]),t._v(", value);\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};U._withStripped=!0;var q={methods:{onChange:function(t,a){console.log("Selected Time: ",t),console.log("Formatted Selected Time: ",a)},onOk:function(t){console.log("onOk: ",t)}}},L=Object(l.a)(q,U,[],!1,null,null,null);L.options.__file="components/date-picker/demo/time.md";var J=L.exports,G=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-date-picker @change="onChange">\n <a-icon slot="suffixIcon" type="smile"/>\n </a-date-picker>\n <br/>\n <a-month-picker @change="onChange" placeholder="Select month">\n <a-icon slot="suffixIcon" type="smile"/>\n </a-month-picker>\n <br/>\n <a-range-picker @change="onChange">\n <a-icon slot="suffixIcon" type="smile"/>\n </a-range-picker>\n <br/>\n <a-week-picker @change="onChange" placeholder="Select week">\n <a-icon slot="suffixIcon" type="smile"/>\n </a-week-picker>\n <br/>\n <a-date-picker suffixIcon="ab" @change="onChange"/>\n <br/>\n <a-month-picker suffixIcon="ab" @change="onChange" placeholder="Select month"/>\n <br/>\n <a-range-picker suffixIcon="ab" @change="onChange"/>\n <br/>\n <a-week-picker suffixIcon="ab" @change="onChange" placeholder="Select week"/>\n </div>\n',script:"\n export default {\n methods: {\n onChange(date, dateString) {\n console.log(date, dateString);\n },\n },\n };\n",style:null,us:"\n#### Suffix\nBasic use case. Users can select or input a date in panel.\n",cn:"\n#### 后缀图标\n最简单的用法，在浮层中可以选择或者输入日期。\n",sourceCode:'<template>\n <div>\n <a-date-picker @change="onChange">\n <a-icon slot="suffixIcon" type="smile" />\n </a-date-picker>\n <br />\n <a-month-picker @change="onChange" placeholder="Select month">\n <a-icon slot="suffixIcon" type="smile" />\n </a-month-picker>\n <br />\n <a-range-picker @change="onChange">\n <a-icon slot="suffixIcon" type="smile" />\n </a-range-picker>\n <br />\n <a-week-picker @change="onChange" placeholder="Select week">\n <a-icon slot="suffixIcon" type="smile" />\n </a-week-picker>\n <br />\n <a-date-picker suffixIcon="ab" @change="onChange" />\n <br />\n <a-month-picker suffixIcon="ab" @change="onChange" placeholder="Select month" />\n <br />\n <a-range-picker suffixIcon="ab" @change="onChange" />\n <br />\n <a-week-picker suffixIcon="ab" @change="onChange" placeholder="Select week" />\n </div>\n</template>\n<script>\n export default {\n methods: {\n onChange(date, dateString) {\n console.log(date, dateString);\n },\n },\n };\n<\/script>\n'}}},[s("template",{slot:"component"},[s("div",[s("a-date-picker",{on:{change:t.onChange}},[s("a-icon",{attrs:{slot:"suffixIcon",type:"smile"},slot:"suffixIcon"})],1),t._v(" "),s("br"),t._v(" "),s("a-month-picker",{attrs:{placeholder:"Select month"},on:{change:t.onChange}},[s("a-icon",{attrs:{slot:"suffixIcon",type:"smile"},slot:"suffixIcon"})],1),t._v(" "),s("br"),t._v(" "),s("a-range-picker",{on:{change:t.onChange}},[s("a-icon",{attrs:{slot:"suffixIcon",type:"smile"},slot:"suffixIcon"})],1),t._v(" "),s("br"),t._v(" "),s("a-week-picker",{attrs:{placeholder:"Select week"},on:{change:t.onChange}},[s("a-icon",{attrs:{slot:"suffixIcon",type:"smile"},slot:"suffixIcon"})],1),t._v(" "),s("br"),t._v(" "),s("a-date-picker",{attrs:{suffixIcon:"ab"},on:{change:t.onChange}}),t._v(" "),s("br"),t._v(" "),s("a-month-picker",{attrs:{suffixIcon:"ab",placeholder:"Select month"},on:{change:t.onChange}}),t._v(" "),s("br"),t._v(" "),s("a-range-picker",{attrs:{suffixIcon:"ab"},on:{change:t.onChange}}),t._v(" "),s("br"),t._v(" "),s("a-week-picker",{attrs:{suffixIcon:"ab",placeholder:"Select week"},on:{change:t.onChange}})],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"后缀图标"}},[t._v("后缀图标 "),s("a",{staticClass:"anchor",attrs:{href:"#后缀图标"}},[t._v("#")])]),t._v(" "),s("p",[t._v("最简单的用法，在浮层中可以选择或者输入日期。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Suffix"}},[t._v("Suffix "),s("a",{staticClass:"anchor",attrs:{href:"#Suffix"}},[t._v("#")])]),t._v(" "),s("p",[t._v("Basic use case. Users can select or input a date in panel.")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"suffixIcon"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"smile"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-month-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select month"')]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"suffixIcon"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"smile"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-month-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"suffixIcon"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"smile"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-week-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select week"')]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"suffixIcon"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"smile"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-week-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("suffixIcon")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"ab"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-month-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("suffixIcon")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"ab"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select month"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("suffixIcon")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"ab"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-week-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("suffixIcon")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"ab"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select week"')]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"vbscript"},[t._v("\n export "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n methods: {\n onChange("),s("span",{staticClass:"hljs-built_in"},[t._v("date")]),t._v(", dateString) {\n console."),s("span",{staticClass:"hljs-built_in"},[t._v("log")]),t._v("("),s("span",{staticClass:"hljs-built_in"},[t._v("date")]),t._v(", dateString);\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};G._withStripped=!0;var K={methods:{onChange:function(t,a){console.log(t,a)}}},Q=Object(l.a)(K,G,[],!1,null,null,null);Q.options.__file="components/date-picker/demo/suffix.md";var X=Q.exports,Z=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[[s("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-date-picker placeholder="Select Time" v-model="time1" @change="onChange" @ok="onOk">\n <span>{{time1?time1:\'SelectTime\'}}</span>\n </a-date-picker>\n <br/>\n <a-range-picker v-model="time2">\n <span>\n {{time2?time2:\'请选择\'}}\n </span>\n </a-range-picker>\n </div>\n',script:"\n import moment from 'moment';\n export default {\n data() {\n return {\n time1: undefined,\n time2: undefined,\n };\n },\n methods: {\n onChange(value, dateString) {\n console.log('Selected Time: ', value);\n console.log('Formatted Selected Time: ', dateString);\n },\n onOk(value) {\n console.log('onOk: ', value);\n },\n clearTime() {\n this.time1 = undefined;\n },\n },\n };\n",style:null,us:"\n#### Custum Time\nAdded custom rendering function, in the default `slot', you can set any component you want to render..\n",cn:"\n#### 自定义渲染\n增加自定义渲染功能，在默认 `slot` 中，你可以设置任何你想渲染的组件。\n",sourceCode:"<template>\n <div>\n <a-date-picker placeholder=\"Select Time\" v-model=\"time1\" @change=\"onChange\" @ok=\"onOk\">\n <span>{{time1?time1:'SelectTime'}}</span>\n </a-date-picker>\n <br />\n <a-range-picker v-model=\"time2\">\n <span>\n {{time2?time2:'请选择'}}\n </span>\n </a-range-picker>\n </div>\n</template>\n<script>\n import moment from 'moment';\n export default {\n data() {\n return {\n time1: undefined,\n time2: undefined,\n };\n },\n methods: {\n onChange(value, dateString) {\n console.log('Selected Time: ', value);\n console.log('Formatted Selected Time: ', dateString);\n },\n onOk(value) {\n console.log('onOk: ', value);\n },\n clearTime() {\n this.time1 = undefined;\n },\n },\n };\n<\/script>\n"}}},[s("template",{slot:"component"},[s("div",[s("a-date-picker",{attrs:{placeholder:"Select Time"},on:{change:t.onChange,ok:t.onOk},model:{value:t.time1,callback:function(a){t.time1=a},expression:"time1"}},[s("span",[t._v(t._s(t.time1?t.time1:"SelectTime"))])]),t._v(" "),s("br"),t._v(" "),s("a-range-picker",{model:{value:t.time2,callback:function(a){t.time2=a},expression:"time2"}},[s("span",[t._v("\n "+t._s(t.time2?t.time2:"请选择")+"\n ")])])],1)]),t._v(" "),s("template",{slot:"description"},[s("h4",{attrs:{id:"自定义渲染"}},[t._v("自定义渲染 "),s("a",{staticClass:"anchor",attrs:{href:"#自定义渲染"}},[t._v("#")])]),t._v(" "),s("p",[t._v("增加自定义渲染功能，在默认 "),s("code",[t._v("slot")]),t._v(" 中，你可以设置任何你想渲染的组件。")])]),t._v(" "),s("template",{slot:"us-description"},[s("h4",{attrs:{id:"Custum-Time"}},[t._v("Custum Time "),s("a",{staticClass:"anchor",attrs:{href:"#Custum-Time"}},[t._v("#")])]),t._v(" "),s("p",[t._v("Added custom rendering function, in the default `slot', you can set any component you want to render..")])]),t._v(" "),s("template",{slot:"code"},[s("pre",[s("code",{staticClass:"language-html"},[s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("placeholder")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"Select Time"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("v-model")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"time1"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("@ok")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"onOk"')]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),s("span",[t._v("{{")]),t._v("time1?time1:'SelectTime'"),s("span",[t._v("}}")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-date-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("br")]),t._v(" />")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(" "),s("span",{staticClass:"hljs-attr"},[t._v("v-model")]),t._v("="),s("span",{staticClass:"hljs-string"},[t._v('"time2"')]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",[t._v("{{")]),t._v("time2?time2:'请选择'"),s("span",[t._v("}}")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("a-range-picker")]),t._v(">")]),t._v("\n "),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),s("span",{staticClass:"hljs-tag"},[t._v("<"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),s("span",{staticClass:"javascript"},[t._v("\n "),s("span",{staticClass:"hljs-keyword"},[t._v("import")]),t._v(" moment "),s("span",{staticClass:"hljs-keyword"},[t._v("from")]),t._v(" "),s("span",{staticClass:"hljs-string"},[t._v("'moment'")]),t._v(";\n "),s("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),s("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),s("span",{staticClass:"hljs-attr"},[t._v("time1")]),t._v(": "),s("span",{staticClass:"hljs-literal"},[t._v("undefined")]),t._v(",\n "),s("span",{staticClass:"hljs-attr"},[t._v("time2")]),t._v(": "),s("span",{staticClass:"hljs-literal"},[t._v("undefined")]),t._v(",\n };\n },\n "),s("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onChange(value, dateString) {\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),s("span",{staticClass:"hljs-string"},[t._v("'Selected Time: '")]),t._v(", value);\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),s("span",{staticClass:"hljs-string"},[t._v("'Formatted Selected Time: '")]),t._v(", dateString);\n },\n onOk(value) {\n "),s("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),s("span",{staticClass:"hljs-string"},[t._v("'onOk: '")]),t._v(", value);\n },\n clearTime() {\n "),s("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".time1 = "),s("span",{staticClass:"hljs-literal"},[t._v("undefined")]),t._v(";\n },\n },\n };\n")]),s("span",{staticClass:"hljs-tag"},[t._v("</"),s("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};Z._withStripped=!0;var tt={data:function(){return{time1:void 0,time2:void 0}},methods:{onChange:function(t,a){console.log("Selected Time: ",t),console.log("Formatted Selected Time: ",a)},onOk:function(t){console.log("onOk: ",t)},clearTime:function(){this.time1=void 0}}},at=Object(l.a)(tt,Z,[],!1,null,null,null);at.options.__file="components/date-picker/demo/text.md";var st=at.exports,et=function(){var t=this.$createElement;this._self._c;return this._m(0)};et._withStripped=!0;var nt=Object(l.a)({},et,[function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[s("h2",{attrs:{id:"API"}},[t._v("API "),s("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),s("p",[t._v("日期类组件包括以下四种形式。")]),t._v(" "),s("ul",[s("li",[t._v("DatePicker")]),t._v(" "),s("li",[t._v("MonthPicker")]),t._v(" "),s("li",[t._v("RangePicker")]),t._v(" "),s("li",[t._v("WeekPicker")])]),t._v(" "),s("p",[t._v("**注意：**DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。")]),t._v(" "),s("pre",{pre:!0},[s("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[t._v("// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import moment from\n'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn');\n\n"),s("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("a-date-picker")]),t._v(" "),s("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":defaultValue")]),t._v("="),s("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("\"moment('2015-01-01', 'YYYY-MM-DD')\"")]),t._v(" />")]),t._v("\n")])]),t._v(" "),s("h3",{attrs:{id:"共同的-API"}},[t._v("共同的 API "),s("a",{staticClass:"anchor",attrs:{href:"#共同的-API"}},[t._v("#")])]),t._v(" "),s("p",[t._v("以下 API 为 DatePicker、MonthPicker、RangePicker, WeekPicker 共享的 API。")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("默认值")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("allowClear")]),t._v(" "),s("td",[t._v("是否显示清除按钮")]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("true")])]),t._v(" "),s("tr",[s("td",[t._v("autoFocus")]),t._v(" "),s("td",[t._v("自动获取焦点")]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("false")])]),t._v(" "),s("tr",[s("td",[t._v("dateRender")]),t._v(" "),s("td",[t._v("作用域插槽，自定义日期单元格的内容")]),t._v(" "),s("td",[t._v('slot="dateRender" slot-scope="current, today"')]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("disabled")]),t._v(" "),s("td",[t._v("禁用")]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("false")])]),t._v(" "),s("tr",[s("td",[t._v("disabledDate")]),t._v(" "),s("td",[t._v("不可选择的日期")]),t._v(" "),s("td",[t._v("(currentDate: moment) => boolean")]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("getCalendarContainer")]),t._v(" "),s("td",[t._v("定义浮层的容器，默认为 body 上新建 div")]),t._v(" "),s("td",[t._v("function(trigger)")]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("locale")]),t._v(" "),s("td",[t._v("国际化配置")]),t._v(" "),s("td",[t._v("object")]),t._v(" "),s("td",[s("a",{attrs:{href:"https://github.com/vueComponent/ant-design-vue/blob/master/components/date-picker/locale/example.json"}},[t._v("默认配置")])])]),t._v(" "),s("tr",[s("td",[t._v("open")]),t._v(" "),s("td",[t._v("控制弹层是否展开")]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("placeholder")]),t._v(" "),s("td",[t._v("输入框提示文字")]),t._v(" "),s("td",[t._v("string|RangePicker[]")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("popupStyle")]),t._v(" "),s("td",[t._v("额外的弹出日历样式")]),t._v(" "),s("td",[t._v("object")]),t._v(" "),s("td",[t._v("{}")])]),t._v(" "),s("tr",[s("td",[t._v("dropdownClassName")]),t._v(" "),s("td",[t._v("额外的弹出日历 className")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("size")]),t._v(" "),s("td",[t._v("输入框大小，"),s("code",{pre:!0},[t._v("large")]),t._v(" 高度为 40px，"),s("code",{pre:!0},[t._v("small")]),t._v(" 为 24px，默认是 32px")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("suffixIcon")]),t._v(" "),s("td",[t._v("自定义的选择框后缀图标")]),t._v(" "),s("td",[t._v("VNode | slot")]),t._v(" "),s("td",[t._v("-")])])])]),t._v(" "),s("h3",{attrs:{id:"共有的事件"}},[t._v("共有的事件 "),s("a",{staticClass:"anchor",attrs:{href:"#共有的事件"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("事件名称")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("回调参数")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("openChange")]),t._v(" "),s("td",[t._v("弹出日历和关闭日历的回调")]),t._v(" "),s("td",[t._v("function(status)")])]),t._v(" "),s("tr",[s("td",[t._v("panelChange")]),t._v(" "),s("td",[t._v("日期面板变化时的回调")]),t._v(" "),s("td",[t._v("function(value, mode)")])])])]),t._v(" "),s("h3",{attrs:{id:"共同的方法"}},[t._v("共同的方法 "),s("a",{staticClass:"anchor",attrs:{href:"#共同的方法"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("名称")]),t._v(" "),s("th",[t._v("描述")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("blur()")]),t._v(" "),s("td",[t._v("移除焦点")])]),t._v(" "),s("tr",[s("td",[t._v("focus()")]),t._v(" "),s("td",[t._v("获取焦点")])])])]),t._v(" "),s("h3",{attrs:{id:"DatePicker"}},[t._v("DatePicker "),s("a",{staticClass:"anchor",attrs:{href:"#DatePicker"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("默认值")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("defaultValue")]),t._v(" "),s("td",[t._v("默认日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("defaultPickerValue")]),t._v(" "),s("td",[t._v("默认面板日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("disabledTime")]),t._v(" "),s("td",[t._v("不可选择的时间")]),t._v(" "),s("td",[t._v("function(date)")]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("format")]),t._v(" "),s("td",[t._v("设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment.js")])]),t._v(" "),s("td",[t._v("string | string[]")]),t._v(" "),s("td",[t._v('"YYYY-MM-DD"')])]),t._v(" "),s("tr",[s("td",[t._v("mode")]),t._v(" "),s("td",[t._v("日期面板的状态（"),s("a",{attrs:{href:"/docs/vue/faq#%E5%BD%93%E6%88%91%E6%8C%87%E5%AE%9A%E4%BA%86-DatePicker/RangePicker-%E7%9A%84-mode-%E5%B1%9E%E6%80%A7%E5%90%8E%EF%BC%8C%E7%82%B9%E5%87%BB%E5%90%8E%E6%97%A0%E6%B3%95%E9%80%89%E6%8B%A9%E5%B9%B4%E4%BB%BD/%E6%9C%88%E4%BB%BD%EF%BC%9F"}},[t._v("设置后无法选择年份/月份？")]),t._v("）")]),t._v(" "),s("td",[s("code",{pre:!0},[t._v("time|date|month|year")])]),t._v(" "),s("td",[t._v("'date'")])]),t._v(" "),s("tr",[s("td",[t._v("renderExtraFooter")]),t._v(" "),s("td",[t._v("在面板中添加额外的页脚")]),t._v(" "),s("td",[t._v('slot="renderExtraFooter" slot-scope="mode"')]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("showTime")]),t._v(" "),s("td",[t._v("增加时间选择功能")]),t._v(" "),s("td",[t._v("Object|boolean")]),t._v(" "),s("td",[s("a",{attrs:{href:"/components/time-picker-cn/#API"}},[t._v("TimePicker Options")])])]),t._v(" "),s("tr",[s("td",[t._v("showTime.defaultValue")]),t._v(" "),s("td",[t._v("设置用户选择日期时默认的时分秒")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("moment()")])]),t._v(" "),s("tr",[s("td",[t._v("showToday")]),t._v(" "),s("td",[t._v("是否展示“今天”按钮")]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("true")])]),t._v(" "),s("tr",[s("td",[t._v("value(v-model)")]),t._v(" "),s("td",[t._v("日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("无")])])])]),t._v(" "),s("h3",{attrs:{id:"DatePicker-事件"}},[t._v("DatePicker 事件 "),s("a",{staticClass:"anchor",attrs:{href:"#DatePicker-事件"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("事件名称")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("回调参数")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("change")]),t._v(" "),s("td",[t._v("时间发生变化的回调")]),t._v(" "),s("td",[t._v("function(date: moment, dateString: string)")])]),t._v(" "),s("tr",[s("td",[t._v("ok")]),t._v(" "),s("td",[t._v("点击确定按钮的回调")]),t._v(" "),s("td",[t._v("function()")])])])]),t._v(" "),s("h3",{attrs:{id:"MonthPicker"}},[t._v("MonthPicker "),s("a",{staticClass:"anchor",attrs:{href:"#MonthPicker"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("默认值")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("defaultValue")]),t._v(" "),s("td",[t._v("默认日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("defaultPickerValue")]),t._v(" "),s("td",[t._v("默认面板日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("format")]),t._v(" "),s("td",[t._v("展示的日期格式，配置参考 "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment.js")])]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v('"YYYY-MM"')])]),t._v(" "),s("tr",[s("td",[t._v("monthCellContentRender")]),t._v(" "),s("td",[t._v("自定义的月份内容渲染方法")]),t._v(" "),s("td",[t._v('slot="monthCellContentRender" slot-scope="date, locale"')]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("renderExtraFooter")]),t._v(" "),s("td",[t._v("在面板中添加额外的页脚")]),t._v(" "),s("td",[t._v('slot="renderExtraFooter" slot-scope="mode"')]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("value(v-model)")]),t._v(" "),s("td",[t._v("日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("无")])])])]),t._v(" "),s("h3",{attrs:{id:"MonthPicker-事件"}},[t._v("MonthPicker 事件 "),s("a",{staticClass:"anchor",attrs:{href:"#MonthPicker-事件"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("事件名称")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("回调参数")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("change")]),t._v(" "),s("td",[t._v("时间发生变化的回调，发生在用户选择时间时")]),t._v(" "),s("td",[t._v("function(date: moment, dateString: string)")])])])]),t._v(" "),s("h3",{attrs:{id:"WeekPicker"}},[t._v("WeekPicker "),s("a",{staticClass:"anchor",attrs:{href:"#WeekPicker"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("默认值")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("defaultValue")]),t._v(" "),s("td",[t._v("默认日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("defaultPickerValue")]),t._v(" "),s("td",[t._v("默认面板日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("format")]),t._v(" "),s("td",[t._v("展示的日期格式，配置参考 "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment.js")])]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v('"YYYY-wo"')])]),t._v(" "),s("tr",[s("td",[t._v("value(v-model)")]),t._v(" "),s("td",[t._v("日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("renderExtraFooter")]),t._v(" "),s("td",[t._v("在面板中添加额外的页脚")]),t._v(" "),s("td",[t._v('slot="renderExtraFooter" slot-scope="mode"')]),t._v(" "),s("td",[t._v("-")])])])]),t._v(" "),s("h3",{attrs:{id:"WeekPicker-事件"}},[t._v("WeekPicker 事件 "),s("a",{staticClass:"anchor",attrs:{href:"#WeekPicker-事件"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("事件名称")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("回调参数")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("change")]),t._v(" "),s("td",[t._v("时间发生变化的回调，发生在用户选择时间时")]),t._v(" "),s("td",[t._v("function(date: moment, dateString: string)")])])])]),t._v(" "),s("h3",{attrs:{id:"RangePicker"}},[t._v("RangePicker "),s("a",{staticClass:"anchor",attrs:{href:"#RangePicker"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("参数")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("默认值")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("defaultValue")]),t._v(" "),s("td",[t._v("默认日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[]")]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("defaultPickerValue")]),t._v(" "),s("td",[t._v("默认面板日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[]")]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("disabledTime")]),t._v(" "),s("td",[t._v("不可选择的时间")]),t._v(" "),s("td",[t._v("function(dates: [moment, moment], partial: "),s("code",{pre:!0},[t._v("'start'|'end'")]),t._v(")")]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("format")]),t._v(" "),s("td",[t._v("展示的日期格式")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v('"YYYY-MM-DD HH:mm:ss"')])]),t._v(" "),s("tr",[s("td",[t._v("ranges")]),t._v(" "),s("td",[t._v("预设时间范围快捷选择")]),t._v(" "),s("td",[t._v("{ [range: string]: "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[] } | { [range: string]: () => "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[] }")]),t._v(" "),s("td",[t._v("无")])]),t._v(" "),s("tr",[s("td",[t._v("renderExtraFooter")]),t._v(" "),s("td",[t._v("在面板中添加额外的页脚")]),t._v(" "),s("td",[t._v('slot="renderExtraFooter" slot-scope="mode"')]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("showTime")]),t._v(" "),s("td",[t._v("增加时间选择功能")]),t._v(" "),s("td",[t._v("Object|boolean")]),t._v(" "),s("td",[s("a",{attrs:{href:"/components/time-picker-cn/#API"}},[t._v("TimePicker Options")])])]),t._v(" "),s("tr",[s("td",[t._v("showTime.defaultValue")]),t._v(" "),s("td",[t._v("设置用户选择日期时默认的时分秒")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[]")]),t._v(" "),s("td",[t._v("[moment(), moment()]")])]),t._v(" "),s("tr",[s("td",[t._v("value(v-model)")]),t._v(" "),s("td",[t._v("日期")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[]")]),t._v(" "),s("td",[t._v("无")])])])]),t._v(" "),s("h3",{attrs:{id:"RangePicker-事件"}},[t._v("RangePicker 事件 "),s("a",{staticClass:"anchor",attrs:{href:"#RangePicker-事件"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("事件名称")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("回调参数")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("calendarChange")]),t._v(" "),s("td",[t._v("待选日期发生变化的回调")]),t._v(" "),s("td",[t._v("function(dates: [moment, moment], dateStrings: [string, string])")])]),t._v(" "),s("tr",[s("td",[t._v("change")]),t._v(" "),s("td",[t._v("日期范围发生变化的回调")]),t._v(" "),s("td",[t._v("function(dates: [moment, moment], dateStrings: [string, string])")])]),t._v(" "),s("tr",[s("td",[t._v("ok")]),t._v(" "),s("td",[t._v("点击确定按钮的回调")]),t._v(" "),s("td",[t._v("function(dates: "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[])")])])])])])}],!1,null,null,null);nt.options.__file="components/date-picker/index.zh-CN.md";var lt=nt.exports,vt=function(){var t=this.$createElement;this._self._c;return this._m(0)};vt._withStripped=!0;var _t=Object(l.a)({},vt,[function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",[s("h2",{attrs:{id:"API"}},[t._v("API "),s("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),s("p",[t._v("There are four kinds of picker:")]),t._v(" "),s("ul",[s("li",[t._v("DatePicker")]),t._v(" "),s("li",[t._v("MonthPicker")]),t._v(" "),s("li",[t._v("RangePicker")]),t._v(" "),s("li",[t._v("WeekPicker")])]),t._v(" "),s("p",[s("strong",[t._v("Note:")]),t._v(" Part of locale of DatePicker, MonthPicker, RangePicker, WeekPicker is read from value. So, please set the locale of moment correctly.")]),t._v(" "),s("pre",{pre:!0},[s("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[t._v("// The default locale is en-US, if you want to use other locale, just set locale in entry file\nglobally. // import moment from 'moment'; // import 'moment/locale/zh-cn'; //\nmoment.locale('zh-cn');\n\n"),s("span",{pre:!0,attrs:{class:"hljs-tag"}},[t._v("<"),s("span",{pre:!0,attrs:{class:"hljs-name"}},[t._v("a-date-picker")]),t._v(" "),s("span",{pre:!0,attrs:{class:"hljs-attr"}},[t._v(":defaultValue")]),t._v("="),s("span",{pre:!0,attrs:{class:"hljs-string"}},[t._v("\"moment('2015-01-01', 'YYYY-MM-DD')\"")]),t._v(" />")]),t._v("\n")])]),t._v(" "),s("h3",{attrs:{id:"Common-API"}},[t._v("Common API "),s("a",{staticClass:"anchor",attrs:{href:"#Common-API"}},[t._v("#")])]),t._v(" "),s("p",[t._v("The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicker.")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Property")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Type")]),t._v(" "),s("th",[t._v("Default")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("allowClear")]),t._v(" "),s("td",[t._v("Whether to show clear button")]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("true")])]),t._v(" "),s("tr",[s("td",[t._v("autoFocus")]),t._v(" "),s("td",[t._v("get focus when component mounted")]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("false")])]),t._v(" "),s("tr",[s("td",[t._v("dateRender")]),t._v(" "),s("td",[t._v("custom rendering function for date cells by setting a scoped slot")]),t._v(" "),s("td",[t._v('slot="dateRender" slot-scope="current, today"')]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("disabled")]),t._v(" "),s("td",[t._v("determine whether the DatePicker is disabled")]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("false")])]),t._v(" "),s("tr",[s("td",[t._v("disabledDate")]),t._v(" "),s("td",[t._v("specify the date that cannot be selected")]),t._v(" "),s("td",[t._v("(currentDate: moment) => boolean")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("getCalendarContainer")]),t._v(" "),s("td",[t._v("to set the container of the floating layer, while the default is to create a "),s("code",{pre:!0},[t._v("div")]),t._v(" element in "),s("code",{pre:!0},[t._v("body")])]),t._v(" "),s("td",[t._v("function(trigger)")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("locale")]),t._v(" "),s("td",[t._v("localization configuration")]),t._v(" "),s("td",[t._v("object")]),t._v(" "),s("td",[s("a",{attrs:{href:"https://github.com/vueComponent/ant-design-vue/blob/master/components/date-picker/locale/example.json"}},[t._v("default")])])]),t._v(" "),s("tr",[s("td",[t._v("mode")]),t._v(" "),s("td",[t._v("picker panel mode（"),s("a",{attrs:{href:"/docs/vue/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?"}},[t._v("Cannot select year or month anymore?")])]),t._v(" "),s("td",[s("code",{pre:!0},[t._v("time|date|month|year")])]),t._v(" "),s("td",[t._v("'date'")])]),t._v(" "),s("tr",[s("td",[t._v("open")]),t._v(" "),s("td",[t._v("open state of picker")]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("placeholder")]),t._v(" "),s("td",[t._v("placeholder of date input")]),t._v(" "),s("td",[t._v("string|RangePicker[]")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("popupStyle")]),t._v(" "),s("td",[t._v("to customize the style of the popup calendar")]),t._v(" "),s("td",[t._v("object")]),t._v(" "),s("td",[t._v("{}")])]),t._v(" "),s("tr",[s("td",[t._v("dropdownClassName")]),t._v(" "),s("td",[t._v("to customize the className of the popup calendar")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("size")]),t._v(" "),s("td",[t._v("determine the size of the input box, the height of "),s("code",{pre:!0},[t._v("large")]),t._v(" and "),s("code",{pre:!0},[t._v("small")]),t._v(", are 40px and 24px respectively, while default size is 32px")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("suffixIcon")]),t._v(" "),s("td",[t._v("The custom suffix icon")]),t._v(" "),s("td",[t._v("VNode | slot")]),t._v(" "),s("td",[t._v("-")])])])]),t._v(" "),s("h3",{attrs:{id:"Common-Events"}},[t._v("Common Events "),s("a",{staticClass:"anchor",attrs:{href:"#Common-Events"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Events Name")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Arguments")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("openChange")]),t._v(" "),s("td",[t._v("a callback function, can be executed whether the popup calendar is popped up or closed")]),t._v(" "),s("td",[t._v("function(status)")])]),t._v(" "),s("tr",[s("td",[t._v("panelChange")]),t._v(" "),s("td",[t._v("callback when picker panel mode is changed")]),t._v(" "),s("td",[t._v("function(value, mode)")])])])]),t._v(" "),s("h3",{attrs:{id:"Common-Methods"}},[t._v("Common Methods "),s("a",{staticClass:"anchor",attrs:{href:"#Common-Methods"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Name")]),t._v(" "),s("th",[t._v("Description")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("blur()")]),t._v(" "),s("td",[t._v("remove focus")])]),t._v(" "),s("tr",[s("td",[t._v("focus()")]),t._v(" "),s("td",[t._v("get focus")])])])]),t._v(" "),s("h3",{attrs:{id:"DatePicker"}},[t._v("DatePicker "),s("a",{staticClass:"anchor",attrs:{href:"#DatePicker"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Property")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Type")]),t._v(" "),s("th",[t._v("Default")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("defaultValue")]),t._v(" "),s("td",[t._v("to set default date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("defaultPickerValue")]),t._v(" "),s("td",[t._v("to set default picker date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("disabledTime")]),t._v(" "),s("td",[t._v("to specify the time that cannot be selected")]),t._v(" "),s("td",[t._v("function(date)")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("format")]),t._v(" "),s("td",[t._v("to set the date format, refer to "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment.js")])]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v('"YYYY-MM-DD"')])]),t._v(" "),s("tr",[s("td",[t._v("renderExtraFooter")]),t._v(" "),s("td",[t._v("render extra footer in panel by setting a scoped slot")]),t._v(" "),s("td",[t._v('slot="renderExtraFooter" slot-scope="mode"')]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("showTime")]),t._v(" "),s("td",[t._v("to provide an additional time selection")]),t._v(" "),s("td",[t._v("object|boolean")]),t._v(" "),s("td",[s("a",{attrs:{href:"/components/time-picker/#API"}},[t._v("TimePicker Options")])])]),t._v(" "),s("tr",[s("td",[t._v("showTime.defaultValue")]),t._v(" "),s("td",[t._v("to set default time of selected date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("moment()")])]),t._v(" "),s("tr",[s("td",[t._v("showToday")]),t._v(" "),s("td",[t._v('whether to show "Today" button')]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("true")])]),t._v(" "),s("tr",[s("td",[t._v("value(v-model)")]),t._v(" "),s("td",[t._v("to set date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("-")])])])]),t._v(" "),s("h3",{attrs:{id:"DatePicker-Events"}},[t._v("DatePicker Events "),s("a",{staticClass:"anchor",attrs:{href:"#DatePicker-Events"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Events Name")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Arguments")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("calendarChange")]),t._v(" "),s("td",[t._v("a callback function, can be executed when the start time or the end time of the range is changing")]),t._v(" "),s("td",[t._v("function(dates: [moment, moment], dateStrings: [string, string])")])]),t._v(" "),s("tr",[s("td",[t._v("change")]),t._v(" "),s("td",[t._v("a callback function, can be executed when the selected time is changing")]),t._v(" "),s("td",[t._v("function(date: moment, dateString: string)")])]),t._v(" "),s("tr",[s("td",[t._v("ok")]),t._v(" "),s("td",[t._v("callback when click ok button")]),t._v(" "),s("td",[t._v("function()")])])])]),t._v(" "),s("h3",{attrs:{id:"MonthPicker"}},[t._v("MonthPicker "),s("a",{staticClass:"anchor",attrs:{href:"#MonthPicker"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Property")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Type")]),t._v(" "),s("th",[t._v("Default")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("defaultValue")]),t._v(" "),s("td",[t._v("to set default date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("defaultPickerValue")]),t._v(" "),s("td",[t._v("to set default picker date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("format")]),t._v(" "),s("td",[t._v("to set the date format. When an array is provided, all values are used for parsing and first value for display. refer to "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment.js")])]),t._v(" "),s("td",[t._v("string | string[]")]),t._v(" "),s("td",[t._v('"YYYY-MM"')])]),t._v(" "),s("tr",[s("td",[t._v("monthCellContentRender")]),t._v(" "),s("td",[t._v("Custom month cell content render method by setting a scoped slot")]),t._v(" "),s("td",[t._v('slot="monthCellContentRender" slot-scope="date, locale"')]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("renderExtraFooter")]),t._v(" "),s("td",[t._v("render extra footer in panel by setting a scoped slot")]),t._v(" "),s("td",[t._v('slot="renderExtraFooter" slot-scope="mode"')]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("value(v-model)")]),t._v(" "),s("td",[t._v("to set date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("-")])])])]),t._v(" "),s("h3",{attrs:{id:"MonthPicker-Events"}},[t._v("MonthPicker Events "),s("a",{staticClass:"anchor",attrs:{href:"#MonthPicker-Events"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Events Name")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Arguments")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("change")]),t._v(" "),s("td",[t._v("a callback function, can be executed when the selected time is changing")]),t._v(" "),s("td",[t._v("function(date: moment, dateString: string)")])])])]),t._v(" "),s("h3",{attrs:{id:"WeekPicker"}},[t._v("WeekPicker "),s("a",{staticClass:"anchor",attrs:{href:"#WeekPicker"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Property")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Type")]),t._v(" "),s("th",[t._v("Default")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("defaultValue")]),t._v(" "),s("td",[t._v("to set default date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("defaultPickerValue")]),t._v(" "),s("td",[t._v("to set default picker date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("format")]),t._v(" "),s("td",[t._v("to set the date format, refer to "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment.js")])]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v('"YYYY-wo"')])]),t._v(" "),s("tr",[s("td",[t._v("value(v-model)")]),t._v(" "),s("td",[t._v("to set date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")])]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("renderExtraFooter")]),t._v(" "),s("td",[t._v("render extra footer in panel by setting a scoped slot")]),t._v(" "),s("td",[t._v('slot="renderExtraFooter" slot-scope="mode"')]),t._v(" "),s("td",[t._v("-")])])])]),t._v(" "),s("h3",{attrs:{id:"WeekPicker-Events"}},[t._v("WeekPicker Events "),s("a",{staticClass:"anchor",attrs:{href:"#WeekPicker-Events"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Events Name")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Arguments")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("change")]),t._v(" "),s("td",[t._v("a callback function, can be executed when the selected time is changing")]),t._v(" "),s("td",[t._v("function(date: moment, dateString: string)")])])])]),t._v(" "),s("h3",{attrs:{id:"RangePicker"}},[t._v("RangePicker "),s("a",{staticClass:"anchor",attrs:{href:"#RangePicker"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Property")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Type")]),t._v(" "),s("th",[t._v("Default")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("defaultValue")]),t._v(" "),s("td",[t._v("to set default date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[]")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("defaultPickerValue")]),t._v(" "),s("td",[t._v("to set default picker date")]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[]")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("disabledTime")]),t._v(" "),s("td",[t._v("to specify the time that cannot be selected")]),t._v(" "),s("td",[t._v("function(dates: [moment, moment], partial: "),s("code",{pre:!0},[t._v("'start'|'end'")]),t._v(")")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("format")]),t._v(" "),s("td",[t._v("to set the date format")]),t._v(" "),s("td",[t._v("string")]),t._v(" "),s("td",[t._v('"YYYY-MM-DD HH:mm:ss"')])]),t._v(" "),s("tr",[s("td",[t._v("ranges")]),t._v(" "),s("td",[t._v("preseted ranges for quick selection")]),t._v(" "),s("td",[t._v("{ [range: string]: "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[] } | { [range: string]: () => "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[] }")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("renderExtraFooter")]),t._v(" "),s("td",[t._v("render extra footer in panel by setting a scoped slot")]),t._v(" "),s("td",[t._v('slot="renderExtraFooter" slot-scope="mode"')]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("showTime")]),t._v(" "),s("td",[t._v("to provide an additional time selection")]),t._v(" "),s("td",[t._v("object|boolean")]),t._v(" "),s("td",[s("a",{attrs:{href:"/components/time-picker/#API"}},[t._v("TimePicker Options")])])]),t._v(" "),s("tr",[s("td",[t._v("showTime.defaultValue")]),t._v(" "),s("td",[t._v("to set default time of selected date, "),s("a",{attrs:{href:"https://antdv.com/components/date-picker/#components-date-picker-demo-disabled-date"}},[t._v("demo")])]),t._v(" "),s("td",[s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[]")]),t._v(" "),s("td",[t._v("[moment(), moment()]")])]),t._v(" "),s("tr",[s("td",[t._v("value(v-model)")]),t._v(" "),s("td",[t._v("to set date")]),t._v(" "),s("td",[t._v("["),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v(", "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("]")]),t._v(" "),s("td",[t._v("-")])])])]),t._v(" "),s("h3",{attrs:{id:"RangePicker-Events"}},[t._v("RangePicker Events "),s("a",{staticClass:"anchor",attrs:{href:"#RangePicker-Events"}},[t._v("#")])]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("Events Name")]),t._v(" "),s("th",[t._v("Description")]),t._v(" "),s("th",[t._v("Arguments")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("calendarChange")]),t._v(" "),s("td",[t._v("a callback function, can be executed when the start time or the end time of the range is changing")]),t._v(" "),s("td",[t._v("function(dates: [moment, moment], dateStrings: [string, string])")])]),t._v(" "),s("tr",[s("td",[t._v("change")]),t._v(" "),s("td",[t._v("a callback function, can be executed when the selected time is changing")]),t._v(" "),s("td",[t._v("function(dates: [moment, moment], dateStrings: [string, string])")])]),t._v(" "),s("tr",[s("td",[t._v("ok")]),t._v(" "),s("td",[t._v("callback when click ok button")]),t._v(" "),s("td",[t._v("function(dates: "),s("a",{attrs:{href:"http://momentjs.com/"}},[t._v("moment")]),t._v("[])")])])])])])}],!1,null,null,null);_t.options.__file="components/date-picker/index.en-US.md";var rt=_t.exports,it="# DatePicker 日期选择框\n 输入或选择日期的控件。\n## 何时使用\n当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。\n ## 代码演示",ot="# DatePicker\n To select or input a date.\n## When To Use\nBy clicking the input box, you can select a date from a popup calendar.\n## Examples\n ",ct={category:"Components",type:"Data Entry",zhType:"数据录入",title:"DatePicker",subtitle:"日期选择框",render:function(){var t=arguments[0];return t("div",{attrs:{id:"components-date-picker-demo"}},[t("md",{attrs:{cn:it,us:ot}}),t(_),t(c),t(u),t(k),t(w),t(S),t(V),t(H),t(W),t(N),t(J),t(st),t(X),t("api",[t(lt,{slot:"cn"}),t(rt)])])}},dt=(s(1332),Object(l.a)(ct,void 0,void 0,!1,null,null,null));dt.options.__file="components/date-picker/demo/index.vue";a.default=dt.exports}}]); |