如题需求需要使用带有农历的日期选择客户生日。
参考:https://toscode.gitee.com/tuhe32/vue-jLunar-datePicker
引入
npm install vue-jlunar-datepicker --save
页面引用
<script> import JDatePicker from 'vue-jlunar-datepicker' export default { components: { JDatePicker } }, data() { return { value1:'', type:'DATE', showLunarClass:'MIX', showBackYears:2, showLunarIcon:true, showLunarControl:true, width1: "100%", //这个设置成100%,原组件写死了px需要修改 format:'yyyy-MM-dd', placeholder:'', rangeSeparator:'-', disabled:false, editable:true, clearable:true, pickerOptions: { //去掉禁止日期显示范围 /* disabledDate (time) { return time.getTime() < Date.now() - 8.64e7; }*/ } } } </script>
使用组件
<template> <j-date-picker v-model="value1" id="value1" :width="width1" :placeholder="placeholder" :picker-options="pickerOptions" :rangeSeparator="rangeSeparator" @change="onDateChange" :disabled="disabled" :showLunarClass="showLunarClass" :showLunarControl="showLunarControl" :type="type" :showBackYears="showBackYears" :showLunarIcon="showLunarIcon" :format="format"> </j-date-picker> </template>
样式修改,原组件宽度写死了px,如果有响应式布局的需求需要自行修改 JDatePicker.vue
<div class="full-jcalendar" :style="{width:handleWidth}">
computed: { handleWidth: function () { let w = this.width.toString(); if (w == null || w == '') { return 200; } return w; }, },
width: { type: String, default: '100%', },
使用效果,弹出值
onDateChange(val) { this.form.birthdaydate = val; alert(this.form.birthdaydate); }