vue-date-text v1.0.9

Vue-Date-Text

A date-text Vue component. Compatible with Vue 2.x

Statement

Modify by vuejs-datepicker

Install

$ npm install vue-date-text --save

import DateText from 'vue-date-text';

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

Usage

<datetext></datetext>

default-value prop if passed should be a Date object

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

Use v-model for two-way binding

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

Use dateText if you want only this date can select use prop :disabled="true"

<script>
var dateText: [
    {
      date: '2017-07-10',
      text: 'only 5 seat'
    },
    {
      date: '2017-07-11',
      text: 'only 6 seat'
    }
]
methods: {
    validate (day) {
      if (day.text && day.text.split(' ')[1] < 6) {
        console.log('not enough seat')
        return false
      }
      return true
    }
}
</script>
<datetext :dateText="dateText" :validate="validate"></datetext>

Emits events

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

Inline always open version

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

Available props

Events

These events are emitted on actions in the datepicker

Date formatting

NB. This is not very robust at all - use at your own risk! Needs a better implementation. default 'yyyy-MM-dd'

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>
<datetext :disabled="state.disabled"></datetext>

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>
<datetext :highlighted="state.highlighted"></datetext>

Translations

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

<datetext language="es"></datetext>

Available languages