Bonsoir à tous

Je suis en train de tester VueJs avec un cas concret, la création d'un datepicker et timepicker.
Je suis face à une erreur lié à une mutation d'une propriété "props". J'ai très bien compris qu'il était complètement déconseillé de faire une telle mutation, mais le soucis c'est que j'ai du mal à voir comment faire autrement.

Sur la page index.html (je suis en local), j'utilise le code suivant:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<datepicker value="2015-02-02 22:10:00" format="DD-MM-YYYY HH:mm" name="date"></datepicker>
Voici mon component qui permet de charger le futur datepicker : Datepicker.vue

Code vuejs : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<style>
  .datepicker__agenda{
    position:relative;
  }
</style>
 
<template>
  <div class="datepicker__agenda">
    <input type="text" :value="date_formatted">
    <input type="text" :name="name" :value="date_raw">
    <datepicker-agenda :date="date"></datepicker-agenda>
  </div>
</template>
 
<script>
import moment from 'moment'
import DatepickerAgendaComponent from './DatepickerAgenda'
moment.locale('fr')
 
export default {
  components: {
    'datepicker-agenda': DatepickerAgendaComponent
  },
  props: {
    value: {type: String, required: true},
    format: {type: String, default: 'YYYY-MM-DD hh:mm:ss'},
    name: {type: String}
  },
  data: function () {
    return {
      date: moment(this.value, 'YYYY-MM-DD hh:mm:ss')
    }
  },
  computed: {
    date_formatted: function () {
      return this.date.format(this.format)
    },
    date_raw: function () {
      return this.date.format('YYYY-MM-DD HH:mm:ss')
    }
  }
 
}
</script>

Et enfin de code qui pose problème. Fichier DatepickerAgenda.vue
Code vuejs : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<style lang="scss">
  $header-height: 60px;
  $day-size: 41px;
  .datepicker{
    font-family: 'Roboto', sans-serif;
    position: absolute;
    top:100%;
    width: 315px;
    z-index:5;
    background-color: #fff;
    box-shadow: 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22);
  }
  .datepicker__header{
    background-color: #0097a7;
    color: #fff;
    padding: 20px;
    height: $header-height;
  }
  .datepicker__year{
    opacity: 0.7;
    margin-bottom: 10px;
    line-height: 16px;
  }
  .datepicker__date{
    font-size: 32px;
    line-height: 32px;
  }
  .datepicker__week{
    line-height: 12px;
    font-style: 12px;
    color: rgba(0,0,0,0.8);
    padding: 0 14px;
  }
  .datepicker__weekday{
    float: left;
    width: $day-size;
    text-align: center;
  }
  .datepicker__days{
    margin: 14px;
  }
  .datepicker__day{
    position: relative;
    width: $day-size;
    height: $day-size;
    line-height: $day-size;
    cursor: pointer;
    float: left;
    text-align: center;
    transition: all 450ms cubic-bezier(0.23,1,0.32,1);
  }
  .datepicker__day__effect{
    position: absolute;
    top:2px;
    left: 2px;
    background-color: rgb(0,151,167);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: all 450ms cubic-bezier(0.23,1,0.32,1);
    transform: scale(0);
    opacity: 0;
  }
  .datepicker__day__text{
    position: relative;
  }
  .datepicker__day:hover{
    color: #fff;
    .datepicker__day__effect{
      transform: scale(1);;
      opacity: 0.6;
    }
  }
  .datepicker__day.selected{
    color: #fff;
    .datepicker__day__effect{
      transform: scale(1);
      opacity: 1
    }
  }
</style>
 
<template>
  <div class="datepicker">
    <div class="datepicker__header">
      <div class="datepicker__year">
        {{ year }}
      </div>
      <div class="datepicker__date">
        {{ date_formatted }}
      </div>
    </div>
    <div class="datepicker__week">
      <div v-for="day in days" track-by="$index" :key="day.id" class="datepicker__weekday">
        {{ day }}
      </div>
    </div>
    <div class="datepicker__days">
      <div class="datepicker__day" v-bind:style="{width: ( month.getWeekStart() * 41 ) + 'px' }"></div>
      <div class="datepicker__day" v-on:click="selectDate(day)" v-for="day in month.getDays()" :key="day.id" :class="{selected: isSelected(day)}">
        <span class="datepicker__day__effect"></span>
        <span class="datepicker__day__text">{{ day.format('D') }}</span>
      </div>
    </div>
  </div>
</template>
 
<script>
import Month from '../modules/month'
export default {
  props: ['date'],
  data () {
    return {
      days: ['L', 'M', 'M', 'J', 'V', 'S', 'D'],
      month: new Month(this.date.month(), this.date.year())
    }
  },
  methods: {
    isSelected: function (day) {
      return this.date.set({h: 1, m: 1}).unix() === day.set({h: 1, m: 1}).unix()
    },
    selectDate: function (day) {
      this.date = day
    }
  },
  computed: {
    year () {
      return this.date.format('Y')
    },
    date_formatted () {
      return this.date.format('dddd DD MMM')
    }
  }
}
</script>

En fait, ce que je souhaite, c'est que lorsque je clique sur date, cette dernière change dans mon début de datepicker. Même si cela fonctionne, cela va en l'encontre des propriétés "props". Pourriez vous m'aider?

Merci d'avance.