Высококачественный, многоцелевой выбор даты и времени с возможностью настройки цвета, формата и текста.
Плагин использует компиляцию scss, при возникновении проблем со стилем или иерархией можно обратиться к исходному коду для внесения изменений.
Если вам это помогло, вы можете оставить комментарий или поставить лайк, спасибо!
Адреса: Рынок плагинов Uni-App, Gitee, Github.
Свойство | Тип | Значение по умолчанию | Описание |
---|---|---|---|
show | Boolean | false | Отображать ли |
type | String | date | Тип, возможные значения: date (дата), time (время), datetime (дата и время), range (диапазон дат), rangetime (диапазон даты и времени) |
color | String | #409eff | Цвет выбора элемента управления |
format | String | Пользовательский формат, см. ниже описание формата | |
value | String, Array | Устанавливаемое значение (если используется format, то необходимо использовать формат, соответствующий формату, указанному в format, иначе должна использоваться стандартная строка, которая может быть проанализирована функцией Date (кроме типа time)) | |
showSeconds | Boolean | false | Показывать ли секунды (действует только для типов datetime и time) |
showHoliday | Boolean | true | Показывать ли праздничные дни по григорианскому календарю |
showTips | Boolean | false | Показывать ли подсказку (действует только для типов range и rangetime) |
beginText | String | начало | Текст начала (действует только для типов datetime и time) |
endText | String | конец | Текст конца (действует только для типов datetime и time) |
@confirm | ConfirmObject | Событие подтверждения выбора | |
@cancel | Boolean | Событие отмены выбора (получает значение false) |
Формат | Значение |
---|---|
y | год |
m | месяц |
d | день |
h | час |
i | минута |
s | секунда |
Пример: yyyy/mm/dd hh:ii:ss => 2019/03/26 23:39:59
{
value: ..., //текущее выбранное значение (String/Array)
date: ..., //исходный объект Date текущего выбранного значения
}
<template>
<view>
<view class="test">
<view>Выбор даты - пример</view>
{{date}}
<button type="primary" @click="onShowDatePicker('date')">Выбрать дату</button>
{{time}}
<button type="primary" @click="onShowDatePicker('time')">Выбрать время</button>
{{datetime}}
<button type="primary" @click="onShowDatePicker('datetime')">Выбрать дату и время</button>
{{range[0]}} - {{range[1]}}
<button type="primary" @click="onShowDatePicker('range')">Выбрать диапазон дат</button>
{{rangetime[0]}} - {{rangetime[1]}}
<button type="primary" @click="onShowDatePicker('rangetime')">Выбрать диапазон даты и времени</button>
</view>
<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'заезд'" :end-text="'выезд'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
</view>
</template>
<script>
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
export default {
components: {
MxDatePicker
},
data() {
return {
showPicker: false,
date: '2019/01/01',
time: '15:00:12',
datetime: '2019/01/01 15:00:12',
range: ['2019/01/01','2019/01/06'],
rangetime: ['2019/01/08 14:00','2019/01/16 13:59'],
type: 'rangetime',
value: ''
}
},
methods: {
onShowDatePicker(type){//показать
this.type = type;
this.showPicker = true;
this.value = this[type];
},
onSelected(e) {//выбрать
this.showPicker = false;
if(e) {
this[this.type] = e.value;
//выбранное значение
console.log('value => '+ e.value);
//исходный объект Date выбранного значения
console.log('date => ' + e.date);
}
}
}
}
</script>
<style>
.test{
text-align: center;
padding: 10px 0;
}
button{
margin: 20upx;
font-size: 28upx;
}
</style>
### Особые указания
Тестирование, возможно, было не очень полным. Если есть ошибки или у вас есть предложения по улучшению, пожалуйста, оставьте отзыв в комментариях. Спасибо за вашу поддержку!
v2.1.0
v2.0.0
v1.0.3
v1.0.1
v1.0.0
v0.0.7
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )