DatePicker
Date or time selecting, supports year/month/day/hour/minute/second custom selecting
Import
import { DatePicker } from 'mand-mobile-next'
Vue.createApp().component(DatePicker.name, DatePicker)
Code Examples
API
DatePicker Props
Props | Description | Type | Default | Note |
---|---|---|---|---|
v-model | initial selected date | Date/Array | new Date() | value is an Array including such as [23, 59, 59] when type is time or custom , otherwise value is a Date |
type | type of selection | String | date | date , time , datetime , custom |
custom-types | customized element contains 'yyyy', 'MM', 'dd', 'hh', 'mm', 'ss' | Array | - | valid when type is custom |
min-date | selectable min date(time) | Date | - | - |
max-date | selectable max date(time) | Date | - | - |
unit-text | element unit for text displaying | Array | ['Year', 'Month', 'Day', 'Hour', 'Minute', 'Second'] | text-render for complex logic |
text-render | customized option for text displaying | Function(typeFormat, column0Value, column1Value, ...): String | - | unit-text is invalid when using text-render , refer to Appendix |
today-text | displaying text of today | String | today | use & to take placeholder date, like &(today) |
line-height | line height of options | Number | 45 | unit px |
keep-index | keep last stop position when the column data changes | Boolean | false | - |
is-view | inline-display in page, otherwise it shows as Popup | Boolean | false | - |
title | title of date-picker | String | - | - |
describe | description of date-picker | String | - | - |
ok-text | confirmation text | String | confirm | - |
cancel-text | cancellation text | String | cancel | - |
mask-closable | picker will be closed when clicking mask | String | true | - |
DatePicker Methods
getColumnValues(): columnsValue
Get all values of currently seleted items
Returns
Props | Description | Type |
---|---|---|
columnsValue | values of all selected items in the column | Array<{value, text, ...}> |
DatePicker Events
@change(columnIndex, itemIndex, value)
Change selections of date picker
Parameters | Description | Type |
---|---|---|
columnIndex | change the index of column | Number |
itemIndex | change the index of selected item | Number |
value | change the value of selected item | Object: {value, text, ...} |
@confirm()
Confirm the selection of date picker(only when is-view
is false
)
@cancel()
Cancel date picker's selection (only when is-view
is false
)
@show()
Show date picker (only when is-view
is false
)
@hide()
Hide date picker (only when is-view
is false
)
Appendix
- columnData
const columnData = [
// year
[
{
text: '2017年', // display year text
value: 2017, // display year value
typeFormat: 'yyyy' // the type of date: yyyy, MM, dd, hh, mm, ss
}
],
// month
[
{
text: '1月', // display month text
value: 1, // display month value
typeFormat: 'MM' // the type of date: yyyy, MM, dd, hh, mm, ss
}
],
// day, hour, minute, second
[
...,
]
]
- textRender
const MONTH_MAP = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sept',
'Oct',
'Nov',
'Dec',
]
const textRender = (
typeFormat: string,
columnValue: number
) => {
if (typeFormat === 'MM') {
return MONTH_MAP[columnValue - 1]
}
return
}