DatePicker 日期选择器 APP

该方法或组件支持移动端小程序调用

PC

该方法或组件支持桌面端小程序调用

<template>
  <List>
    <span slot="header">时间</span>
    <Item class="test-style" arrow="horizontal" @onClick="handleClick">
      <div slot="title">Time</div>
      <div slot="content">{{pickTime}}</div>
    </Item>
  </List>
  <date-picker
    type="time"
    ref="timePicker"
    v-model="demoTime"
    @confirm="confirm"
    format="hh时mm分"
  />
</template>
<script>
  export default {
    data () {
      return {
        demoTime: '12:23',
        pickTime: '12:23'
      }
    },
    methods: {
      handleClick () {
        this.$refs.timePicker.open()
        console.log('handle list item click')
      },
      confirm (value) {
        this.pickTime = value
        console.log(this.pickTime)
      }
    }
  }
</script>

<template>
  <List>
    <span slot="header">日期</span>
    <Item class="test-style" arrow="horizontal" @onClick="handleClickDate">
      <div slot="title">Date</div>
      <div slot="content">{{pickDate}}</div>
    </Item>
  </List>
  <date-picker
    type="date"
    ref="datePicker"
    v-model="demoDate"
    @confirm="confirmDate"
    format="yyyy年MM月dd日"
  />
</template>
<script>
  export default {
    data () {
      return {
        demoDate: new Date('2017/05/12'),
        pickDate: '2017-05-12'
      }
    },
    methods: {
      handleClickDate () {
        this.$refs.datePicker.open()
        // console.log('handle list item click')
      },
      confirmDate (value) {
        this.pickDate = value
        console.log(this.pickDate)
      }
    }
  }
</script>

<template>
  <List>
    <span slot="header">日期时间</span>
    <Item class="test-style" arrow="horizontal" @onClick="handleClickDateTime">
      <div slot="title">DateTime</div>
      <div slot="content">{{pickDateTime}}</div>
    </Item>
  </List>
  <date-picker
    type="datetime"
    ref="datetimePicker"
    v-model="demoDateTime"
    @confirm="confirmDateTime"
    format="yyyy年MM月dd日hh时mm分"
  />
</template>
<script>
  export default {
    data () {
      return {
        demoDateTime: new Date('2017/05/12 12:30'),
        pickDateTime: '2017/05/12 12:30'
      }
    },
    methods: {
      handleClickDateTime () {
        this.$refs.datetimePicker.open()
        // console.log('handle list item click')
      },
      confirmDateTime (value) {
        this.pickDateTime = value
        // console.log(this.pickDateTime)
      }
    }
  }
</script>

<template>
  <List>
    <span slot="header">年</span>
    <Item class="test-style" arrow="horizontal" @onClick="handleClickYear">
      <div slot="title">year</div>
      <div slot="content">{{pickYear}}</div>
    </Item>
  </List>
  <date-picker
    type="year"
    ref="yearPicker"
    v-model="demoYear"
    @confirm="confirmYear"
    format="yyyy年"
  />
</template>
<script>
  export default {
    data () {
      return {
        demoYear: new Date('2017'),
        pickYear: '2017'
      }
    },
    methods: {
      confirmYear (value) {
        this.pickYear = value
      },
      handleClickYear () {
        this.$refs.yearPicker.open()
      }
    }
  }
</script>

<template>
  <List>
    <span slot="header">年月</span>
    <Item class="test-style" arrow="horizontal" @onClick="handleClickMonth">
      <div slot="title">month</div>
      <div slot="content">{{pickMonth}}</div>
    </Item>
  </List>
  <date-picker
    type="month"
    ref="monthPicker"
    v-model="demoMonth"
    @confirm="confirmMonth"
    format="yyyy年MM月"
  />
</template>
<script>
  export default {
    data () {
      return {
        demoMonth: new Date('2017/05'),
        pickMonth: '2017/05'
      }
    },
    methods: {
      handleClickMonth () {
        this.$refs.monthPicker.open()
      },
      confirmMonth (value) {
        this.pickMonth = value
      }
    }
  }
</script>

  <template>
    <List>
      <span slot="header">农历日期</span>
      <Item class="test-style" arrow="horizontal" @onClick="handleClickLunarDate">
        <div slot="title">Date</div>
        <div slot="content">{{pickLunarDate}}</div>
      </Item>
      <date-picker
        type="date"
        ref="datePickerLunar"
        v-model="demoDate"
        @confirm="confirmLunarDate"
        format="yyyy年MM月dd日"
        :showLunar="true"
      />
    </List>
  </template>
  <script>
  export default {
    data () {
      return {
        pickLunarDate: '2021年十月廿八'
      }
    },
    methods: {
      handleClickLunarDate () {
        this.$refs.datePickerLunar.open()
      },
      confirmLunarDate (res) {
        this.pickLunarDate = res.lunarVal
      }
    }
  }
</script>