vue日期选择组件_一个Vue组件，为波斯开发人员提供日期选择器

vue日期选择组件

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

This is a Jalali date picker component for Vue.

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

View demo 查看演示 Download Source 下载源

通用模块定义(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)

Property	Type	Default	Description
placeholder	String	یک تاریخ را انتخاب کنید	Place holder of input
header-color	Color	'white'	Header text color
header-background-color	Color	'#137e95'	Header background color
hover-day-back-color	Color	'#137e95'	Background color when mouse hovers an element
chosen-day-back-color	Color	'#137e95'	Background color for chosen day
dialog-color	'black'		Color Dialog text color
dialog-background-color	Color	'#fafafa'	Dialog background color
minimum-year	Number	1300	Minimum selectable year for user
maximum-year	Number	1350	Maximum selectable year for user
name	String	''	Name element for normal http form submit
required	Boolean	false	value of HTML required attribute
id	String	''	value of input's id attribute
input-class	String	''	css class for input element
dialog class	String	''	css class for dialog element
wrapper-class	String	''	css class wrapper element of component
input-disabled	Boolean	true	for responsive reasons input is disabled by default but you can enable it if you need to.
initial-view	String	'day'	Initial view of component (month or day)
inline-mode	Boolean	false	inline mode
format-date	String	'yyyy/MM/dd'	formats output date. order of date element should not change
open-transition-animation	String	'slide-fade'	you can specify a transition for opening and closing dialog.
persianDigits	Boolean	true	whether to use persian or english digits
availableDates	Boolean	false	If you want limit user to certain range of dates
availableDateStart	String	1300/01/01	In case of setting availableDates to true, use this to set start date
availableDateEnd	String	1450/12/29	In case of setting availableDates to true, use this to set end date
disableDatesBeforeToday	Boolean	false	This will disable all dates before today
modal-mode	Boolean	false	This will make dialog modal.
modal-open-transition-animation	String	'scale-fade'	you can specify a transition for opening and closing dialog in modal mode.

属性	类型	默认	描述
占位符	串	تاریخراانتخابکنید	输入的占位符
标题颜色	颜色	'白色'	标题文字颜色
标题背景颜色	颜色	'＃137e95'	标头背景色
悬停一天回来的颜色	颜色	'＃137e95'	鼠标悬停元素时的背景色
选择的一天回来的颜色	颜色	'＃137e95'	所选日期的背景色
对话框颜色	'黑色'		颜色对话框文字颜色
对话框背景色	颜色	'#fafafa'	对话框背景色
最小年	数	1300	用户的最小可选年份
最长年份	数	1350	用户的最大可选年份
名称	串	''	正常http表单提交的名称元素
需要	布尔型	假	HTML必填属性的值
ID	串	''	输入的id属性的值
输入类	串	''	输入元素CSS类
对话课	串	''	对话框元素CSS类
包装类	串	''	组件的css类包装器元素
禁用输入	布尔型	真正	出于响应的原因，默认情况下禁用输入，但是您可以根据需要启用它。
初步观点	串	'天'	组件的初始视图(月或日)
内联模式	布尔型	假	内联模式
格式日期	串	'yyyy / MM / dd'	格式化输出日期。 日期顺序元素不应更改
开放过渡动画	串	“幻灯片淡入淡出”	您可以指定用于打开和关闭对话框的过渡。
波斯数字	布尔型	真正	使用波斯数字还是英文数字
availableDates	布尔型	假	如果要将用户限制为一定日期范围
availableDateStart	串	1300/01/01	如果将availableDates设置为true，请使用此设置开始日期
availableDateEnd	串	1450/12/29	如果将availableDates设置为true，请使用此设置结束日期
disableDatesBeforeToday	布尔型	假	这将禁用今天之前的所有日期
模态模式	布尔型	假	这将使对话框成为模态。
模态开放过渡动画	串	“淡入淡出”	您可以指定模式模式下打开和关闭对话框的过渡。

大事记 (Events)

event	Parameters	description
opened	Date String	The picker's dialog is opened
closed	Date String	The picker's dialog is closed
monthChanged	Date String	Month page has changed
yearChanged	Date String	Year page has changed
selected	Date Object	A date has been selected
input	Date String	Input changed

事件	参量	描述
开了	日期字串	选择器的对话框打开
关闭	日期字串	选择器的对话框关闭
monthChanged	日期字串	月页已更改
yearChanged	日期字串	年份页面已更改
已选	日期对象	选择了一个日期
输入	日期字串	输入已更改

获取选择的日期 (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)

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

token	desc	example
d	day	3
dd	day with 0 prefixed day	03
M	month number	4
MM	month with 0 prefix day	04
MMM	month name	فروردین
yy	two digits year	96
yyyy	four digits year	1396

代币	描述	例
d	天	3
dd	带0前缀的日期的一天	03
中号	月数	4
MM	带有0个前缀天的月份	04
MMM	月份名称	فروردین
y	两位数年份	96
yyyy	四位数年份	1396

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

vue日期选择组件