vue农历日期组件

本文主要是介绍vue农历日期组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

如题需求需要使用带有农历的日期选择客户生日。

参考：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);
    }

这篇关于vue农历日期组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！