FantMini

DatePicker 日期选择

时间选择器，支持日期、年月、时分秒等维度。

代码演示

选择年月日

<hd-date-picker id="hd-date-picker"></hd-date-picker>

// uni_modules
import { showDatePicker } from '@/uni_modules/fant-mini'
// npm
import { showDatePicker } from 'fant-mini'
export default {
  data(){
    return {
      date:"" // 日期
    }
  }
  mounted() {
    this.open()
  },
  methods: {
    open() {
      let currentDate: number | string = new Date().getTime()
      if (this.date) {
        // iOS构造日期对象时不支持传入yyyy-MM-dd格式的日期，故需把-替换成/
        currentDate = new Date(this.date.replace(/-/g, '/')).getTime()
      }
      showDatePicker({
        type: 'date',
        currentDate: currentDate,
        success: (res) => {
          if (res.date) {
            this.date = res.date
          }
        },
        fail: () => {}
      })
    }
  }
}

选择时分秒

<hd-date-picker id="hd-date-picker"></hd-date-picker>

// uni_modules
import { showDatePicker } from '@/uni_modules/fant-mini'
// npm
import { showDatePicker } from 'fant-mini'
export default {
  data(){
    return {
      date:"" // 日期
    }
  }
  mounted() {
    this.open()
  },
  methods: {
    open() {
      let currentDate: number | string = new Date().getTime()
      if (this.date) {
        currentDate = this.date
      }
      showDatePicker({
        type: 'time',
        currentDate: currentDate, // currentDate在类型为time时支持传入字符串，其他类型均需传入时间戳
        success: (res) => {
          if (res.date) {
            this.date = res.date
          }
        },
        fail: () => {}
      })
    }
  }
}

选择年月

<hd-date-picker id="hd-date-picker"></hd-date-picker>

// uni_modules
import { showDatePicker } from '@/uni_modules/fant-mini'
// npm
import { showDatePicker } from 'fant-mini'
export default {
  data(){
    return {
      date:"" // 日期
    }
  }
  mounted() {
    this.open()
  },
  methods: {
    open() {
      let currentDate: number | string = new Date().getTime()
      if (this.date) {
        // iOS构造日期对象时不支持传入yyyy-MM格式，故需先补充`日`字段，再将-换成/
        currentDate = new Date((this.date + '-01').replace(/-/g, '/')).getTime()
      }
      showDatePicker({
        type: 'year-month',
        currentDate: currentDate, // currentDate在类型为time时支持传入字符串，其他类型均需传入时间戳
        success: (res) => {
          if (res.date) {
            this.date = res.date
          }
        },
        fail: () => {}
      })
    }
  }
}

日期时分

<hd-date-picker id="hd-date-picker"></hd-date-picker>

// uni_modules
import { showDatePicker } from '@/uni_modules/fant-mini'
// npm
import { showDatePicker } from 'fant-mini'
export default {
  data(){
    return {
      date:"" // 日期
    }
  }
  mounted() {
    this.open()
  },
  methods: {
    open() {
      let currentDate: number | string = new Date().getTime()
      if (this.date) {
        // iOS构造日期对象时不支持传入yyyy-MM-dd格式的日期，故需把-替换成/
        currentDate = new Date(this.date.replace(/-/g, '/')).getTime()
      }
      showDatePicker({
        type: 'date-hour-minute',
        currentDate: currentDate, // currentDate在类型为time时支持传入字符串，其他类型均需传入时间戳
        success: (res) => {
          if (res.date) {
            this.date = res.date
          }
        },
        fail: () => {}
      })
    }
  }
}

日期时间

<hd-date-picker id="hd-date-picker"></hd-date-picker>

// uni_modules
import { showDatePicker } from '@/uni_modules/fant-mini'
// npm
import { showDatePicker } from 'fant-mini'
export default {
  data(){
    return {
      date:"" // 日期
    }
  }
  mounted() {
    this.open()
  },
  methods: {
    open() {
      let currentDate: number | string = new Date().getTime()
      if (this.date) {
        // iOS构造日期对象时不支持传入yyyy-MM-dd格式的日期，故需把-替换成/
        currentDate = new Date(this.date.replace(/-/g, '/')).getTime()
      }
      showDatePicker({
        type: 'date-time',
        currentDate: currentDate, // currentDate在类型为time时支持传入字符串，其他类型均需传入时间戳
        success: (res) => {
          if (res.date) {
            this.date = res.date
          }
        },
        fail: () => {}
      })
    }
  }
}

方法

fant-mini 中导出了以下 DatePicker 相关的辅助函数：

方法名说明参数返回值
showDatePicker展示日期选择器DatePickerOptionsDatePicker实例

DatePickerOptions 数据结构

调用 showDatePicker 方法时，支持传入以下选项：

参数说明类型是否必填默认值
currentDate初始选择的日期时间，默认当前时间。Number、 Stringfalsenew Date().getTime()
startDate最小日期时间。Number、 Stringfalse十年前
endDate最大日期时间。Number、 Stringfalse十年后
type日期类型，可选值:date time year-month date-hour-minute date-timeDatePickerTypefalsedate
themeColor主题颜色Stringfalse#6ba1ff
maxHour可选的最大小时，针对 time 类型。Numberfalse23
maxMinute可选的最大分钟，针对 time 类型。Numberfalse59
maxSecond可选的最大秒，针对 time 类型。Numberfalse59
minHour可选的最小小时，针对 time 类型。Numberfalse0
minMinute可选的最小分，针对 time 类型。Numberfalse0
minSecond可选的最小秒，针对 time 类型。Numberfalse0
success选择成功的回调。Functionfalse-
fail选择失败的回调。Functionfalse-