"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[6374],{36374:function(e,n,t){t.r(n),t.d(n,{default:function(){return j}});var a=t(20641),l=t(90033),i=function(e){return(0,a.Qi)("data-v-123a8cf4"),e=e(),(0,a.jt)(),e},r={class:"lin-container"},c=i((function(){return(0,a.Lk)("div",{class:"lin-title"},"DateTimePicker 日期时间选择器",-1)})),o={class:"lin-wrap-ui"},s=i((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"日期和时间点")],-1)})),d={class:"block"},u=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"默认",-1)})),p={class:"block"},k=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"带快捷选项",-1)})),m={class:"block"},v=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"设置默认时间",-1)})),f={style:{"white-space":"pre-wrap"}},g=i((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"日期和时间范围")],-1)})),h={class:"block"},b=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"默认",-1)})),L={class:"block"},w=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"带快捷选项",-1)})),T={style:{"white-space":"pre-wrap"}},y=i((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"默认的起始与结束时刻")],-1)})),V={class:"block"},_=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"起始日期时刻为 12:00:00",-1)})),D={class:"block"},F=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"起始日期时刻为 12:00:00，结束日期时刻为 08:00:00",-1)})),x={style:{"white-space":"pre-wrap"}};function C(e,n,t,i,C,$){var O=(0,a.g2)("el-date-picker"),U=(0,a.g2)("el-row"),j=(0,a.g2)("el-collapse-item"),A=(0,a.g2)("el-collapse"),E=(0,a.g2)("el-card");return(0,a.uX)(),(0,a.CE)("div",r,[c,(0,a.Lk)("div",o,[(0,a.bF)(E,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[s,(0,a.bF)(U,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("template",null,[(0,a.Lk)("div",d,[u,(0,a.bF)(O,{modelValue:C.value1,"onUpdate:modelValue":n[0]||(n[0]=function(e){return C.value1=e}),type:"datetime",placeholder:"选择日期时间"},null,8,["modelValue"])]),(0,a.Lk)("div",p,[k,(0,a.bF)(O,{modelValue:C.value2,"onUpdate:modelValue":n[1]||(n[1]=function(e){return C.value2=e}),type:"datetime",placeholder:"选择日期时间",align:"right","picker-options":C.pickerOptions},null,8,["modelValue","picker-options"])]),(0,a.Lk)("div",m,[v,(0,a.bF)(O,{modelValue:C.value3,"onUpdate:modelValue":n[2]||(n[2]=function(e){return C.value3=e}),type:"datetime",placeholder:"选择日期时间","default-time":"12:00:00"},null,8,["modelValue"])])])]})),_:1}),(0,a.bF)(A,null,{default:(0,a.k6)((function(){return[(0,a.bF)(j,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",f,(0,l.v_)(C.base),1)]})),_:1})]})),_:1})]})),_:1}),(0,a.bF)(E,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[g,(0,a.bF)(U,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",null,[(0,a.Lk)("template",null,[(0,a.Lk)("div",h,[b,(0,a.bF)(O,{modelValue:C.value4,"onUpdate:modelValue":n[3]||(n[3]=function(e){return C.value4=e}),type:"datetimerange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},null,8,["modelValue"])]),(0,a.Lk)("div",L,[w,(0,a.bF)(O,{modelValue:C.value5,"onUpdate:modelValue":n[4]||(n[4]=function(e){return C.value5=e}),type:"datetimerange","picker-options":C.pickerOptions1,"range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期",align:"right"},null,8,["modelValue","picker-options"])])])])]})),_:1}),(0,a.bF)(A,{class:"test",style:{color:"red"}},{default:(0,a.k6)((function(){return[(0,a.bF)(j,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",T,(0,l.v_)(C.datetimerange),1)]})),_:1})]})),_:1})]})),_:1}),(0,a.bF)(E,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[y,(0,a.bF)(U,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",null,[(0,a.Lk)("template",null,[(0,a.Lk)("div",V,[_,(0,a.bF)(O,{modelValue:C.value6,"onUpdate:modelValue":n[5]||(n[5]=function(e){return C.value6=e}),type:"datetimerange","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["12:00:00"]},null,8,["modelValue"])]),(0,a.Lk)("div",D,[F,(0,a.bF)(O,{modelValue:C.value7,"onUpdate:modelValue":n[6]||(n[6]=function(e){return C.value7=e}),type:"datetimerange",align:"right","start-placeholder":"开始日期","end-placeholder":"结束日期","default-time":["12:00:00","08:00:00"]},null,8,["modelValue"])])])])]})),_:1}),(0,a.bF)(A,{class:"test",style:{color:"red"}},{default:(0,a.k6)((function(){return[(0,a.bF)(j,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",x,(0,l.v_)(C.defaultTime),1)]})),_:1})]})),_:1})]})),_:1})])])}var $={name:"",components:{},data:function(){return{pickerOptions:{shortcuts:[{text:"今天",onClick:function(e){e.$emit("pick",new Date)}},{text:"昨天",onClick:function(e){var n=new Date;n.setTime(n.getTime()-864e5),e.$emit("pick",n)}},{text:"一周前",onClick:function(e){var n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",n)}}]},pickerOptions1:{shortcuts:[{text:"最近一周",onClick:function(e){var n=new Date,t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",[t,n])}},{text:"最近一个月",onClick:function(e){var n=new Date,t=new Date;t.setTime(t.getTime()-2592e6),e.$emit("pick",[t,n])}},{text:"最近三个月",onClick:function(e){var n=new Date,t=new Date;t.setTime(t.getTime()-7776e6),e.$emit("pick",[t,n])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:"",base:'\n <template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-date-picker\n v-model="value1"\n type="datetime"\n placeholder="选择日期时间">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">带快捷选项</span>\n <el-date-picker\n v-model="value2"\n type="datetime"\n placeholder="选择日期时间"\n align="right"\n :picker-options="pickerOptions">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">设置默认时间</span>\n <el-date-picker\n v-model="value3"\n type="datetime"\n placeholder="选择日期时间"\n default-time="12:00:00">\n </el-date-picker>\n </div>\n </template>\n\n <script>\n export default {\n data() {\n return {\n pickerOptions: {\n shortcuts: [{\n text: \'今天\',\n onClick(picker) {\n picker.$emit(\'pick\', new Date());\n }\n }, {\n text: \'昨天\',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24);\n picker.$emit(\'pick\', date);\n }\n }, {\n text: \'一周前\',\n onClick(picker) {\n const date = new Date();\n date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit(\'pick\', date);\n }\n }]\n },\n value1: \'\',\n value2: \'\',\n value3: \'\'\n };\n }\n };\n <\/script>',datetimerange:'\n <template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-date-picker\n v-model="value1"\n type="datetimerange"\n range-separator="至"\n start-placeholder="开始日期"\n end-placeholder="结束日期">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">带快捷选项</span>\n <el-date-picker\n v-model="value2"\n type="datetimerange"\n :picker-options="pickerOptions"\n range-separator="至"\n start-placeholder="开始日期"\n end-placeholder="结束日期"\n align="right">\n </el-date-picker>\n </div>\n </template>\n\n <script>\n export default {\n data() {\n return {\n pickerOptions: {\n shortcuts: [{\n text: \'最近一周\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'最近一个月\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n picker.$emit(\'pick\', [start, end]);\n }\n }, {\n text: \'最近三个月\',\n onClick(picker) {\n const end = new Date();\n const start = new Date();\n start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n picker.$emit(\'pick\', [start, end]);\n }\n }]\n },\n value1: \'\',\n value2: \'\'\n };\n }\n };\n <\/script>',defaultTime:'\n <template>\n <div class="block">\n <span class="demonstration">起始日期时刻为 12:00:00</span>\n <el-date-picker\n v-model="value1"\n type="datetimerange"\n start-placeholder="开始日期"\n end-placeholder="结束日期"\n :default-time="[\'12:00:00\']">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>\n <el-date-picker\n v-model="value2"\n type="datetimerange"\n align="right"\n start-placeholder="开始日期"\n end-placeholder="结束日期"\n :default-time="[\'12:00:00\', \'08:00:00\']">\n </el-date-picker>\n </div>\n </template>\n\n <script>\n export default {\n data() {\n return {\n value1: \'\',\n value2: \'\'\n };\n }\n };\n <\/script>'}},computed:{},watch:{},mounted:function(){this.init()},methods:{init:function(){}}},O=t(66262);const U=(0,O.A)($,[["render",C],["__scopeId","data-v-123a8cf4"]]);var j=U}}]);
|
