mx-date-picker Uni-app日期时间选择插件，支持更多选择方式（日期范围，日期时间范围）

╰半橙微兮° 2023-08-17 16:44 168阅读 0赞

# Uni-app日期时间选择插件，支持更多选择方式（日期范围，日期时间范围） #

# 日期时间选择器 DatePicker #

## 介绍 ##

一款高颜值、多场景的日期时间选择器，提供自定义颜色/格式/文案等。  
该插件采用scss编译，如遇到样式/层级问题可以到源码修改。 如果对您有帮助，可以评论或赞赏一下，谢谢！  
地址：[Uni-App插件市场地址][Uni-App] | [Gitee][] | [Github][]

## 属性说明 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>show</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否显示</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>date</td> 
   <td>类型，可选值：date（日期）、time（时间）、datetime（日期时间）、range（日期范围）、rangetime（日期时间范围）</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>String</td> 
   <td>#409eff</td> 
   <td>选择控件的颜色</td> 
  </tr> 
  <tr> 
   <td>format</td> 
   <td>String</td> 
   <td>&nbsp;</td> 
   <td>自定义格式，参考下方格式说明</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>String, Array</td> 
   <td>&nbsp;</td> 
   <td>设置显示的值（如果用了format需要个format格式一致，否则需要标准的能被Date解析的字符串（time除外））</td> 
  </tr> 
  <tr> 
   <td>showSeconds</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否显示秒（type为datetime/time时生效）</td> 
  </tr> 
  <tr> 
   <td>showHoliday</td> 
   <td>Boolean</td> 
   <td>true</td> 
   <td>是否显示公历节日</td> 
  </tr> 
  <tr> 
   <td>showTips</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否显示提示文字（type为range/rangetime时生效）</td> 
  </tr> 
  <tr> 
   <td>beginText</td> 
   <td>String</td> 
   <td>开始</td> 
   <td>开始文案（type为datetime/time时生效）</td> 
  </tr> 
  <tr> 
   <td>endText</td> 
   <td>String</td> 
   <td>结束</td> 
   <td>结束文案（type为datetime/time时生效）</td> 
  </tr> 
  <tr> 
   <td><a href="https://javascript.ctolib.com/nulllfeng/uniapp_date_and_time_selector/blob/master" rel="nofollow">@confirm</a></td> 
   <td>ConfirmObject</td> 
   <td>&nbsp;</td> 
   <td>确认选择事件</td> 
  </tr> 
  <tr> 
   <td><a href="https://javascript.ctolib.com/nulllfeng/uniapp_date_and_time_selector/blob/master" rel="nofollow">@cancel</a></td> 
   <td>Boolean</td> 
   <td>&nbsp;</td> 
   <td>取消选择事件(接收一个false)</td> 
  </tr> 
 </tbody> 
</table>

### format ###

示例：yyyy/mm/dd hh:ii:ss => 2019/03/26 23:39:59

### ConfirmObject ###

{
        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>

## 动画演示 ##

## 特别说明 ##

测试的可能不是很全面，如果有BUG或者更好的建议请在评论区反馈，谢谢支持！

# #

[Uni-App]: https://ext.dcloud.net.cn/plugin?id=112
[Gitee]: https://gitee.com/nullfeng/uniapp_date_and_time_selector
[Github]: https://github.com/nulllfeng/uniapp_date_and_time_selector