반응형
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
그리고 당신은 그것 대신에 그것들을 사용할 수 있다.이 경우에는 (문자를 포맷하기 위해) 조금 사용하고 바꾸었다.String
that은 에 대한 날짜 입력의 출력이다.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
반응형
'Programing' 카테고리의 다른 글
Linux의 기본 GUI API란? (0) | 2022.05.25 |
---|---|
Vue 1.x/2.x: $route 개체에서 vue-router 경로 URL 가져오기 (0) | 2022.05.25 |
다른 계산 속성을 호출할 때 정의되지 않은 Vue 계산 속성 (0) | 2022.05.25 |
상태 변경으로 업데이트되지 않는 Vue UI (0) | 2022.05.24 |
Java에서 c 함수 호출 (0) | 2022.05.24 |