Mam nadzieję, że ktoś może mi pomóc! Nakreśliłem dyrektywę owijającą Jasny Bootstrap Plugin bardziej konkretnie o masek wejściowych i wszystko idzie dobrze!Vue js zastosuj filtr na modelu v w polu wejściowym
Teraz zrobiłem niestandardowy filtr obsługiwany przez moment, aby sformatować pole daty!
Format daty, który otrzymuję z aplikacji backendu, to YYY-MM-DD i muszę pokazać w widoku jako DD/MM/YYYY ... Próbowałem już v-model="date | myDate"
, ale nie działało poprawnie!
JS
Vue.directive('input-mask', {
params: ['mask'],
bind: function() {
$(this.el).inputmask({
mask: this.params.mask
});
},
});
Vue.filter('my-date', function(value, formatString) {
if (value != undefined)
return '';
if (formatString != undefined)
return moment(value).format(formatString);
return moment(value).format('DD/MM/YYYY');
});
var vm = new Vue({
el: 'body',
data: {
date: '2015-06-26',
}
});
HTML
<label>Date</label>
<input type="text" class="form-control" v-input-mask mask="99/99/9999" v-model="date">
<p>{{ date | myDate 'dd/mm/yyyy' }}</p>
Istnieje JSBin jeśli ktoś jest zainteresowany!
Z góry dziękuję!
EDIT: Wyjaśniając lepiej czego oczekuję =)
Gdy strona najpierw załadować wejście otrzymać wartość 2015-06-26 i chciałbym pokazać, że wartość jako DD/MM/YYYY tak 26.06.2015! Działa poprawnie dopiero po tym, jak zacznę coś pisać!
"To nie działało poprawnie" nie jest wystarczająco opisowe. Wyjaśnij * jak * nie działał poprawnie. Czego się spodziewałeś i co zrobiłeś? –
Sorry @MattJohnson! Właśnie dodałem lepsze wyjaśnienie na dole! Sprawdź, czy rozumiesz, proszę! –
Należy zauważyć, że d/m/yi m/d/r są niejednoznaczne, o wiele lepiej używać nazwy miesiąca takiej jak "10-kwi-2016". – RobG