VANtを使ってDatetimePicker日付の選択操作を完了します。

効果の展示:

コードの展示:

<template>
 <div id="date_time_picker">
 
 <van-button plain type="primary" @click="showPopFn()">      </van-button>
 <van-field v-model="timeValue" placeholder="       " readonly />
 <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
 <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()" @cancel="cancelFn()" />
 </van-popup>
 
 </div>
</template>

 
<script>
 export default {
 data() {
 return {
 msg: '',
 currentDate: new Date(),
 changeDate: new Date(),
 show: false, //        
 timeValue: ''
 }
 },
 methods: {
 showPopFn() {
 this.show = true;
 },
 showPopup() {
 this.show = true;
 },
 changeFn() { //       
 this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (      )
 },
 confirmFn() { //     
 this.timeValue = this.timeFormat(this.currentDate);
 this.show = false;
 },
 cancelFn(){
 this.show = true;
 },
 timeFormat(time) { //       2019-09-08
 let year = time.getFullYear();
 let month = time.getMonth() + 1;
 let day = time.getDate();
 return year + ' ' + month + ' ' + day + ' '
 }
 },
 mounted() {
 this.timeFormat(new Date());
 }
 }
</script>
 
<style>
</style>

注意：必要に応じて導入したら、メール・jsに該当するファイルを導入してください。

// main.js         
import {Button} from 'vant'
import { DatetimePicker } from 'vant';
import { Popup } from 'vant';
import { Field } from 'vant'; 
 
Vue.use(Button)
Vue.use(DatetimePicker)
Vue.use(Popup)
Vue.use(Field);

-----終わります。
補足の知識：小さいプログラムはvantコンポーネントの倉庫の中のDatetimePickerの時間の選択の使うことを使って、およびどのように中の関数を使いますか？
小さいプログラムはvantコンポーネントの倉庫の中のDatetimePickerの時間の選択の使うことを使いますか？
私は小さいプログラムにvantライブラリのタイムセレクタを入れたいので、vantの公式文書を見てみました。中の話があまりにも簡潔で、私の目にとまりました。
第一のポイントが分かりませんが、例が全部書いてあります。コードはまだ貼っていません。基本例のコードだけを貼りました。

以下のコード:

効果も上図の効果ではありません。
いくつかのパラメータの説明によって、私も大きな輪を許しました。これらのパラメータを変えることによって、このスタイルに成功しました。
誤解される説明：

後はこのタイプをyear-month-timeに変更すればいいです。具体的なコードは以下の通りです。

<van-datetime-picker
       type="year-month-time"
       value="{{ currentDate }}"
       min-date="{{ minDate }}"
       bind:input="onInput"
       bind:confirm="onConfirm"
       bind:change="onChange"
  />
 
data:{
   minHour: 0,
  maxHour: 24,
  minDate: new Date().getTime(),
  currentDate: new Date().getTime(),
} 
 
 onInput(event) {
  this.setData({
   currentDate: event.detail,
  });
 },

上のような効果が現れます。
第二のポイントは分かりません。どのようにchangeの関数を使っていますか？

解決策：中のevent.detailを使ってget Valuesを呼び出して、event.getValues()を使うことができません。

 onChange(event){
 this.setData({
  reserveCopyTime:event.detail.getValues(),
 })
  
 },

以上のVANtを使ってDatetimePicker日付のセレクタ操作は小编を使って皆さんに提供した内容の全部です。