• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

trevorstacy/vue-date-picker: A vue date picker component inspired by material de ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

trevorstacy/vue-date-picker

开源软件地址(OpenSource Url):

https://github.com/trevorstacy/vue-date-picker

开源编程语言(OpenSource Language):

Vue 76.2%

开源软件介绍(OpenSource Introduction):

Vue Date Picker

A vue date picker component inspired by material design

Contents

Installing

$ npm install vue-md-date-picker --save

import DatePicker from 'vue-md-date-picker'

Examples

The most common use case

<DatePicker
  v-if="show"
  v-model="date"
  @close="show = false"
/>

Note that there is a v-if directive and a @close event. This is because the date picker allows you to choose when it is displayed, and how to handle closing it.

Setting a min date to choose from

<DatePicker
  v-if="show"
  v-model="date"
  @close="show = false"
  min="2017-8-16"
/>

Setting a max date to choose from

<DatePicker
  v-if="show"
  v-model="date"
  @close="show = false"
  max="2017-8-24"
/>

Setting a range of dates to choose from

<date-picker
  v-if="show"
  v-model="date"
  @close="show = false"
  min="2017-8-16"
  max="2017-8-24"
/>

You may also specifiy a color to change the theme of the date picker

<DatePicker
  color="#F44336"
  @close="show = false"
  v-if="show"
  v-model="date"
/>

There is also a provided transition if you want to fade the date picker in

<transition name="calendar-fade">
  <DatePicker
    @close="show = false"
    v-if="show"
    v-model="date"
  />
</transition>

Formatting

To format the date picker's value, you may use the :format prop. The format prop takes a reference to a function; this function receives the date picker's date value (e.g. 2016-4-19) and may format it however you wish

<DatePicker
  v-if="show"
  v-model="date"
  @close="show = false"
  :format="formatDate"
/>

In your component's methods...

formatDate (date) {
  return moment(date).format('LL')
}

In the above example, if a user selected "2017-8-29" as the date, the date value would be "August 29, 2017".

API

Props

Name Type Description
color String Changes the theme color of the date picker.
format Function Formats the date picker's emitted date via a user specified function.
min String Limits the date to a minimum specified value.
max String Limits the date to a maximum specified value.

Events

Name Description
close Closes the date picker. This is fired when the Cancel button is pressed, when the escape key is pressed, or when the input event is emitted.
input Sets the selected date. This is fired when the Ok button is pressed, or when the user presses the enter or space key after selecting a date. If a format function is passed to the date picker, the emitted value will be run through that before this event is emitted.



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap