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
Name | Type | Required | Description |
---|---|---|---|
value | String | Date | Y | identifies the model property to bind to |
pattern | String | N |
used for parsing and formatting. defaults to 'YYYY-MM-DD' see [link] |
adjustDate | Function(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 |
equal | Function(Date,Date) : Boolean | N |
perform an equality check on the date portion of the provided args |
parse | Function(String,String) : Date | N |
parse the provided string (arg1) using the specified pattern (arg2) |
format | Function(Date,String) : String | N |
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.
{ return myDate: ;}
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
{ return myDate: ;}
bind to model property for options
binds to a model property. When using this syntax, you must supply a string for the value property)
{ return myObject: myDate: 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
{ return myDate: 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
{ return myDate: opts : value: 'myDate' // note use of string as binding expression, { // ... 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