मैं Date-FNS में नया हूं और मुझे इस उदाहरण को काम करने की जरूरत है वीयूजेएस में:

import { format, formatDistance, formatRelative, subDays } from 'date-fns'

format(new Date(), '[Today is a] dddd')
//=> "Today is a Wednesday"

formatDistance(subDays(new Date(), 3), new Date())
//=> "3 days ago"

formatRelative(subDays(new Date(), 3), new Date())
//=> "last Friday at 7:26 p.m."

इसे काम पर कैसे लाया जाए?

6
Tom 29 मार्च 2018, 20:35

2 जवाब

सबसे बढ़िया उत्तर

पल जेएस की तरह, आपको केवल तारीख पुस्तकालय का उपयोग करने की आवश्यकता है, इसे अपने डेटा में आयात और शामिल करना है:

import { format, formatDistance, formatRelative, subDays } from 'date-fns'

export default {
  data () {
    return {
      format,
    }
  }
}

और अब अपने टेम्पलेट में, आप format का उपयोग इस प्रकार कर सकते हैं:

<template>
 <p> Today's date is: {{ format(new Date(), 'dddd')  }} </p>
</template>

लोकेल के साथ:

मैंने लोकेल की कोशिश नहीं की है लेकिन यह बहुत सीधे आगे लगता है। मैनुअल के अनुसार मुझे लगता है कि यह काम करना चाहिए।

import { format, formatDistance, formatRelative, subDays } from 'date-fns'
import es from 'date-fns/locale/es'
window.locale = 'es'

export default {
  data () {
    return {
      format,
    }
  },

  methods: {
    getFormat () {
      return this.format(new Date(), 'dddd', {locale: window.locale})
    } 
  }
}

और अब अपने टेम्पलेट में, आप format का उपयोग इस प्रकार कर सकते हैं:

<template>
 <p> Today's date is: {{ getFormat() }} </p>
</template>

मुझे लगता है कि अगर आप इसके साथ कुछ मिनट बिताते हैं, तो आप अपने लिए एक बेहतर कामकाजी समाधान पा सकते हैं।

16
samayo 22 अक्टूबर 2018, 00:16

दिनांक-fns के संस्करण v1.30.1 में आपको आयात करना होगा /आवश्यकता date-fns/something से।

इसे Vuejs के साथ काम करने के लिए:

import format from "date-fns/format"
import distanceInWords from "date-fns/distance_in_words"
import subDays from "date-fns/sub_days"

export default {
  name: "MyComponent",
  computed: {
    inWords () { return distanceInWords(subDays(new Date(), 3), new Date()) },
    today () { return format(new Date(), '[Today is a] dddd') },
  },
}

और टेम्पलेट टैग:

<template>
  <div>
    <p>{{ inWords }}</p>
    <p>{{ today }}</p>
  </div>
</template>
2
Dmitry Rocha 8 जिंदा 2019, 21:29