Tutorial - How to Use DatePicker with Vue.js

Yii 2.0 Tips, Snippets and Tutorials
1

Ok here’s an annoying thing.

You are so used to using the DatePicker widget, but now you have a form with a lot of computation inside. So you decided to use Vue.js

<div id='app'>   </div>

What do you do?

Here are the Steps to solve it

  1. Install vue-bootstrap-datetimepicker
    You can simply put this in the composer ‘required’

  2. Install moment/moment

  3. Wire them up by including the files with AppAsset

source = ‘@vendor/…path to file’

look for the moment.js and the datepicker.js

  1. Include the component in the Vue object
var app = new Vue({
	el: '#app',
	data: {
        },

	
	components: {
                     vuejsDatepicker
    },

  1. You will not be editing it, but rather copying the datepick to your activeform input using the :value => “dateF”

  2. The datepicker sets the date in an annoying JS format, so you’ll need to apply a transformation to put it into the YYYY-MM-DD format that we love in MariaDB.

			let date_ = new Date(this.from)
			
			if(isNaN(date_.getTime())) {
				console.log('invalid');
				return '';
			}
			return moment(date_).format("YYYY-MM-DD")

Here I test if the date is valid, and then use moment.js to format it through a computed event.

1 Like