Skip to content
This repository has been archived by the owner on Jan 24, 2020. It is now read-only.
/ vue-model-date Public archive

A directive to handle binding between date input elements, and date model properties defined on a vue component

License

Notifications You must be signed in to change notification settings

mrellipse/vue-model-date

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-model-date

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

Installation

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

Usage

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

Directive Options

Binding options recognized by the directive

NameTypeRequiredDescription
valueString | DateY

identifies the model property to bind to

patternStringN

used for parsing and formatting. defaults to 'YYYY-MM-DD'

see [link]

adjustDateFunction(Date,Date) : Date | Null N

if the date portion of provided args is different, then return (arg2) +/- days

if the date portion of provided args is the same, then return null

equalFunction(Date,Date) : BooleanN

perform an equality check on the date portion of the provided args

parseFunction(String,String) : DateN

parse the provided string (arg1) using the specified pattern (arg2)

formatFunction(Date,String) : StringN

format the provided date (arg1) using the specified pattern (arg2)

Examples

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 } }
})

Usage

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.

simple

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() };
}

binding to an object literal for options

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() };
}

bind to model property for options

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
        }
    };
}

no native support

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
        }
    };
}

custom hooks

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;
            }
        }
    };
}

Authors

Contributing

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

License

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

Acknowledgments

About

A directive to handle binding between date input elements, and date model properties defined on a vue component

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published