npm 包 @dhau/vuejs-datepicker 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

@dhau/vuejs-datepicker 是一个基于 Vue.js 的日期选择器组件，它支持选择单个日期、范围日期、时间和日期时间选择。

安装

在使用之前需要先安装此组件，可以通过 npm 进行安装：

npm install @dhau/vuejs-datepicker --save

使用

全局引入

在入口文件中引入并注册组件：

// main.js
import Vue from 'vue';
import DatePicker from '@dhau/vuejs-datepicker';

Vue.component('DatePicker', DatePicker);

然后在需要使用的组件中直接使用即可：

<template>
  <div>
    <DatePicker v-model="date"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: null
    };
  }
};
</script>

局部引入

在需要使用的组件中引入并注册组件：

<template>
  <div>
    <DatePicker v-model="date"/>
  </div>
</template>

<script>
import DatePicker from '@dhau/vuejs-datepicker';

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      date: null
    };
  }
};
</script>

API

Props

参数	说明	类型	默认值
v-model	绑定值，可传入 `Date`、`String` 或者 `null`	`Date/String`	`null`
type	选择器类型，可选值为 `date`、`datetime`、`time`	`String`	`date`
format	显示在输入框中的日期格式	`String`	`'yyyy-MM-dd'`
placeholder	占位文本	`String`	`'请选择日期'`
disabled	是否禁用	`Boolean`	`false`
clearable	是否可清空	`Boolean`	`true`
readonly	是否只读	`Boolean`	`false`
editable	是否可编辑	`Boolean`	`false`
input-class	输入框类名	`String`	-
popper-class	弹出框类名	`String`	-
width	组件宽度	`Number`	-
zIndex	弹出菜单的 z-index	`Number`	`2000`

Events

事件名称	说明	回调参数
input	在 input 框中输入时触发	event: KeyboardEvent
change	选中日期时触发	value: Date/String

示例代码

选择单个日期

<template>
  <DatePicker v-model="date" type="date" placeholder="请选择日期"/>
</template>

<script>
export default {
  data() {
    return {
      date: null
    };
  }
};
</script>

选择时间

<template>
  <DatePicker v-model="time" type="time" placeholder="请选择时间"/>
</template>

<script>
export default {
  data() {
    return {
      time: null
    };
  }
};
</script>

选择日期和时间

<template>
  <DatePicker v-model="datetime" type="datetime" placeholder="请选择日期和时间"/>
</template>

<script>
export default {
  data() {
    return {
      datetime: null
    };
  }
};
</script>

禁用和只读状态

<template>
  <div>
    <DatePicker v-model="date1" type="date" placeholder="禁用状态" :disabled="true"/>
    <DatePicker v-model="date2" type="date" placeholder="只读状态" :readonly="true"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date1: null,
      date2: new Date()
    };
  }
};
</script>

可清空

<template>
  <DatePicker v-model="date" type="date" clearable placeholder="请选择日期"/>
</template>

<script>
export default {
  data() {
    return {
      date: null
    };
  }
};
</script>

自定义日期格式和输入框样式

<template>
  <div>
    <DatePicker v-model="date" type="date" format="yyyy/MM/dd" placeholder="请选择日期" input-class="my-input"/>
    <div>选中日期：{{ date }}</div>
  </div>
</template>

<style>
.my-input {
  border-radius: 4px;
  border: 1px solid #e2e2e2;
  padding: 8px;
  font-size: 14px;
}
</style>

<script>
export default {
  data() {
    return {
      date: null
    };
  }
};
</script>

总结

@dhau/vuejs-datepicker 为我们提供了一个可定制化的日期选择器组件，通过对组件 API 的学习和使用，我们可以方便地实现各种日期选择功能，节省开发时间，并且大幅提高用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e0fb81d47349e53d32