一个简单的Vue.js datepicker组件支持禁用日期

邵羽
2023-12-01

vuejs-datepicker (vuejs-datepicker)

A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

一个简单的Vue.js datepicker组件。 支持禁用日期,内联模式,翻译

A datepicker Vue component. Compatible with Vue 2.x.

日期选择器Vue组件。 与Vue 2.x兼容。

NB. Vue 1.x was supported up to version v0.9.9. If you want to use this component with Vue 1.x you can install with yarn install [email protected]

注意 Vue 1.x在v0.9.9版本之前受支持。 如果您想将此组件与Vue 1.x一起使用,则可以通过yarn install安装[受电子邮件保护]

To view demo examples locally clone the repo and run yarn install && yarn serve

要在本地查看演示示例,请克隆存储库并运行纱线安装和纱线服务

安装 (Install)

npm install vuejs-datepicker --save

or

要么

yarn add vuejs-datepicker
import Datepicker from 'vuejs-datepicker';

export default {
  // ...
  components: {
    Datepicker
  }
  // ...
}

Or use directly from a CDN

或直接从CDN使用

<div id="app">
  <vuejs-datepicker></vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<script>
const app = new Vue({
  el: '#app',
  components: {
  	vuejsDatepicker
  }
})
</script>

用法 (Usage)

<datepicker></datepicker>

value prop if passed should be a Date object

如果传递的 prop应该是Date对象

<script>
var state = {
  date: new Date(2016, 9,  16)
}
</script>
<datepicker :value="state.date"></datepicker>

support name attribute for normal html form submission

正常html表单提交的支持名称属性

<datepicker :value="state.date" name="uniquename"></datepicker>

Using v-model

使用v-model

<datepicker v-model="state.date" name="uniquename"></datepicker>

Emits events

发出事件

<datepicker @selected="doSomethingInParentComponentFunction" @opened="datepickerOpenedFunction" @closed="datepickerClosedFunction">

Inline always open version

内联始终打开版本

<datepicker :inline="true"></datepicker>

可用道具 (Available props)

PropTypeDefaultDescription
valueDate|StringDate value of the datepicker
nameStringInput name property
idStringInput id
formatString|Functiondd MMM yyyyDate formatting string or function
full-month-nameBooleanfalseTo show the full month name
languageObjectenTranslation for days and months
disabled-datesObjectSee below for configuration
placeholderStringInput placeholder text
inlineBooleanTo show the datepicker always open
calendar-classString|ObjectCSS class applied to the calendar el
input-classString|ObjectCSS class applied to the input el
wrapper-classString|ObjectCSS class applied to the outer div
monday-firstBooleanfalseTo start the week on Monday
clear-buttonBooleanfalseShow an icon for clearing the date
clear-button-iconStringUse icon for button (ex: fa fa-times)
calendar-buttonBooleanfalseShow an icon that that can be clicked
calendar-button-iconStringUse icon for button (ex: fa fa-calendar)
calendar-button-icon-contentStringUse for material-icons (ex: event)
day-cell-contentFunctionUse to render custom content in day cell
bootstrap-stylingBooleanfalseOutput bootstrap v4 styling classes.
initial-viewStringminimumViewIf set, open on that view
disabledBooleanfalseIf true, disable Datepicker on screen
requiredBooleanfalseSets html required attribute on input
typeableBooleanfalseIf true, allow the user to type the date
use-utcBooleanfalseuse UTC for time calculations
open-dateDate|StringIf set, open on that date
minimum-viewString'day'If set, lower-level views won't show
maximum-viewString'year'If set, higher-level views won't show
Struts 类型 默认 描述
日期|字符串 日期选择器的日期值
名称 输入名称属性
ID 输入编号
格式 字符串|函数 dd MMM yyyy 日期格式化字符串或函数
全月名 布尔型 显示完整的月份名称
语言 目的 翻译几天和几个月
禁用日期 目的 参见下面的配置
占位符 输入占位符文本
排队 布尔型 要显示日期选择器始终处于打开状态
日历类 字符串|对象 CSS类应用于日历el
输入类 字符串|对象 CSS类应用于输入el
包装类 字符串|对象 CSS类应用于外部div
星期一优先 布尔型 在星期一开始一周
清除按钮 布尔型 显示清除日期的图标
清除按钮图标 使用图标作为按钮(例如:fa fa-times)
日历按钮 布尔型 显示可以单击的图标
日历按钮图标 使用图标作为按钮(例如:fa fa-calendar)
日历按钮图标内容 用于材料图标(例如:事件)
日细胞含量 功能 用于在日间单元格中呈现自定义内容
引导样式 布尔型 输出bootstrap v4样式类。
初步观点 minimumView 如果已设置,请在该视图上打开
残障人士 布尔型 如果为true,请在屏幕上禁用Datepicker
需要 布尔型 在输入上设置html required属性
可打字的 布尔型 如果为true,则允许用户键入日期
使用utc 布尔型 使用UTC进行时间计算
开放日期 日期|字符串 如果已设置,则在该日期营业
最低视野 '天' 如果设置,则不显示较低级别的视图
最大视野 '年' 如果设置,则不会显示更高级别的视图

大事记 (Events)

These events are emitted on actions in the datepicker

这些事件在datepicker中的操作上发出

EventOutputDescription
openedThe picker is opened
closedThe picker is closed
selectedDate|nullA date has been selected
selectedDisabledObjectA disabled date has been selected
inputDate|nullInput value has been modified
clearedSelected date has been cleared
changedMonthObjectMonth page has been changed
changedYearObjectYear page has been changed
changedDecadeObjectDecade page has been changed
事件 输出量 描述
开了 选择器已打开
关闭 选取器已关闭
已选 日期|空 选择了一个日期
selectedDisabled 目的 选择了禁用日期
输入 日期|空 输入值已被修改
已清除 选定日期已清除
更改月份 目的 月页已更改
更改年份 目的 年份页面已更改
十年 目的 十年页面已更改

日期格式 (Date formatting)

字符串格式化程序 (String formatter)

NB. This is not very robust at all - use at your own risk! Needs a better implementation.

注意 这根本不是很可靠-使用后果自负! 需要更好的实施。

TokenDescExample
dday1
dd0 prefixed day01
Dabbr dayMon
sudate suffixst, nd, rd
Mmonth number (1 based)1 (for Jan)
MM0 prefixed month01
MMMabbreviated month nameJan
MMMMmonth nameJanuary
yytwo digit year16
yyyyfour digit year2016
代币 描述
d 1个
dd 0天 01
d Abbr日 周一
su 日期后缀 st,nd,rd
中号 月数(以1为基础) 1(一月)
MM 0前缀月份 01
MMM 缩写的月份名称 一月
MMMM 月份名称 一月
y 两位数年份 16
yyyy 四位数年份 2016年

功能格式化器 (Function formatter)

Delegates date formatting to provided function. Function will be called with date and it has to return formated date as a string. This allow us to use moment, date-fns, globalize or any other library to format date.

将日期格式委托给提供的功能。 函数将使用日期进行调用,并且必须以字符串形式返回格式化的日期。 这使我们可以使用moment,date-fns,globalize或任何其他库来格式化日期。

<script>
  methods: {
    customFormatter(date) {
      return moment(date).format('MMMM Do YYYY, h:mm:ss a');
    }
  }
</script>
<datepicker :format="customFormatter"></datepicker>

禁用日期 (Disabled Dates)

Dates can be disabled in a number of ways.

可以通过多种方式禁用日期。

<script>
var state = {
  disabledDates: {
    to: new Date(2016, 0, 5), // Disable all dates up to specific date
    from: new Date(2016, 0, 26), // Disable all dates after specific date
    days: [6, 0], // Disable Saturday's and Sunday's
    daysOfMonth: [29, 30, 31], // Disable 29th, 30th and 31st of each month
    dates: [ // Disable an array of dates
      new Date(2016, 9, 16),
      new Date(2016, 9, 17),
      new Date(2016, 9, 18)
    ],
    ranges: [{ // Disable dates in given ranges (exclusive).
      from: new Date(2016, 11, 25),
      to: new Date(2016, 11, 30)
    }, {
      from: new Date(2017, 1, 12),
      to: new Date(2017, 2, 25)
    }],
    // a custom function that returns true if the date is disabled
    // this can be used for wiring you own logic to disable a date if none
    // of the above conditions serve your purpose
    // this function should accept a date and return true if is disabled
    customPredictor: function(date) {
      // disables the date if it is a multiple of 5
      if(date.getDate() % 5 == 0){
        return true
      }
    }
  }
}
</script>
<datepicker :disabledDates="state.disabledDates"></datepicker>

突出日期 (Highlighted Dates)

Dates can be highlighted (e.g. for marking an appointment) in a number of ways. Important: By default disabled dates are ignored, to highlight disabled dates set the includeDisabled property to true. Note: Both to and from properties are required to define a range of dates to highlight.

日期可以通过多种方式突出显示(例如,用于标记约会)。 重要提示:默认情况下,禁用日期被忽略,要突出显示禁用日期,请将includeDisabled属性设置为true 。 注意: to同时from tofrom属性来定义要突出显示的日期范围。

<script>
var state = {
  highlighted: {
    to: new Date(2016, 0, 5), // Highlight all dates up to specific date
    from: new Date(2016, 0, 26), // Highlight all dates after specific date
    days: [6, 0], // Highlight Saturday's and Sunday's
    daysOfMonth: [15, 20, 31], // Highlight 15th, 20th and 31st of each month
    dates: [ // Highlight an array of dates
      new Date(2016, 9, 16),
      new Date(2016, 9, 17),
      new Date(2016, 9, 18)
    ],
    // a custom function that returns true of the date is highlighted
    // this can be used for wiring you own logic to highlight a date if none
    // of the above conditions serve your purpose
    // this function should accept a date and return true if is highlighted
    customPredictor: function(date) {
      // highlights the date if it is a multiple of 4
      if(date.getDate() % 4 == 0){
        return true
      }
    },
    includeDisabled: true // Highlight disabled dates
  }
}
</script>
<datepicker :highlighted="state.highlighted"></datepicker>

插槽 (Slots)

Slots will help you customize content. .

广告位可帮助您自定义内容。 。

日历标题之前 (beforeCalendarHeader)

Sometimes you need to show custom content before the calendar header. For such cases you can use the named slot beforeCalendarHeader.

有时您需要在日历标题之前显示自定义内容。 在这种情况下,可以使用beforeCalendarHeader插槽。

An example would be to use bootstrap's input-group-prepend and input-group-append to show some custom text:

一个示例是使用引导程序的input-group-prependinput-group-append来显示一些自定义文本:

<datepicker :bootstrap-styling="true">
  <div slot="beforeCalendarHeader" class="calender-header">
    Choose a Date
  </div>
</datepicker>

afterDateInput (afterDateInput)

To implement some custom styling (for instance to add an animated placeholder) on DateInput, you might need to add elements as DateInput siblings. Slot named afterDateInput allows you to do that:

要在DateInput上实现某些自定义样式(例如添加动画占位符),可能需要将元素添加为DateInput兄弟。 名为afterDateInput插槽允许您执行以下操作:

<datepicker>
  <span slot="afterDateInput" class="animated-placeholder">
    Choose a Date
  </span>
</datepicker>

翻译 (Translations)

Contributing guide - please use appropriate code from this list as the translation property.

投稿指南-请使用此列表中的适当代码作为翻译属性。

  • Add your language as a module in the src/locale/translations dir.

    将您的语言作为模块添加到src/locale/translations目录中。

  • Import and export it in the src/locale/index file

    将其导入并导出到src/locale/index文件中

  • Add the Language to the available languages in the readme file.

    将语言添加到自述文件中的可用语言中。

  • Run npm run lint to make sure your code formatting is in line with the required code style.

    运行npm run lint ,以确保您的代码格式符合所需的代码样式。

如何申请语言 (How to apply language)

Below script tag in component.

组件中脚本标签下方。

import {en, es} from 'vuejs-datepicker/dist/locale'

In component data.

在组件数据中。

data () {
    return {
      en: en,
      es: es
    }
}

html.

html。

<datepicker :language="es"></datepicker>

Available languages

可用语言

AbbrLanguage
afAfrikaans
arArabic
bgBulgarian
bsBosnian
caCatalan
csCzech
daDanish
deGerman
eeEstonian
elGreek
enEnglishDefault
esSpanish
faPersian (Farsi)
fiFinnish
foFaroese
frFrench
geGeorgia
heHebrew
huHungarian
hrCroatian
idIndonesian
isIcelandic
itItalian
jaJapanese
koKorean
lbLuxembourgish
ltLithuanian
lvLatvian
mnMongolian
nbNONorwegian Bokmål
nlDutch
plPolish
ptBRPortuguese-Brazil
roRomanian
ruRussian
skSlovak
slSISlovenian
svSwedish
srSerbian (Latin)
srCyrlSerbian (Cyrl)
thThai
trTurkish
ukUkrainian
urUrdu
viVietnamese
zhChinese
亚伯 语言
f 南非语
AR 阿拉伯
保加利亚语
s 波斯尼亚人
加泰罗尼亚语
cs 捷克文
DA 丹麦文
德语
ee 爱沙尼亚语
埃尔 希腊语
英语 默认
es 西班牙文
F A 波斯语(波斯语)
科幻 芬兰
法罗语
fr 法文
ge 佐治亚州
希伯来语
hu 匈牙利
小时 克罗地亚语
ID 印度尼西亚
冰岛的
义大利文
ja 日本
KO 韩语
卢森堡语
lt 立陶宛语
lv 拉脱维亚语
mn
氧化氮 挪威语Bokmål
nl 荷兰语
PL 抛光
聚四氟乙烯 巴西葡萄牙语
RO 罗马尼亚语
RU 俄语
sk 斯洛伐克文
slSI 斯洛文尼亚文
sv 瑞典
sr 塞尔维亚文(拉丁文)
srCyrl 塞尔维亚文(Cyrl)
泰国
tr 土耳其
英国 乌克兰
ur 乌尔都语
越南文
zh 中文

翻译自: https://vuejsexamples.com/a-simple-vue-js-datepicker-component-supports-disabling-of-dates/

 类似资料: