Datetime

时间组件 / Datetime时间选择组件

Datetime组件是对Picker组件的再封装, 这个和Select组件对Alert组件的封装类似. Datetime组件用于替代原生input[type="datetime"]的解决方案, 且功能比原生更丰富. 支持单列~多列时间的选择/固定时间范围/固定时间的选择间隔等.

该组件是对Ionic的Datetime组件的转义, 具体使用和Ionic的datetime完全一致. API参考下方链接.

Ionic原组件值对符合ISO格式的日期能正确显示使用, 这里做了改进:

通过v-model可以传入如下类型: Date日期对象/ISO格式的时间String/能转化为Date对象的字符串这三类. 但是v-model返回的数据都是ISO格式日期String, 如果期望返回每个column返回的详细结果, 请监听onChange事件.

// 引入
import { Datetime } from 'vimo'
// 安装
Vue.component(Datetime.name, Datetime)
// 或者
export default{
  components: {
    Datetime
 }
}

源码:: datetime/datetime.vue , line 2
参考:: http://ionicframework.com/docs/demos/src/datetime/www/?production=true&ionicplatform=ios

http://ionicframework.com/docs/api/components/datetime/DateTime/

Name	Type	Attributes	Default	Description
`min`	String	<optional>		ISO 8601 datetime 的时间格式, 1996-12-19
`max`	String	<optional>		ISO 8601 datetime 的时间格式, 1996-12-19
`displayFormat`	String			外部显示的格式
`pickerFormat`	String	<optional>		picker 显示的格式
`placeholder`	String	<optional>		placeholder
`value`	String \| Object \| Date			value
`cancelText`	String	<optional>	`'取消'`	取消的显示文本
`doneText`	String	<optional>	`'确认'`	确定的显示文本
`yearValues`	String \| Array	<optional>		显示可以选择的年信息, 例如: "2024,2020,2016,2012,2008"
`monthValues`	String \| Array	<optional>		显示可以选择的月信息, 例如: "6,7,8"
`dayValues`	String \| Array	<optional>		显示可以选择的月信息, 例如: "6,7,8"
`hourValues`	String \| Array	<optional>		显示可以选择的小时信息,
`minuteValues`	String \| Array	<optional>		显示可以选择的分钟信息,
`monthNames`	String \| Array	<optional>		每个月的名字
`monthShortNames`	String \| Array	<optional>		每个月的短名字
`dayNames`	String \| Array	<optional>		每天的显示名字
`dayShortNames`	String \| Array	<optional>		每天的短名字
`pickerOptions`	Object	<optional>		pickerOptions
`mode`	String	<optional>	`'ios'`	mode

<Item>
   <Label>MMMM</Label>
   <Datetime slot="item-right" displayFormat="MMMM" v-model="monthOnly"></Datetime>
</Item>

点击取消按钮触发

点击确定按钮

IOS Android QRCode

扫码预览