persiandate-vue
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations
Last updated 3 years ago by pi0 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install persiandate-vue 
SYNC missed versions from official npm registry.

Datepicker

Coverage Status

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

Demo

https://www.webpackbin.com/bins/-KhQbtTSVuU6r8VCrIdC

Install

$ npm install vuejs-datepicker --save
import Datepicker from 'vuejs-datepicker';

Vue.component('my-component', {
    components: {
        Datepicker
    }
});

Usage

<datepicker></datepicker>

value prop if passed should be a Date object

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

support name attribute for normal html form submission

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

Use v-model for two-way binding

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

Emits events

<datepicker v-on:selected="doSomethingInParentComponentFunction" v-on:opened="datepickerOpenedFunction" v-on:closed="datepickerClosedFunction">

Inline always open version

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

Available props

Prop Type Default Description
value Date|String Date value of the datepicker
name String Input name property
id String Input id
format String dd MMM yyyy Date formatting string
full-month-name Boolean false To show the full month name
language String en Translation for days and months
disabled Object See below for configuration
placeholder String Input placeholder text
inline Boolean To show the datepicker always open
calendar-class String|Object CSS class applied to the calendar el
input-class String|Object CSS class applied to the input el
wrapper-class String|Object CSS class applied to the outer div
monday-first Boolean false To start the week on Monday
clear-button Boolean false Show an icon for clearing the date
clear-button-icon String Use icon for button (ex: fa fa-times)
calendar-button Boolean false Show an icon that that can be clicked
calendar-button-icon String Use icon for button (ex: fa fa-calendar)
bootstrapStyling Boolean false Output bootstrap styling classes
initial-view String 'day' If 'month' or 'year', open on that view
disabled-picker Boolean false If true, disable Datepicker on screen
required Boolean false Sets html required attribute on input

Events

These events are emitted on actions in the datepicker

Event Output Description
opened The picker is opened
closed The picker is closed
selected Date|null A date has been selected
input Date|null Input value has been modified
cleared Selected date has been cleared
changedMonth Object Month page has been changed
changedYear Object Year page has been changed
changedDecade Object Decade page has been changed

Date formatting

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

Token Desc Example
d day 1
dd 0 prefixed day 01
D abbr day Mon
su date suffix st, nd, rd
M month number (1 based) 1 (for Jan)
MM 0 prefixed month 01
MMM abbreviated month name Jan
MMMM month name January
yy two digit year 16
yyyy four digit year 2016

Disabled Dates

Dates can disabled in a number of ways.

<script>
var state = {
    disabled: {
        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
        dates: [ // Disable an array of dates
            new Date(2016, 9, 16),
            new Date(2016, 9, 17),
            new Date(2016, 9, 18)
        ]
    }
}
</script>
<datepicker :disabled="state.disabled"></datepicker>

Highlight Dates

Dates can be highlighted (e.g. for marking an appointment) in a number of ways. Important: You can only highlight dates, that aren't disabled. Note: Both to and from properties are require to define a range of dates to highlight

<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
        dates: [ // Highlight an array of dates
            new Date(2016, 9, 16),
            new Date(2016, 9, 17),
            new Date(2016, 9, 18)
        ]
    }
}
</script>
<datepicker :highlighted="state.highlighted"></datepicker>

Translations

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

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

Available languages

Abbr Language
ar Arabic
bg Bulgarian
bs Bosnian
cs Czech
da Danish
de German
ee Estonian
en English Default
es Spanish
fi Finnish
fr French
he Hebrew
hu Hungarian
hr Croatian
id Indonesian
is Icelandic
it Italian
ja Japanese
ko Korean
lt Lithuanian
nb-no Norwegian Bokmål
nl Dutch
pl Polish
pt-br Portuguese-Brazil
ro Romanian
ru Russian
sk Slovak
sl-si Slovenian
sv Swedish
th Thai
tr Turkish
uk Ukrainian
vi Vietnamese
zh Chinese

Current Tags

  • 0.0.0                                ...           latest (3 years ago)

2 Versions

  • 0.0.0                                ...           3 years ago
  • 0.9.3                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |