希望可以有人帮帮我!我已经制定了一条指令,将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')
        }
    }
  })

10-05 20:30
查看更多