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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/46708110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:33:49  来源:igfitidea点击:

Convert date format in Javascript using VueJS

javascriptdatevue.jsflatpickr

提问by RobG

I have a date format of 19 Oct 2017and want to convert it to this format 20171019

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

Is there a quick way of doing this? I am using FlatPickrin VueJs. Please find my code below if its any help.

有没有一种快速的方法来做到这一点?我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;
    })
  }
}

回答by Md.Mostafijur Rahman

You can do this easily:

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

  import moment from 'moment'

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

Then:

然后:

format_date(date)

回答by ricardoorellana

Another good option is to use moment.jslib to format the date, you should install it first in your project through npm npm i --save moment(or see more options on official website) and then you only would have to import it in your component and change the date to the desired format:

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

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

回答by RobG

You can break up the string in much the same way a parser would, but avoid creating a date, then format the parts. That will avoid the vagaries of the built-in Date parser:

您可以采用与解析器大致相同的方式拆分字符串,但要避免创建日期,然后格式化各部分。这将避免内置日期解析器的变幻莫测:

function reformatDate(s) {
  function z(n){return ('0'+n).slice(-2)}
  var months = [,'jan','feb','mar','apr','may','jun',
                 'jul','aug','sep','oct','nov','dec'];
  var b = s.toLowerCase().split(' ');
  return b[2] + z(months.indexOf(b[1])) + z(b[0]);
}

console.log(reformatDate('19 Oct 2017'));
console.log(reformatDate('1 Jan 2017'));

回答by Walk

You can do it by creating new Date object using your string.

您可以通过使用字符串创建新的 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)

回答by Vladimir Salguero

Use moment

使用时刻

First we need to install moment npm package that will allow to change date format.

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

npm install moment

Now you can create a global function to set the format you want, to do so you must open the file resources/js/app.jsand put the following code:

现在您可以创建一个全局函数来设置您想要的格式,为此您必须打开文件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')
    }
});

Now in all your js components you can apply the format as follows:

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

{{ response.create_at | formatDate }}