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