vue日期选择组件

Vue波斯日期选择器 (vue persian datepicker)

This is a Jalali date picker component for Vue.

这是Vue的Jalali日期选择器组件。

通用模块定义(UMD) (Universal Module Definition(UMD))

In order to use datepicker without node package manager include these scripts and style sheet ( I recommend using unpkg ):

为了在没有节点包管理器的情况下使用datepicker，请包括以下脚本和样式表(我建议使用unpkg)：

<link href="https://unpkg.com/vue2-persian-datepicker/dist/vue2-persian-datepicker.css" rel="stylesheet"></script>
<script type=text/javascript src="https://unpkg.com/vue"></script>
<script type=text/javascript src="https://unpkg.com/vue2-persian-datepicker/dist/vue2-persian-datepicker.js"></script>

Then register the component :

然后注册组件：

Vue.component('pdatepicker', PDatePicker.PDatePicker);

NPM (NPM)

$ npm install vue2-persian-datepicker

Then register the component:

然后注册组件：

import Vue from 'vue'
import PDatePicker from 'vue2-persian-datepicker'
Vue.component('pdatepicker', PDatePicker)

用法 (Usage)

After registering the component you can use it in your markup:

注册组件后，您可以在标记中使用它：

<pdatepicker></pdatepicker>

基本用法 (Basic usage)

In most cases you use pdatepicker to provide a persian date picker for your users to pick a date from. So, you need a way to get selected date. You can easily achieve this by syncing a variable.

在大多数情况下，您可以使用pdatepicker提供波斯语日期选择器，以便用户从中选择日期。 因此，您需要一种获取选定日期的方法。 您可以通过同步变量轻松实现此目的。

This is pretty much what you have to do in order to get selected date or display a date to a user:

这几乎是您要获取选定日期或向用户显示日期所要做的事情：

<pdatepicker v-model="date"></pdatepicker>

export default{data(){return {date : '1396/6/8'};}
}

物产 (Properties)

大事记 (Events)

获取选择的日期 (Get selected date)

Using v-model you can sync a value to selected date. Or, you can listen to selected event and get selected date.

使用v模型，您可以将值同步到所选日期。 或者，您可以收听选定的事件并获得选定的日期。

日期格式 (Date formatting)

There are several ways you can print selected date on user input. Keep in mind that you have to keep order of date (year/month/date)

您可以通过多种方式在用户输入上打印所选日期。 请记住，您必须保持日期顺序(年/月/日)

翻译自: https://vuejsexamples.com/a-vue-component-that-provides-datepicker-for-persian-developers/

vue日期选择组件