"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);const s=e=>((0,a.Qi)("data-v-14965dfb"),e=e(),(0,a.jt)(),e),i={class:"lin-container"},o=s((()=>(0,a.Lk)("div",{class:"lin-title"},"DatePicker 日期选择器",-1))),c={class:"lin-wrap-ui"},d=s((()=>(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"选择日")],-1))),r={class:"block"},p=s((()=>(0,a.Lk)("span",{class:"demonstration"},"默认",-1))),k={class:"block"},u=s((()=>(0,a.Lk)("span",{class:"demonstration"},"带快捷选项",-1))),m={style:{"white-space":"pre-wrap"}},v=s((()=>(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"其他日期单位")],-1))),h={class:"container"},b={class:"block"},g=s((()=>(0,a.Lk)("span",{class:"demonstration"},"周",-1))),w={class:"block"},L=s((()=>(0,a.Lk)("span",{class:"demonstration"},"月",-1))),y={class:"container"},D={class:"block"},f=s((()=>(0,a.Lk)("span",{class:"demonstration"},"年",-1))),V={class:"block"},x=s((()=>(0,a.Lk)("span",{class:"demonstration"},"多个日期",-1))),F={style:{"white-space":"pre-wrap"}},_=s((()=>(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"选择日期范围")],-1))),T={class:"block"},C=s((()=>(0,a.Lk)("span",{class:"demonstration"},"默认",-1))),$={class:"block"},O=s((()=>(0,a.Lk)("span",{class:"demonstration"},"带快捷选项",-1))),U={style:{"white-space":"pre-wrap"}},M=s((()=>(0,a.Lk)("div",{slot:"header"},[(0,a.Lk)("span",null,"选择月份范围")],-1))),R={class:"block"},W=s((()=>(0,a.Lk)("span",{class:"demonstration"},"默认",-1))),Y={class:"block"},j=s((()=>(0,a.Lk)("span",{class:"demonstration"},"带快捷选项",-1))),A={style:{"white-space":"pre-wrap"}};function E(e,n,t,s,E,I){const 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",i,[o,(0,a.Lk)("div",c,[(0,a.bF)(z,{style:{"margin-bottom":"50px"}},{default:(0,a.k6)((()=>[d,(0,a.bF)(Q,null,{default:(0,a.k6)((()=>[(0,a.Lk)("div",null,[(0,a.Lk)("template",null,[(0,a.Lk)("div",r,[p,(0,a.bF)(P,{modelValue:E.value1,"onUpdate:modelValue":n[0]||(n[0]=e=>E.value1=e),type:"date",placeholder:"选择日期"},null,8,["modelValue"])]),(0,a.Lk)("div",k,[u,(0,a.bF)(P,{modelValue:E.value2,"onUpdate:modelValue":n[1]||(n[1]=e=>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)((()=>[(0,a.bF)(X,{title:"查看代码",name:"2"},{default:(0,a.k6)((()=>[(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)((()=>[v,(0,a.bF)(Q,null,{default:(0,a.k6)((()=>[(0,a.Lk)("div",null,[(0,a.Lk)("div",h,[(0,a.Lk)("div",b,[g,(0,a.bF)(P,{modelValue:E.value3,"onUpdate:modelValue":n[2]||(n[2]=e=>E.value3=e),type:"week",format:"yyyy 第 WW 周",placeholder:"选择周"},null,8,["modelValue"])]),(0,a.Lk)("div",w,[L,(0,a.bF)(P,{modelValue:E.value4,"onUpdate:modelValue":n[3]||(n[3]=e=>E.value4=e),type:"month",placeholder:"选择月"},null,8,["modelValue"])])]),(0,a.Lk)("div",y,[(0,a.Lk)("div",D,[f,(0,a.bF)(P,{modelValue:E.value5,"onUpdate:modelValue":n[4]||(n[4]=e=>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]=e=>E.value6=e),placeholder:"选择一个或多个日期"},null,8,["modelValue"])])])])])),_:1}),(0,a.bF)(q,{class:"test",style:{color:"red"}},{default:(0,a.k6)((()=>[(0,a.bF)(X,{title:"查看代码",name:"2"},{default:(0,a.k6)((()=>[(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)((()=>[_,(0,a.bF)(Q,null,{default:(0,a.k6)((()=>[(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]=e=>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]=e=>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)((()=>[(0,a.bF)(X,{title:"查看代码",name:"2"},{default:(0,a.k6)((()=>[(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)((()=>[M,(0,a.bF)(Q,null,{default:(0,a.k6)((()=>[(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]=e=>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]=e=>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)((()=>[(0,a.bF)(X,{title:"查看代码",name:"2"},{default:(0,a.k6)((()=>[(0,a.Lk)("div",A,(0,l.v_)(E.monthRange),1)])),_:1})])),_:1})])),_:1})])])}var I={name:"",components:{},data(){return{pickerOptions:{disabledDate(e){return e.getTime()>Date.now()},shortcuts:[{text:"今天",onClick(e){e.$emit("pick",new Date)}},{text:"昨天",onClick(e){const n=new Date;n.setTime(n.getTime()-864e5),e.$emit("pick",n)}},{text:"一周前",onClick(e){const n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",n)}}]},pickerOptions1:{shortcuts:[{text:"最近一周",onClick(e){const n=new Date,t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",[t,n])}},{text:"最近一个月",onClick(e){const n=new Date,t=new Date;t.setTime(t.getTime()-2592e6),e.$emit("pick",[t,n])}},{text:"最近三个月",onClick(e){const n=new Date,t=new Date;t.setTime(t.getTime()-7776e6),e.$emit("pick",[t,n])}}]},pickerOptions3:{shortcuts:[{text:"本月",onClick(e){e.$emit("pick",[new Date,new Date])}},{text:"今年至今",onClick(e){const n=new Date,t=new Date((new Date).getFullYear(),0);e.$emit("pick",[t,n])}},{text:"最近六个月",onClick(e){const 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(){this.init()},methods:{init(){}}},P=t(66262);const Q=(0,P.A)(I,[["render",E],["__scopeId","data-v-14965dfb"]]);var X=Q}}]);
|
