CODEWITHSUNDEEP
vue.jsmomentjs
localhost
localhost

Reputation: 861

How to emit momentjs dates in correct format

I am trying to format my data to send it to parent component but it seem like it is not reactive

      if(this.selectedDate !== '' && this.selectedMonth !== '' && this.selectedDate !== '' ){
    this.$emit("emit-data",  this.selectedYr+"-"+moment().set(this.selectedDate) .format("DD")+"- "+moment().set(this.selectedMonth).format("MM"))
  }

It won't send the selected drop-down but default ones which were pre-selected on page load. But If I take off moment() format from the data being sent, it sent correct values but I still need that format the data be in e.g YYYY-DD-MM

Is there any way to do this is computed using setters and getters before emitting? I am not sure how but If there is a way?

Upvotes: 0

Views: 717

Answers (2)

Stark Buttowski
Stark Buttowski

Reputation: 1849

Try

this.$emit('emit-data', moment(new Date(this.selectedMonth + "-" + this.selectedDate + "-" + this.selectedYr)).format(YYYY-DD-MM))

You can also see these examples

UPDATE

In the above code, your data is processed in to moment date. The result of this can be formatted in to your desired format.

Example

If you want the date to be 15-JUL-2020, you can have

moment(/* your date */).format('DD-MMM-YYYY')

Your can be directly provided to moment like

this.$emit("emit-data", moment(this.selectedYr + "-" + this.selectedDate + "-" + this.selectedMonth).format("YYYY-DD-MM"))

The code will result something like 2020-15-07 based on the format.

Upvotes: 0

Niels Ganser
Niels Ganser

Reputation: 2380

Yes, you can absolutely use a reactive computed getter for this. Here is an example:

<div id="app">
  <parent-component />
</div>

const parentComponent = Vue.component('parent-component', {
  data () {
    return {
      formattedDate: null
    }
  },
  template: `
    <div>
      <p>You have selected: {{ formattedDate || "nothing yet" }}.</p>

      <child-component
        @emit-data="(payload) => formattedDate = payload"
      />
    </div>
  `
})

const childComponent = Vue.component('child-component', {
  data () {
    return {
      selectedDate: null,
      selectedMonth: null,
      selectedYear: null
    }
  },
  computed: {
    formattedDate () {
      if (![this.selectedDate, this.selectedMonth, this.selectedYear].every((el) => el)) return null
      
      return moment({
        day: this.selectedDate,
        // Months in Moment.js are 0-indexed!
        month: this.selectedMonth - 1,
        year: this.selectedYear
      }).format("YYYY-DD-MM")
    }
  },
  watch: {
    formattedDate (newVal) {
      this.$emit("emit-data", newVal)
    }
  },
  template: `
    <div>
      <input v-model="selectedDate" type="number" placeholder="Day" min="1" max="31" step="1">
      <input v-model="selectedMonth" type="number" placeholder="Month" min="1" max="12" step="1">
      <input v-model="selectedYear" type="number" placeholder="Year" min="1900" max="2100" step="1">
    </div>
  `
})

new Vue({
  el: "#app"
})

You can run the above interactively on https://jsfiddle.net/46vuLcy0/.

Upvotes: 2

Related Questions