date-input-enhance v0.0.1-alpha.9

说明

对elementUI日期组件输入功能增强，用户输入日期数字时自动替换光标位置后的日期文本，并自动保持日期格式

安装

npm install date-input-enhance

引入

import dateInputEnhance from 'date-input-enhance';
Vue.use(dateInputEnhance);

使用案例

<template>
    <div>
        <!-- 使用默认值 -->
        <div class="expamle">example0:
            <el-date-picker 
              v-model="value"
              v-date-input-enhance
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
            &nbsp;&nbsp;<span>当前日期值：</span>{{ value }}
        </div>
          <!-- 配置对应的data名 -->
        <div class="expamle">example1:
            <el-date-picker
              v-model="value1"
              v-date-input-enhance="{ dataName: 'value1' }"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
            &nbsp;&nbsp;<span>当前日期值：</span>{{ value1 }}
        </div>
        <!-- 配置需要跳过的字符 -->
        <div class="expamle">example2:
            <el-date-picker
             v-model="value2"
             v-date-input-enhance="
              { 
               dataName: 'value2', 
               skipChar: ['/', ' ', ':'], 
               initData: '0000/00/00 00:00:00' 
              }"
            format="yyyy/MM/dd HH:mm:ss" 
            value-format="yyyy/MM/dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间">
            </el-date-picker>
            &nbsp;&nbsp;<span>当前日期值：</span>{{ value2 }}
        </div>
        <!-- 配置自定义更新函数名及初始值 -->
        <div class="expamle">example3:
            <el-date-picker 
             :value="value3"
             @input="handleInput"
             v-date-input-enhance=
             "{ 
               dataName: 'value3',
               initData: '0000-00-00',
               handleInputFuncName: 'handleInput' 
             }"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期时间">
            </el-date-picker>
            &nbsp;&nbsp;<span>当前日期值：</span>{{ value3 }}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            value1: '',
            value2: '',
            value3: ''
        }
    },
    methods: {
        handleInput(value) {
            this.value3 = value
        }
    }
}
</script>

<style>
.expamle {
    padding: 10px;
}
</style>

参数说明

  dataName：日期组件绑定的值的属性名，默认值:'value'，必须; 
  skipChar:手动输入日期时需要跳过的字符，一般是日期分割符，默认值：['-', ' ', ':']，必须；
  initData：当前日期为空用户输入日期时默认的日期，默认值：'0000-00-00 00:00:00'必须；
  handleInputFuncName: 如果需要调用自定义的日期值更新函数，则需要配置对应的函数名，可选；