VueJS: datetime을 바인딩하는 방법?

VueJS: datetime을 바인딩하는 방법?

다음 속성을 가진 JSON 개체를 WebAPI에서 수신함:

"BirthDate": "2018-02-14T15:24:17.8177428-03:00",

HTML:

<input type="date" v-model="BirthDate" />

VueJS를 사용하여 해당 개체를 바인딩하지만 VueJS는 콘솔에서 다음과 같은 메시지를 전달한다.

The specified value "2018-02-14T15:24:17.8177428-03:00" does not conform to the required format, "yyyy-MM-dd".

이 건에 대해서는 2018-02-14만 해당되며, 다른 정보는 폐기할 수 있다.

나는 날짜 시간을 필수 형식으로 변환하기 위해 양방향 필터를 만들려고 했지만 성공하지 못했다.VueJS 양방향 필터 참조

해당 날짜/시간 형식을 HTML 날짜 입력의 필요한 날짜 형식으로 변환하고 바인딩하는 방법

고려하다myDate다음 항목을 사용할 수 있는 자산:

<input type="date" :value="myDate && myDate.toISOString().split('T')[0]"
                   @input="myDate = $event.target.valueAsDate">

이후v-model 그리고 당신은 그것 대신에 그것들을 사용할 수 있다.이 경우에는 (문자를 포맷하기 위해) 조금 사용하고 바꾸었다.Stringthat은 에 대한 날짜 입력의 출력이다.Date사물과 부차적인 것.

아래의 데모 및 주의사항을 확인하십시오.

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    myDate: new Date('2011-04-11T10:20:30Z')
  },
  methods: {
    setMyDateToToday() {
    	this.myDate = new Date();
    },
    addADayToMyDate() {
      if (this.myDate) // as myDate can be null
        // you have to set the this.myDate again, so vue can detect it changed
        // this is not a caveat of this specific solution, but of any binding of dates
        this.myDate = new Date(this.myDate.setDate(this.myDate.getDate() + 1));
    },
  }
});
// Notes:
// We use `myDate && myDate.toISOString().split('T')[0]` instead
// of just `myDate.toISOString().split('T')[0]` because `myDate` can be null.

// the date to string conversion myDate.toISOString().split('T')[0] may
// have timezone caveats. See: https://stackoverflow.com/a/29774197/1850609

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>

  <input type="date" :value="myDate && myDate.toISOString().split('T')[0]"
                     @input="myDate = $event.target.valueAsDate">

  <p>
  <code>
  myDate: {{ myDate }}</code>
  </p>

  <button @click="setMyDateToToday">Set date one to today</button>
  <button @click="addADayToMyDate">Add a day to my date</button>
</div>

나는 이것이 vueJs , 입력과 관련이 없다고 생각한다.type="date"YYYY-MM-DD 형식의 예상 날짜 또는 빈 날짜: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date, 참조

날짜와 시간 필드로 날짜 객체를 분할하는 것이 좋을 것이다.

@acdcjunior에 대한 수정은 이것이 하루까지 꺼지면 안 된다는 것이다.

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    myDate: new Date('2011-04-11T10:20:30Z')
  },
  methods: {
    setMyDateToToday() {
        this.myDate = new Date();
    },
    addADayToMyDate() {
      if (this.myDate) // as myDate can be null
        // you have to set the this.myDate again, so vue can detect it changed
        // this is not a caveat of this specific solution, but of any binding of dates
        this.myDate = new Date(this.myDate.setDate(this.myDate.getDate() + 1));
    },
    getDateClean(currDate) {
        // need to convert to UTC to get working input filter
        console.log(currDate);
        let month = currDate.getUTCMonth() + 1;
        if (month < 10) month = "0" + month;
        let day = currDate.getUTCDate();
        if (day < 10) day = "0" + day;
        const dateStr =
            currDate.getUTCFullYear() + "-" + month + "-" + day + "T00:00:00";
        console.log(dateStr);
        const d = new Date(dateStr);
        console.log(d);
        return d;
    }
  }
});
// Notes:
// We use `myDate && myDate.toISOString().split('T')[0]` instead
// of just `myDate.toISOString().split('T')[0]` because `myDate` can be null.

// the date to string conversion myDate.toISOString().split('T')[0] may
// have timezone caveats. See: https://stackoverflow.com/a/29774197/1850609

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>

  <input type="date" :value="myDate && myDate.toISOString().split('T')[0]"
                     @input="myDate = getDateClean($event.target.valueAsDate)">

  <p>
  <code>
  myDate: {{ myDate }}</code>
  </p>

  <button @click="setMyDateToToday">Set date one to today</button>
  <button @click="addADayToMyDate">Add a day to my date</button>
</div>

참조URL: https://stackoverflow.com/questions/48794066/vuejs-how-to-bind-a-datetime