(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{180:function(t,a,s){"use strict";s.r(a);var e=s(181),n=s.n(e);for(var r in e)"default"!==r&&function(t){s.d(a,t,function(){return e[t]})}(r);a.default=n.a},181:function(t,a){t.exports={data:function(){return{selectedLabeled:null,selectedDate:new Date("2018/03/26"),selectedClose:null}}}},204:function(t,a,s){"use strict";var e=function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"content"},[t._m(0),t._v(" "),s("p",[t._v("We have created a date-time picker starting from the "),s("a",{attrs:{href:"https://vuematerial.io/",target:"_blank",rel:"noopener noreferrer"}},[t._v("vuematerial.io"),s("OutboundLink")],1),t._v(" date picker. We have changed the colours, typography and buttons, so it can look like the rest of the dashboard. You don't have to import the component you just use it like this:")]),t._v(" "),t._m(1),t._v(" "),s("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="md-layout-item md-size-100">\n    <md-datepicker v-model="selectedLabeled">\n      <label>Select date</label>\n    </md-datepicker>\n  </div>\n</template>\n\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        selectedLabeled: null\n      }\n    }\n  }\n",style:null}}},[s("div",{staticClass:"source",attrs:{slot:"source"},slot:"source"},[[s("div",{staticClass:"md-layout-item md-size-100"},[s("md-datepicker",{model:{value:t.selectedLabeled,callback:function(a){t.selectedLabeled=a},expression:"selectedLabeled"}},[s("label",[t._v("Select date")])])],1)]],2),t._v(" "),s("div",{staticClass:"highlight",attrs:{slot:"highlight"},slot:"highlight"},[s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("md-layout-item md-size-100"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("md-datepicker")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("selectedLabeled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Select date"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("md-datepicker")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script language-javascript"}},[t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        selectedLabeled"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])])])]),t._v(" "),s("blockquote",[s("p",[t._v("Note: for more details about the datepicker props and attributes please see the "),s("strong",[t._v("Datepicker")]),t._v(" section from "),s("a",{attrs:{href:"https://vuematerial.io/components/datepicker",target:"_blank",rel:"noopener noreferrer"}},[t._v("vuematerial.io"),s("OutboundLink")],1)])])],1)},n=[function(){var t=this.$createElement,a=this._self._c||t;return a("h1",{attrs:{id:"date-pickers"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-pickers","aria-hidden":"true"}},[this._v("#")]),this._v(" Date Pickers")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"simple-examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Simple Examples")])}];s.d(a,"a",function(){return e}),s.d(a,"b",function(){return n})},215:function(t,a,s){"use strict";s.r(a);var e=s(204),n=s(180);for(var r in n)"default"!==r&&function(t){s.d(a,t,function(){return n[t]})}(r);var p=s(0),o=Object(p.a)(n.default,e.a,e.b,!1,null,null,null);a.default=o.exports}}]);