"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[2359],{52359:function(e,n,t){t.r(n),t.d(n,{default:function(){return X}});var a=t(20641),l=t(90033),i=function(e){return(0,a.Qi)("data-v-14965dfb"),e=e(),(0,a.jt)(),e},r={class:"lin-container"},o=i((function(){return(0,a.Lk)("div",{class:"lin-title"},"DatePicker 日期选择器",-1)})),c={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={style:{"white-space":"pre-wrap"}},v=i((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"其他日期单位")],-1)})),f={class:"container"},h={class:"block"},b=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"周",-1)})),g={class:"block"},w=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"月",-1)})),L={class:"container"},y={class:"block"},D=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"年",-1)})),V={class:"block"},x=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"多个日期",-1)})),F={style:{"white-space":"pre-wrap"}},_=i((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"选择日期范围")],-1)})),T={class:"block"},C=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"默认",-1)})),$={class:"block"},O=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"带快捷选项",-1)})),U={style:{"white-space":"pre-wrap"}},M=i((function(){return(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"选择月份范围")],-1)})),R={class:"block"},W=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"默认",-1)})),Y={class:"block"},j=i((function(){return(0,a.Lk)("span",{class:"demonstration"},"带快捷选项",-1)})),A={style:{"white-space":"pre-wrap"}};function E(e,n,t,i,E,I){var P=(0,a.g2)("el-date-picker"),Q=(0,a.g2)("el-row"),X=(0,a.g2)("el-collapse-item"),q=(0,a.g2)("el-collapse"),z=(0,a.g2)("el-card");return(0,a.uX)(),(0,a.CE)("div",r,[o,(0,a.Lk)("div",c,[(0,a.bF)(z,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[s,(0,a.bF)(Q,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",null,[(0,a.Lk)("template",null,[(0,a.Lk)("div",d,[u,(0,a.bF)(P,{modelValue:E.value1,"onUpdate:modelValue":n[0]||(n[0]=function(e){return E.value1=e}),type:"date",placeholder:"选择日期"},null,8,["modelValue"])]),(0,a.Lk)("div",p,[k,(0,a.bF)(P,{modelValue:E.value2,"onUpdate:modelValue":n[1]||(n[1]=function(e){return E.value2=e}),align:"right",type:"date",placeholder:"选择日期","picker-options":E.pickerOptions},null,8,["modelValue","picker-options"])])])])]})),_:1}),(0,a.bF)(q,null,{default:(0,a.k6)((function(){return[(0,a.bF)(X,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",m,(0,l.v_)(E.base),1)]})),_:1})]})),_:1})]})),_:1}),(0,a.bF)(z,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[v,(0,a.bF)(Q,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",null,[(0,a.Lk)("div",f,[(0,a.Lk)("div",h,[b,(0,a.bF)(P,{modelValue:E.value3,"onUpdate:modelValue":n[2]||(n[2]=function(e){return E.value3=e}),type:"week",format:"yyyy 第 WW 周",placeholder:"选择周"},null,8,["modelValue"])]),(0,a.Lk)("div",g,[w,(0,a.bF)(P,{modelValue:E.value4,"onUpdate:modelValue":n[3]||(n[3]=function(e){return E.value4=e}),type:"month",placeholder:"选择月"},null,8,["modelValue"])])]),(0,a.Lk)("div",L,[(0,a.Lk)("div",y,[D,(0,a.bF)(P,{modelValue:E.value5,"onUpdate:modelValue":n[4]||(n[4]=function(e){return E.value5=e}),type:"year",placeholder:"选择年"},null,8,["modelValue"])]),(0,a.Lk)("div",V,[x,(0,a.bF)(P,{type:"dates",modelValue:E.value6,"onUpdate:modelValue":n[5]||(n[5]=function(e){return E.value6=e}),placeholder:"选择一个或多个日期"},null,8,["modelValue"])])])])]})),_:1}),(0,a.bF)(q,{class:"test",style:{color:"red"}},{default:(0,a.k6)((function(){return[(0,a.bF)(X,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",F,(0,l.v_)(E.extend),1)]})),_:1})]})),_:1})]})),_:1}),(0,a.bF)(z,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[_,(0,a.bF)(Q,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",null,[(0,a.Lk)("template",null,[(0,a.Lk)("div",T,[C,(0,a.bF)(P,{modelValue:E.value7,"onUpdate:modelValue":n[6]||(n[6]=function(e){return E.value7=e}),type:"daterange","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期"},null,8,["modelValue"])]),(0,a.Lk)("div",$,[O,(0,a.bF)(P,{modelValue:E.value8,"onUpdate:modelValue":n[7]||(n[7]=function(e){return E.value8=e}),type:"daterange",align:"right","unlink-panels":"","range-separator":"至","start-placeholder":"开始日期","end-placeholder":"结束日期","picker-options":E.pickerOptions1},null,8,["modelValue","picker-options"])])])])]})),_:1}),(0,a.bF)(q,{class:"test",style:{color:"red"}},{default:(0,a.k6)((function(){return[(0,a.bF)(X,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",U,(0,l.v_)(E.dateRange),1)]})),_:1})]})),_:1})]})),_:1}),(0,a.bF)(z,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((function(){return[M,(0,a.bF)(Q,null,{default:(0,a.k6)((function(){return[(0,a.Lk)("div",null,[(0,a.Lk)("template",null,[(0,a.Lk)("div",R,[W,(0,a.bF)(P,{modelValue:E.value9,"onUpdate:modelValue":n[8]||(n[8]=function(e){return E.value9=e}),type:"monthrange","range-separator":"至","start-placeholder":"开始月份","end-placeholder":"结束月份"},null,8,["modelValue"])]),(0,a.Lk)("div",Y,[j,(0,a.bF)(P,{modelValue:E.value10,"onUpdate:modelValue":n[9]||(n[9]=function(e){return E.value10=e}),type:"monthrange",align:"right","unlink-panels":"","range-separator":"至","start-placeholder":"开始月份","end-placeholder":"结束月份","picker-options":E.pickerOptions3},null,8,["modelValue","picker-options"])])])])]})),_:1}),(0,a.bF)(q,{class:"test",style:{color:"red"}},{default:(0,a.k6)((function(){return[(0,a.bF)(X,{title:"查看代码",name:"2"},{default:(0,a.k6)((function(){return[(0,a.Lk)("div",A,(0,l.v_)(E.monthRange),1)]})),_:1})]})),_:1})]})),_:1})])])}var I={name:"",components:{},data:function(){return{pickerOptions:{disabledDate:function(e){return e.getTime()>Date.now()},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])}}]},pickerOptions3:{shortcuts:[{text:"本月",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"今年至今",onClick:function(e){var n=new Date,t=new Date((new Date).getFullYear(),0);e.$emit("pick",[t,n])}},{text:"最近六个月",onClick:function(e){var n=new Date,t=new Date;t.setMonth(t.getMonth()-6),e.$emit("pick",[t,n])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",base:'\n <template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-date-picker\n v-model="value1"\n type="date"\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 align="right"\n type="date"\n placeholder="选择日期"\n :picker-options="pickerOptions">\n </el-date-picker>\n </div>\n </template>\n\n <script>\n export default {\n data() {\n return {\n pickerOptions: {\n disabledDate(time) {\n return time.getTime() > Date.now();\n },\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 };\n }\n };\n <\/script>',extend:'\n <div class="container">\n <div class="block">\n <span class="demonstration">周</span>\n <el-date-picker\n v-model="value1"\n type="week"\n format="yyyy 第 WW 周"\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="month"\n placeholder="选择月">\n </el-date-picker>\n </div>\n </div>\n <div class="container">\n <div class="block">\n <span class="demonstration">年</span>\n <el-date-picker\n v-model="value3"\n type="year"\n placeholder="选择年">\n </el-date-picker>\n </div>\n <div class="block">\n <span class="demonstration">多个日期</span>\n <el-date-picker\n type="dates"\n v-model="value4"\n placeholder="选择一个或多个日期">\n </el-date-picker>\n </div>\n </div>\n\n <script>\n export default {\n data() {\n return {\n value1: \'\',\n value2: \'\',\n value3: \'\',\n value4: \'\'\n };\n }\n };\n <\/script>',dateRange:'\n <template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-date-picker\n v-model="value1"\n type="daterange"\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="daterange"\n align="right"\n unlink-panels\n range-separator="至"\n start-placeholder="开始日期"\n end-placeholder="结束日期"\n :picker-options="pickerOptions">\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>',monthRange:'\n <template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-date-picker\n v-model="value1"\n type="monthrange"\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="monthrange"\n align="right"\n unlink-panels\n range-separator="至"\n start-placeholder="开始月份"\n end-placeholder="结束月份"\n :picker-options="pickerOptions">\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(), new Date()]);\n }\n }, {\n text: \'今年至今\',\n onClick(picker) {\n const end = new Date();\n const start = new Date(new Date().getFullYear(), 0);\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.setMonth(start.getMonth() - 6);\n picker.$emit(\'pick\', [start, end]);\n }\n }]\n },\n value1: \'\',\n value2: \'\'\n };\n }\n };\n <\/script>'}},computed:{},watch:{},mounted:function(){this.init()},methods:{init:function(){}}},P=t(66262);const Q=(0,P.A)(I,[["render",E],["__scopeId","data-v-14965dfb"]]);var X=Q}}]);
|
