VueJS установить значение даты как Дата вместо Строки - PullRequest
Новая
       38

VueJS установить значение даты как Дата вместо Строки

3 голосов
/ 24 февраля 2020

Мне нужно изменить тип значения DatePicker, и он должен возвращать значение как тип Date вместо String https://prnt.sc/r6vr3g. Но я не знаю, как я могу это сделать. Может кто-нибудь, пожалуйста, помогите мне?

Вот код: 

<template>
  <q-input
@focusin="onFocusIn"
:value="value"
@input="e => $emit('input', e.toString())"
@click="alert = true"
 >
<q-dialog v-model="alert">
  <q-date
    :value="value" @input="onInput"
    :mask="mask"
  />
</q-dialog>


<script>

    import _ from 'lodash'

    export default {
  props: {
    ..props
  },

  data () {
    return {
      alert: false,
      sValue: ''
    }
  },

  ..computed

  methods: {
    onInput (e) {
      let dateObj = new Date(e)
      this.$emit('input', dateObj)
      this.alert = false
    },

    onFocusIn (e) {
      e.target.blur()
    }
  }

}

</script>

<style type="text/css">

</style>


<div class="col">
   <s-datetime-picker v-model="data.dateStart" label="Date Start" required />
   {{ data.dateStart }}
</div>

Вот код для компонента datepicker и после этого si пример использования этого компонента .

Я редактировал код, потому что я изменил компонент. Теперь у меня есть другая ошибка, в поле ввода отображается сообщение «Недопустимая дата», и в консоли я получил эту ошибку «сбой для проп» значения. Ожидаемая строка со значением «Недопустимая дата», получена дата «

Ответы [ 2 ]

1 голос
/ 24 февраля 2020

Просто передайте значение, которое вы получаете в виде строки, new Date, он вернет объект даты. 

var dt = "2020-02-13T00:00"; // <-- this is the value you get from date picker
var dtObj = new Date(dt); // <-- this one is date type

Полный Vue Код 

<template>
  <div id="app">
    <input type="date" v-model="dateFromField">
    <button :click="showDate()">Submit</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data: function() {
    return {
      dateFromField: Date
    };
  },
  methods: {
    showDate() {
      console.log(this.dateFromField);
      console.log(typeof this.dateFromField);
      let newDate = new Date(this.dateFromField);
      console.log("conversion");
      console.log(newDate);
      console.log(typeof newDate);
    }
  }
};
</script>
1 голос
/ 24 февраля 2020

Отформатируйте излучающий объект перед излучением. 

<template>
  <q-datetime-picker
    ..more properties
    :value="value"
    @input="formatDate(e)"
  />
</template>

<script>

import _ from 'lodash'

export default {
  props: {
    ...all properties
  },

  computed: {

    sLabel () {
      if (!this.required || _.isUndefined(this.label)) return this.label
      return this.label + ' *'
    },

    sRules () {
      if (!this.required) return this.rules

      let rule = val => { if (val.length === 0) return 'This field is Required' }
      if (_.isUndefined(this.rules)) return [ rule ]

      return (_.cloneDeep(this.rules)).push(rule)
    }

  },
 formatDate(val){
   let dateObj = new Date(val);
   this.$emit('input', dateObj);
 }

}

</script>

<style type="text/css">

</style>


<div class="col">
   <s-datetime-picker v-model="data.dateStart" label="Date Start" required />
   {{ data.dateStart }}
</div>

Отформатируйте дату в соответствии с вашими потребностями в функции formatDate. Надеюсь, это поможет вам,

...