This is a helper directive, that provides functionality similar to v-model for handling binding between

• date model properties and
• html input elements of type date or string

$ npm install --save-dev vue-model-date

Import the directive into each component as required, or register globally. The date-fns library is used for formatting and parsing. If model property being bound to also contains a time portion, this will remain intact

Most default behaviour can be over-ridden by providing hook function as options when binding

Binding options recognized by the directive

These assume you have registered the directive similar to below

import { Vue } from 'vue';
import { VueModelDate } from 'vue-model-date';

new Vue({
    template: ...,
    directives: {
        'model-date': VueModelDate
    },
    data: () => { return { myDate: date } }
})

If the browser has native support for date input controls, then usage is straight forward. The directive will ignore any custom formatting in this scenario, as the default is sufficient.

binds to a model property. This assumes the browser has native support for date input controls.

<input type="date" v-model-date="myDate"/>

data: function() {
    return { myDate: new Date() };
}

binds to the object literal provided. Below specifies an optional formatting pattern, to be used if the browser does not have native support for date control

<input type="date" v-model-date="{ value: myDate, pattern: 'MM-DD-YYYY' }"/>

data: function() {
    return { myDate: new Date() };
}

binds to a model property. When using this syntax, you must supply a string for the value property)

<input type="date" v-model-date="opts"/>

data: function() {
    return {
        myObject: {
            myDate: new Date()
        },
        opts : {
            value: 'myObject.myDate' // binding expression to identify the model property,
            pattern: 'MM-DD-YYYY' // custom parse/format pattern
        }
    };
}

If the browser does not have native support for date input, it will degrade to a text input. In this scenario, a property 'hasNativeSupport' will be added to the dataset of HTML element.

You should then further restrict user input by conditionally adding 'pattern' to the element as shown below

<input type="text" v-model-date="opts" :pattern="($el.dataset.hasNativeSupport ? false : opts.validator)" />

data: function() {
    return {
        myDate: new Date(),
        opts : {
            value: 'myDate', // binding expression to identify the model property,
            pattern: 'MM-DD-YYYY', // custom parse/format pattern
            validator: '[0-9][0-9]-[0-9][0-9]-[0-9][0-9][0-9][0-9]' // the custom regex string to be used for fallback scenario
        }
    };
}

the example below supplies a custom function hook for equality checking (performed after UI changes occur). when you provide a hook, the context of this object will be the directive instance

<input type="date" v-model-date="opts"/>

data: function(){
    return {
        myDate: new Date(),
        opts : {
            value: 'myDate' // note use of string as binding expression,
            equal: (oldValue,newValue) => {
                // ... customize how the equality comparison is done
                return true;
            }
        }
    };
}

• mrellipse

There are no plans to alter/change this code (besides any bug fixes)

This project is licensed under the MIT License - see the LICENSE file for details

• vuejs.org
• date-fns.org