希望可以有人帮帮我!我已经制定了一条指令,将Jasny Bootstrap插件更具体地包装在输入掩码中,一切顺利!
现在,我制作了一个由时刻支持的自定义过滤器,以格式化日期字段!
我从后端应用程序收到的日期格式为YYY-MM-DD,并且必须在 View 上显示为DD/MM/YYYY ...我已经尝试过v-model="date | myDate"
,但无法正常工作!
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>
如果有人感兴趣,就有JSBin!
提前致谢!
编辑:更好地解释我的期望=)
当页面首次加载时,输入内容会收到2015-06-26的值,我想将该值显示为DD/MM/YYYY,所以2015年6月26日!只有在我开始输入内容后,它才能正常工作!
最佳答案
我了解您要尝试执行的操作,但是,由于使用v模型时采用两种方式绑定(bind),因此最好在从服务器接收日期时对日期进行格式化,然后将其与所需的格式一起使用您的前端应用程序('DD/MM/YYYY'
)。
将数据发送回后端时,只需将其格式化回所需的服务器格式('YYYY-MM-DD'
)。
在您的Vue应用中,工作流程将如下所示:
new Vue({
el: 'body',
data: {
date: null,
},
methods: {
getDataFromServer: function() {
// Ajax call to get data from server
// Let's pretend the received date data was saved in a variable (serverDate)
// We will hardcode it for this ex.
var serverDate = '2015-06-26';
// Format it and save to vue data property
this.date = this.frontEndDateFormat(serverDate);
},
saveDataToServer: function() {
// Format data first before sending it back to server
var serverDate = this.backEndDateFormat(this.date);
// Ajax call sending formatted data (serverDate)
},
frontEndDateFormat: function(date) {
return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY');
},
backEndDateFormat: function(date) {
return moment(date, 'DD/MM/YYYY').format('YYYY-MM-DD');
}
}
});
这对我来说效果很好,希望对您有所帮助。
这是一个小玩意儿:
https://jsfiddle.net/crabbly/xoLwkog9/
语法更新:
...
methods: {
getDataFromServer() {
// Ajax call to get data from server
// Let's pretend the received date data was saved in a variable (serverDate)
// We will hardcode it for this ex.
const serverDate = '2015-06-26'
// Format it and save to vue data property
this.date = this.frontEndDateFormat(serverDate)
},
saveDataToServer() {
// Format data first before sending it back to server
const serverDate = this.backEndDateFormat(this.date)
// Ajax call sending formatted data (serverDate)
},
frontEndDateFormat(date) {
return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY')
},
backEndDateFormat(date) {
return moment(date, 'DD/MM/YYYY').format('YYYY-MM-DD')
}
}
})