# miniprogram-datepicker

**Repository Path**: hihopeorg/miniprogram-datepicker

## Basic Information

- **Project Name**: miniprogram-datepicker
- **Description**: 日期选择器
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-14
- **Last Updated**: 2022-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# miniprogram-datepicker

## 简介
> miniprogram-datepicker是使用picker组件（多列选择器）实现的日期选择器，它支持切换公历农历、支持控制星期显示状态、支持选择日期。

## 效果展示
![avatar](screenshot/效果展示.gif)

## 下载安装
```shell
npm install @ohos/miniprogram_datepicker --save
```
OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。

## 使用说明

##### html组件依赖

```
<element name="comp" src="miniprogram_datepicker/src/main/js/components/index.hml"></element>
...
//增加星期显示开关组件
<switch checked="{{ showWeek }}" @change="bindShowWeekChange"></switch>
...
//增加公历农历切换组件
<picker class="item_text_content" onchange="bindCalendarChange" value="{{ calendarIndex }}"
        range="{{ calendars }}">
    {{ calendars[calendarIndex] }}
</picker>
...
//增加日期选择器组件
<comp class="item_text_content" @mchange="bindCompChange" value="{{ value }}" show-week="{{ showWeek }}"
      value-of-string="{{ valueOfString }}">
</comp>
```

##### html组件依赖

```
import calendar from 'miniprogram_datepicker/src/main/js/calendar/calendar.js'
import lib from 'miniprogram_datepicker/src/main/js/components/lib.js'
...
```

##### value结构

| 属性            | 类型    | 说明     |
| --------------- | ------- | -------- |
| year            | number  | 年       |
| month           | number  | 月       |
| day             | number  | 日       |
| isLeapMonth     | boolean | 是否闰月 |
| isLunarCalendar | boolean | 是否农历 |


## 接口说明
1. value值变化时触发

   `_renderValue: function (value, oldValue) `

2. 星期状态发生变化时触发

   `_renderShowWeek: function (showWeek, oldValue)`

3. 多列文本选择器中某一列的值改变时触发该事件
   `bindColumnChange: function (e)`

4. 用户点击弹窗中的取消按钮时触发该事件
   `bindCancel: function ()`

5. 多列文本选择器选择值后点击弹窗中的确认按钮时触发该事件
   `bindChange: function (e)`

6. 获取显示数组
   `getShowObjectMultiArray: function ()`

7. 验证value值
   `validateValue: function (value)`

8. 获取默认value值
   `getDefaultValue: function ()`


## 兼容性
支持 OpenHarmony API version 8 及以上版本。

## 目录结构
````
|---- miniprogram_datepicker  
|     |---- entry  # 示例代码文件夹
|     |---- miniprogram_datepicker  # miniprogram_datepicker库文件夹
|           |---- src/main/js
|                 |---- calendar  # 三方库calendar 
|                 |---- findindex  # 三方库findindex 
|                 |---- components  # 自定义组件 
|           |---- index.ets  # 对外接口
|     |---- README.MD  # 安装使用方法                    
````

## 贡献代码
使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/miniprogram-datepicker/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/miniprogram-datepicker/pulls) 。

## 开源协议
本项目基于 [Apache License 2.0](https://gitee.com/hihopeorg/miniprogram-datepicker/blob/master/LICENSE) ，请自由地享受和参与开源。