123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233 |
- <template>
- <view class="u-page">
- <u-navbar
- title="datetimePicker 时间日期选择器"
- @leftClick="navigateBack"
- safeAreaInsetTop
- fixed
- placeholder
- ></u-navbar>
- <u-cell-group>
- <u-cell
- @click="showDatetimePicker(index)"
- :title="item.title"
- v-for="(item, index) in list"
- :key="index"
- isLink
- >
- <image
- slot="icon"
- class="u-cell-icon"
- :src="item.iconUrl"
- mode="widthFix"
- ></image>
- </u-cell>
- </u-cell-group>
- <u-datetime-picker
- :show="show1"
- v-model="value1"
- mode="datetime"
- closeOnClickOverlay
- @confirm="confirm"
- @cancel="cancel"
- @change="change"
- @close="close"
- ></u-datetime-picker>
- <u-datetime-picker
- :show="show2"
- v-model="value2"
- mode="date"
- closeOnClickOverlay
- @confirm="confirm"
- @cancel="cancel"
- @change="change"
- @close="close"
- ></u-datetime-picker>
- <u-datetime-picker
- :show="show3"
- v-model="value3"
- mode="year-month"
- closeOnClickOverlay
- @confirm="confirm"
- @cancel="cancel"
- @change="change"
- @close="close"
- ></u-datetime-picker>
- <u-datetime-picker
- :show="show4"
- v-model="value4"
- mode="time"
- closeOnClickOverlay
- @confirm="confirm"
- @cancel="cancel"
- @change="change"
- @close="close"
- ></u-datetime-picker>
- <u-datetime-picker
- :show="show5"
- v-model="value5"
- :filter="filter"
- mode="date"
- closeOnClickOverlay
- @confirm="confirm"
- @cancel="cancel"
- @change="change"
- @close="close"
- ></u-datetime-picker>
- <u-datetime-picker
- :show="show6"
- v-model="value6"
- mode="date"
- :formatter="formatter"
- closeOnClickOverlay
- @confirm="confirm"
- @cancel="cancel"
- @change="change"
- @close="close"
- ></u-datetime-picker>
- <u-datetime-picker
- :show="show7"
- v-model="value7"
- mode="datetime"
- :minDate="1587524800000"
- :maxDate="1786778555000"
- closeOnClickOverlay
- @confirm="confirm"
- @cancel="cancel"
- @change="change"
- @close="close"
- ></u-datetime-picker>
- </view>
- </template>
- <script>
- export default {
- data() {
- const d = new Date()
- const year = d.getFullYear()
- let month = uni.$u.padZero(d.getMonth() + 1)
- const date = d.getDate()
- return {
- current: 0,
- value1: Number(new Date()),
- value2: Number(new Date()),
- value3: Number(new Date()),
- value4: '05:28',
- value5: Number(new Date()),
- value6: Number(new Date()),
- value7: Number(new Date()),
- show1: false,
- show2: false,
- show3: false,
- show4: false,
- show5: false,
- show6: false,
- show7: false,
- list: [{
- title: '完整日期时间',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/6.png'
- },
- {
- title: '年月日',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/4.png'
- },
- {
- title: '年月',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/3.png'
- },
- {
- title: '时间',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/5.png'
- }, {
- title: '过滤器(保留偶数年)',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/2.png'
- }, {
- title: '格式化',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/1.png'
- }, {
- title: '限制最大最小值',
- iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/7.png'
- }
- ]
- }
- },
- methods: {
- close() {
- this[`show${this.current}`] = false
- },
- cancel() {
- this[`show${this.current}`] = false
- },
- confirm(e) {
- this[`show${this.current}`] = false
- this.result(e.value, e.mode)
- },
- change(e) {
- // console.log('change', e)
- },
- navigateBack() {
- uni.navigateBack()
- },
- formatter(mode, value) {
- if (mode === 'year') {
- return `${value}年`;
- }
- if (mode === 'month') {
- return `${value}月`;
- }
- return value;
- },
- filter(mode, options) {
- if (mode === 'year') {
- return options.filter((option) => option % 2 === 0);
- }
- return options;
- },
- showDatetimePicker(index) {
- this.current = index + 1
- this[`show${index + 1}`] = true
- },
- result(time, mode) {
- const timeFormat = uni.$u.timeFormat,
- toast = uni.$u.toast
- switch (mode) {
- case 'datetime':
- return toast(timeFormat(time, 'yyyy-mm-dd hh:MM'))
- case 'date':
- return toast(timeFormat(time, 'yyyy-mm-dd'))
- case 'year-month':
- return toast(timeFormat(time, 'yyyy-mm'))
- case 'time':
- return toast(time)
- default:
- return ''
- }
- },
- filter(type, options) {
- if (type === 'year') {
- return options.filter((option) => option % 2 === 0)
- }
- return options;
- },
- formatter(type, value) {
- if (type === 'year') {
- return `${value}年`
- }
- if (type === 'month') {
- return `${value}月`
- }
- if (type === 'day') {
- return `${value}日`
- }
- return value
- },
- },
- }
- </script>
- <style lang="scss">
- .u-page {
- padding: 0;
- }
- </style>
|