使用 VueJS 在 Javascript 中转换日期格式

Question

我有一个日期格式，19 Oct 2017并想将其转换为这种格式20171019

有没有一种快速的方法来做到这一点？我FlatPickr在 VueJs 中使用。如果有帮助，请在下面找到我的代码。

import flatPickr from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import Navigation from './Navigation'
import bus from '../bus'
export default {
  data() {
    return {
      showPanel: false,
      isClosed: false,
      arrival: null,
      departure: null,
      config: {
        dateFormat: "Ymd"
      }
    }
  },
  components: {
    flatPickr
  },
  methods: {
    closeMenu: function() {
      this.$store.state.showBooking = false;
    }
  },
  mounted() {
    bus.$on('show-booking', () => {
      this.showPanel = true;
    })
  }
}

Answer 1

使用时刻

首先，我们需要安装允许更改日期格式的 moment npm 包。

npm install moment

现在您可以创建一个全局函数来设置您想要的格式，为此您必须打开文件resources/js/app.js并输入以下代码：

import moment from 'moment';

Vue.filter('formatDate', function(value) {
    if (value) {
        return moment(String(value)).format('MM/DD/YYYY hh:mm')
    }
});

现在在所有 js 组件中，您可以按如下方式应用格式：

{{ response.create_at | formatDate }}

Answer 2

您可以轻松地做到这一点：

  import moment from 'moment'

  methods: { 
      format_date(value){
         if (value) {
           return moment(String(value)).format('YYYYMMDD')
          }
      },
   },

然后：

format_date(date)

Answer 3

您可以通过使用字符串创建新的 Date 对象来完成此操作。

var date = new Date("19 Oct 2017");

var result = "" + date.getFullYear() + ((date.getMonth() + 1) > 9 ? '' : '0') + (date.getMonth() + 1) + (date.getDate() > 9 ? '' : '0') + date.getDate();

console.log(result)

Answer 4

另一个不错的选择是使用moment.js lib 来格式化日期，您应该首先通过 npm 将其安装在您的项目中npm i --save moment（或在官方网站上查看更多选项），然后您只需要将其导入到您的组件中并更改日期到所需的格式：

import moment from 'moment'
const formattedDate = moment('19 Oct 2017').format('YYYYMMDD')
console.log(formattedDate) //20171019