Start vue-datepicker with current date and change style

Question

Start vue-datepicker with current date and change style

Navigation

#1 by (0 votes)

0

I'm using vuejs-datepicker to deal with the date field of the form, so far I have not been able to make the datepicker start with the date of the current day and also not be able to select the days before the date that is being starting

I'm taking this component link

 <template>
   <form>
        <datepicker :bootstrap-styling="true"
                    class="form-control"
                    :open-date="openDate"
                    :format="customFormatter"
                    v-model="event_at">
        </datepicker>
   </form>
 </template>
 <sctipt>
  import Datepicker from 'vuejs-datepicker';
  import moment from "moment";
  export default {  
   components: { 
       Datepicker,
   },
   data () {
     return {
          event_at: '',
          openDate: new Date(),
   },
   method: {
      customFormatter(date) {
            return moment(date).format('D MMMM YYYY');
      },
   }
}
</script>

Also the input in the view remains of this color:

Any ideas? I occupy Vuejs 2

javascript vue.js

asked by Felipe 27.04.2018 в 00:55

source

1 answer

XSL: If you perform a data validation and modify this data ASP.NET MVC 5 consuming api

score 0 · Answer 1

The main idea of why you never show the current date is simply because you are assigning a v-model blank event_at and that directive is the priority for a value in a component.

For setear to the current date you can simply say that event_at of data equals new Date() (so far is the only solution for the library)

Component

<template>
   <form>
        <datepicker 
        :bootstrap-styling="true"
        class="form-control"
        :format="customFormatter"
        v-model="event_at"></datepicker>
   </form>
 </template>
 <sctipt>
  import Datepicker from 'vuejs-datepicker';
  import moment from "moment";
  export default {  
   components: { 
       Datepicker,
   },
   data () {
     return {
          event_at: new Date(),
   },
   method: {
      customFormatter(date) {
            return moment(date).format('D MMMM YYYY');
      },
   }
}
</script>