webpackJsonp([83],{"63Ju":function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"DatePicker"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-DatePicker-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" DatePicker")]),s._v(" "),s._m(0),s._v(" "),a("p",[s._v("DatePicker can be used to choose date, which has flexible configuration for time granularity, such as year - month - date, hour - minute - second, year - month - date - hour - minute - second, year - month, etc.")]),s._v(" "),s._m(1),s._v(" "),a("h3",{attrs:{id:"Example"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Example-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Example")]),s._v(" "),s._m(2),s._v(" "),a("h3",{attrs:{id:"Propsconfiguration"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Propsconfiguration-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Props configuration")]),s._v(" "),s._m(3),s._v(" "),s._m(4),s._v(" "),s._m(5),s._v(" "),a("h3",{attrs:{id:"Events"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Events-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Events")]),s._v(" "),s._m(6),s._v(" "),a("h3",{attrs:{id:"Methods"}},[a("a",{staticClass:"anchor",attrs:{href:"#cube-Methods-anchor","aria-hidden":"true"}},[a("svg",{attrs:{"aria-hidden":"true",height:"16",version:"1.1",viewBox:"0 0 16 16",width:"16"}},[a("path",{attrs:{"fill-rule":"evenodd",d:"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"}})])]),s._v(" Methods")]),s._v(" "),s._m(7)])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("blockquote",[a("p",[s._v("New in 1.7.0+")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("strong",[s._v("Notice:")]),s._v(" Cause this component used create-api, so you should read "),a("a",{attrs:{href:"#/en-US/docs/create-api"}},[s._v("create-api")]),s._v(" first.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("p",[s._v("Basic usage")]),s._v(" "),a("p",[s._v("You can create a component instance by "),a("code",{pre:!0},[s._v("$createDatePicker")]),s._v(", and configure "),a("code",{pre:!0},[s._v("min")]),s._v(", "),a("code",{pre:!0},[s._v("max")]),s._v(" to set the selected date range. the "),a("code",{pre:!0},[s._v("value")]),s._v(" could use to set the current selected date.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showDatePicker"')]),s._v(">")]),s._v("Date Picker"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showDatePicker() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".datePicker) {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".datePicker = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDatePicker({\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Date Picker'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2008")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v("),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2020")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("20")]),s._v("),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("(),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandle,\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onCancel")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cancelHandle\n        })\n      }\n\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".datePicker.show()\n    },\n    selectHandle(date, selectedVal, selectedText) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Selected Item: <br/> - date: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${date}")]),s._v(" <br/> - value: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedVal.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("', '")]),s._v(")}")]),s._v(" <br/> - text: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedText.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("' '")]),s._v(")}")]),s._v("`")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n      }).show()\n    },\n    cancelHandle() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'correct'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Picker canceled'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n      }).show()\n    }\n  }\n}\n")])])]),s._v(" "),a("li",[a("p",[s._v("Column configuration")]),s._v(" "),a("p",[s._v("Though column configuration, "),a("code",{pre:!0},[s._v("DatePicker")]),s._v(" get the power of flexible time granularity. There are six columns in total: year, month, date, hour, minute and second. You can configure the starting column and the count of columns by "),a("code",{pre:!0},[s._v("startColumn")]),s._v(" and "),a("code",{pre:!0},[s._v("columnCount")]),s._v(', such as the default "year - month - date" picker is "three column" starting from "year", and "hour - minute - second" picker is the "three column" starting from "time".')]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showTimePicker"')]),s._v(">")]),s._v("Time Picker"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showTimePicker() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timePicker) {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timePicker = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDatePicker({\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Time Picker'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("],\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": ["),a("span",{attrs:{class:"hljs-number"}},[s._v("20")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("59")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("59")]),s._v("],\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("(),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("startColumn")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'hour'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandle,\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onCancel")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cancelHandle\n        })\n      }\n\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".timePicker.show()\n    },\n    selectHandle(date, selectedVal, selectedText) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Selected Item: <br/> - date: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${date}")]),s._v(" <br/> - value: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedVal.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("', '")]),s._v(")}")]),s._v(" <br/> - text: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedText.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("' '")]),s._v(")}")]),s._v("`")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n      }).show()\n    },\n    cancelHandle() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'correct'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Picker canceled'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n      }).show()\n    }\n  }\n}\n")])])]),s._v(" "),a("li",[a("p",[s._v("year-month-date-hour-minute-second")]),s._v(" "),a("p",[s._v('Similarly, if you want year-month-date-hour-minute-second picker, just "six columns" starting from "year"')]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showDateTimePicker"')]),s._v(">")]),s._v("Date Time Picker"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showDateTimePicker() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dateTimePicker) {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dateTimePicker = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDatePicker({\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Date Time Picker'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2008")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("0")]),s._v("),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2020")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("20")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("20")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("59")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("59")]),s._v("),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("(),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("columnCount")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("6")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandle,\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onCancel")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cancelHandle\n        })\n      }\n\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".dateTimePicker.show()\n    },\n    selectHandle(date, selectedVal, selectedText) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Selected Item: <br/> - date: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${date}")]),s._v(" <br/> - value: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedVal.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("', '")]),s._v(")}")]),s._v(" <br/> - text: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedText.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("' '")]),s._v(")}")]),s._v("`")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n      }).show()\n    },\n    cancelHandle() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'correct'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Picker canceled'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n      }).show()\n    }\n  }\n}\n")])])]),s._v(" "),a("li",[a("p",[s._v("Format")]),s._v(" "),a("p",[s._v("You can also configure the date format by the property "),a("code",{pre:!0},[s._v("format")]),s._v(".")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showFormatPicker"')]),s._v(">")]),s._v("Use format"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showFormatPicker() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".formatPicker) {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".formatPicker = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDatePicker({\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Use format'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2008")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v("),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2020")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("20")]),s._v("),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("(),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("format")]),s._v(": {\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("year")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'YY年'")]),s._v(",\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("month")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'MM月'")]),s._v(",\n            "),a("span",{attrs:{class:"hljs-attr"}},[s._v("date")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'第 D 日'")]),s._v("\n          },\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandle,\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onCancel")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cancelHandle\n        })\n      }\n\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".formatPicker.show()\n    },\n    selectHandle(date, selectedVal, selectedText) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Selected Item: <br/> - date: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${date}")]),s._v(" <br/> - value: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedVal.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("', '")]),s._v(")}")]),s._v(" <br/> - text: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedText.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("' '")]),s._v(")}")]),s._v("`")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n      }).show()\n    },\n    cancelHandle() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'correct'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Picker canceled'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n      }).show()\n    }\n  }\n}\n")])])]),s._v(" "),a("li",[a("p",[a("code",{pre:!0},[s._v("columnOrder")]),s._v(" "),a("sup",[s._v("1.12.14")])]),s._v(" "),a("p",[a("code",{pre:!0},[s._v("columnOrder")]),s._v(" can be used to change the display order in case where the order is not 'Year-Month-Date Hour-Minute-Second'. For example, we can set the "),a("code",{pre:!0},[s._v("columnOrder")]),s._v(" to "),a("code",{pre:!0},[s._v("['month', 'date', 'year']")]),s._v(" for the display order of 'Month-Date-Year'.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showChangeOrderPicker"')]),s._v(">")]),s._v("Date Picker(Change order)"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showChangeOrderPicker() {\n       "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".changeOrderPicker) {\n         "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".changeOrderPicker = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDatePicker({\n           "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Date Picker'")]),s._v(",\n           "),a("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2008")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v("),\n           "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2020")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("20")]),s._v("),\n           "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("(),\n           "),a("span",{attrs:{class:"hljs-attr"}},[s._v("columnOrder")]),s._v(": ["),a("span",{attrs:{class:"hljs-string"}},[s._v("'month'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'date'")]),s._v(", "),a("span",{attrs:{class:"hljs-string"}},[s._v("'year'")]),s._v("],\n           "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandle,\n           "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onCancel")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cancelHandle\n         })\n       }\n       "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".changeOrderPicker.show()\n     }\n  }\n}\n")])])]),s._v(" "),a("li",[a("p",[a("code",{pre:!0},[s._v("$updateProps")])]),s._v(" "),a("p",[s._v("With the "),a("code",{pre:!0},[s._v("$updateProps")]),s._v(" method, you can modify the properties of component instances created by createAPI. For example, in "),a("code",{pre:!0},[s._v("DatePicker")]),s._v(", we can modify the value of "),a("code",{pre:!0},[s._v("value")]),s._v(" attribute to change the date currently selected.")]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-html"}},[a("span",{attrs:{class:"hljs-tag"}},[s._v("<"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(" "),a("span",{attrs:{class:"hljs-attr"}},[s._v("@click")]),s._v("="),a("span",{attrs:{class:"hljs-string"}},[s._v('"showUpdatePropsPicker"')]),s._v(">")]),s._v("Use $updateProps"),a("span",{attrs:{class:"hljs-tag"}},[s._v("</"),a("span",{attrs:{class:"hljs-name"}},[s._v("cube-button")]),s._v(">")]),s._v("\n")])]),s._v(" "),a("pre",{pre:!0},[a("code",{attrs:{"v-pre":"",class:"language-js"}},[a("span",{attrs:{class:"hljs-keyword"}},[s._v("export")]),s._v(" "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("default")]),s._v(" {\n  "),a("span",{attrs:{class:"hljs-attr"}},[s._v("methods")]),s._v(": {\n    showUpdatePropsPicker() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("if")]),s._v(" (!"),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".updatePropsPicker) {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".updatePropsPicker = "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDatePicker({\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Use $updateProps'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("min")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2008")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("7")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("8")]),s._v("),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("max")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2020")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("20")]),s._v("),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("(),\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onSelect")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".selectHandle,\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("onCancel")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".cancelHandle\n        })\n      }\n\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".updatePropsPicker.show()\n      setTimeout("),a("span",{attrs:{class:"hljs-function"}},[a("span",{attrs:{class:"hljs-params"}},[s._v("()")]),s._v(" =>")]),s._v(" {\n        "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".updatePropsPicker.$updateProps({\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("title")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'updated'")]),s._v(",\n          "),a("span",{attrs:{class:"hljs-attr"}},[s._v("value")]),s._v(": "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("new")]),s._v(" "),a("span",{attrs:{class:"hljs-built_in"}},[s._v("Date")]),s._v("("),a("span",{attrs:{class:"hljs-number"}},[s._v("2010")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("9")]),s._v(", "),a("span",{attrs:{class:"hljs-number"}},[s._v("1")]),s._v(")\n        })\n      }, "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v(")\n    },\n    selectHandle(date, selectedVal, selectedText) {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createDialog({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'warn'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("content")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("`Selected Item: <br/> - date: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${date}")]),s._v(" <br/> - value: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedVal.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("', '")]),s._v(")}")]),s._v(" <br/> - text: "),a("span",{attrs:{class:"hljs-subst"}},[s._v("${selectedText.join("),a("span",{attrs:{class:"hljs-string"}},[s._v("' '")]),s._v(")}")]),s._v("`")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("icon")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'cubeic-alert'")]),s._v("\n      }).show()\n    },\n    cancelHandle() {\n      "),a("span",{attrs:{class:"hljs-keyword"}},[s._v("this")]),s._v(".$createToast({\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("type")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'correct'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("txt")]),s._v(": "),a("span",{attrs:{class:"hljs-string"}},[s._v("'Picker canceled'")]),s._v(",\n        "),a("span",{attrs:{class:"hljs-attr"}},[s._v("time")]),s._v(": "),a("span",{attrs:{class:"hljs-number"}},[s._v("1000")]),s._v("\n      }).show()\n    }\n  }\n}\n")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Accepted Values")]),s._v(" "),a("th",[s._v("Default")]),s._v(" "),a("th",[s._v("Example")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("min")]),s._v(" "),a("td",[s._v("the minimum value of optional range")]),s._v(" "),a("td",[s._v("Date, Array")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("new Date(2010, 1, 1)")]),s._v(" "),a("td",[s._v("new Date(2008, 7, 8)")])]),s._v(" "),a("tr",[a("td",[s._v("max")]),s._v(" "),a("td",[s._v("the maximum value of optional range")]),s._v(" "),a("td",[s._v("Date, Array")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("new Date(2020, 12, 31)")]),s._v(" "),a("td",[s._v("new Date(2020, 9, 20)")])]),s._v(" "),a("tr",[a("td",[s._v("value")]),s._v(" "),a("td",[s._v("current selected Date")]),s._v(" "),a("td",[s._v("Date, Array")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("the minimum value of optional range")]),s._v(" "),a("td",[s._v("new Date()")])]),s._v(" "),a("tr",[a("td",[s._v("startColumn")]),s._v(" "),a("td",[s._v("the start column")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("year/month/date/hour/minute/second")]),s._v(" "),a("td",[s._v("year")]),s._v(" "),a("td",[s._v("hour")])]),s._v(" "),a("tr",[a("td",[s._v("columnCount")]),s._v(" "),a("td",[s._v("the count of column")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("3")]),s._v(" "),a("td",[s._v("6")])]),s._v(" "),a("tr",[a("td",[s._v("format"),a("sup",[s._v("1.8.0+")])]),s._v(" "),a("td",[s._v("date format")]),s._v(" "),a("td",[s._v("Object")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("{ year: 'YYYY', month: 'M', date: 'D', hour: 'hh', minute: 'mm', second: 'ss' }")]),s._v(" "),a("td",[s._v("{ year: 'YY年', month: 'MM月', date: '第 D 日' }")])]),s._v(" "),a("tr",[a("td",[s._v("title")]),s._v(" "),a("td",[s._v("title")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("''")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("subtitle"),a("sup",[s._v("1.8.1")])]),s._v(" "),a("td",[s._v("subtitle")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("''")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("cancelTxt")]),s._v(" "),a("td",[s._v("the text of the cancel button")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("'取消'")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("confirmTxt")]),s._v(" "),a("td",[s._v("the text of the confirm button")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("'确定'")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("swipeTime")]),s._v(" "),a("td",[s._v("the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("2500")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("visible"),a("sup",[s._v("1.8.1")])]),s._v(" "),a("td",[s._v("whether visible. Bind to "),a("code",{pre:!0},[s._v("v-model")])]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("false")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("maskClosable"),a("sup",[s._v("1.9.6")])]),s._v(" "),a("td",[s._v("whether hide the component when clicked the mask layer")]),s._v(" "),a("td",[s._v("Boolean")]),s._v(" "),a("td",[s._v("true/false")]),s._v(" "),a("td",[s._v("true")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("zIndex"),a("sup",[s._v("1.9.6")])]),s._v(" "),a("td",[s._v("the value of the style z-index")]),s._v(" "),a("td",[s._v("Number")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("100")]),s._v(" "),a("td",[s._v("-")])]),s._v(" "),a("tr",[a("td",[s._v("columnOrder"),a("sup",[s._v("1.12.14")])]),s._v(" "),a("td",[s._v("display order")]),s._v(" "),a("td",[s._v("Array")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("['year', 'month', 'date', 'hour', 'minute', 'second']")]),s._v(" "),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("code",{pre:!0},[s._v("format")]),s._v(" sub configuration")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Attribute")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Type")]),s._v(" "),a("th",[s._v("Default")]),s._v(" "),a("th",[s._v("Example")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("year")]),s._v(" "),a("td",[s._v("the format of year, "),a("code",{pre:!0},[s._v("YYYY")]),s._v(" represent full year，"),a("code",{pre:!0},[s._v("YY")]),s._v(" only last two digit of year")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("YYYY")])]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("YY年")])])]),s._v(" "),a("tr",[a("td",[s._v("month")]),s._v(" "),a("td",[s._v("the format of month, "),a("code",{pre:!0},[s._v("M")]),s._v(" don't pad 0，"),a("code",{pre:!0},[s._v("MM")]),s._v(" pad 0")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("M")])]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("MM月")])])]),s._v(" "),a("tr",[a("td",[s._v("date")]),s._v(" "),a("td",[s._v("the format of date, "),a("code",{pre:!0},[s._v("D")]),s._v(" don't pad 0，"),a("code",{pre:!0},[s._v("DD")]),s._v(" pad 0")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("D")])]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("第 D 日")])])]),s._v(" "),a("tr",[a("td",[s._v("hour")]),s._v(" "),a("td",[s._v("the format of hour, "),a("code",{pre:!0},[s._v("h")]),s._v(" don't pad 0，"),a("code",{pre:!0},[s._v("hh")]),s._v(" pad 0")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("hh")])]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("h点")])])]),s._v(" "),a("tr",[a("td",[s._v("minute")]),s._v(" "),a("td",[s._v("the format of minute, "),a("code",{pre:!0},[s._v("m")]),s._v(" don't pad 0，"),a("code",{pre:!0},[s._v("mm")]),s._v(" pad 0")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("mm")])]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("mm分")])])]),s._v(" "),a("tr",[a("td",[s._v("second")]),s._v(" "),a("td",[s._v("the format of second, "),a("code",{pre:!0},[s._v("s")]),s._v(" don't pad 0，"),a("code",{pre:!0},[s._v("ss")]),s._v(" pad 0")]),s._v(" "),a("td",[s._v("String")]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("ss")])]),s._v(" "),a("td",[a("code",{pre:!0},[s._v("ss秒")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Event Name")]),s._v(" "),a("th",[s._v("Description")]),s._v(" "),a("th",[s._v("Parameters 1")]),s._v(" "),a("th",[s._v("Parameters 2")]),s._v(" "),a("th",[s._v("Parameters 3")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("select")]),s._v(" "),a("td",[s._v("triggers when clicking the confirm button")]),s._v(" "),a("td",[s._v("date: Date, the selected date")]),s._v(" "),a("td",[s._v("selectedVal: Array, the selected value")]),s._v(" "),a("td",[s._v("selectedText: Array, the selected text")])]),s._v(" "),a("tr",[a("td",[s._v("cancel")]),s._v(" "),a("td",[s._v("triggers when clicking the cancel button")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td",[s._v("-")]),s._v(" "),a("td")]),s._v(" "),a("tr",[a("td",[s._v("change")]),s._v(" "),a("td",[s._v("triggers when the roller scrolls")]),s._v(" "),a("td",[s._v("index: Number, index of current scrolling roller")]),s._v(" "),a("td",[s._v("selectedIndex: Number, index of selected item in current column")]),s._v(" "),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",[a("thead",[a("tr",[a("th",[s._v("Method name")]),s._v(" "),a("th",[s._v("Description")])])]),s._v(" "),a("tbody",[a("tr",[a("td",[s._v("show")]),s._v(" "),a("td",[s._v("show")])]),s._v(" "),a("tr",[a("td",[s._v("hide")]),s._v(" "),a("td",[s._v("hide")])])])])}]}},"6Rwf":function(s,t,a){s.exports=a("lqZM")},lqZM:function(s,t,a){var e=a("VU/8")(null,a("63Ju"),null,null,null);s.exports=e.exports}});