# DatePicker_ohos

**Repository Path**: isrc_ohos/date-picker_ohos

## Basic Information

- **Project Name**: DatePicker_ohos
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-03-29
- **Last Updated**: 2022-09-21

## Categories & Tags

**Categories**: harmonyos-selector

**Tags**: HarmonyComponent

## README

# DatePicker_ohos

**本项目是基于开源项目angular-datepicker进行鸿蒙化JS的移植和开发的，可以通过项目标签以及Github地址[原项目Github地址](https://github.com/alongubkin/angular-datepicker)追踪到原JS项目版本。

#### 项目介绍

- 项目名称：日期选择

- 所属系列：鸿蒙的第三方组件适配移植

- 功能：实现了以日历的形式根据不同年月显示相应的日期值的效果，点击某日期后在弹出的时间选择框中滑动选择时间，会将最终选择的具体日期时间显示出来。

- 项目移植状态：90%，移植完成组件的核心功能——以日历形式展示并支持点击选择。

- 调用差异：重构

- 开发版本：sdk6，DevEco Studio2.2 beta1

- 项目作者和维护人：李珂

- 邮箱：[isrc_hm@iscas.ac.cn](mailto:isrc_hm@iscas.ac.cn)

- 原项目Doc地址：[https://github.com/alongubkin/angular-datepicker](https://github.com/alongubkin/angular-datepicker) 
![输入图片说明](Untitled.gif)

####  项目介绍

- 编程语言：JavaScript
- 本项目提供了一个以日历形式显示的支持点击选择日期和时间的组件，在选择后会将具体的日期时间显示在相应的控件中，使用时将组件引入对应的hml文件中即可。

#### 使用教程

1.将组件涉及的hml、js、css文件放到src->main->js->default->common下新建的library文件夹中。

 ![输入图片说明](c49c093619f66396e09a62081d24c19.png)

2. 在相应的hml文件的最开头处，通过<element></element>标签引入DatePicker_ohos组件的源文件。

```
<element name='datepicker' src='../../common/library/datepicker.hml'></element>
```
3. 在hml文件的相应布局处，添加组件并设置用于接收组件内部传值的处理事件。

```
<div class="container">
     <datepicker show="{{isShow}}" @get-date="Clicked"></datepicker>
</div>
```
4. 在组件内部的JS文件中通过this.$emit()向Demo部分传值。

```
textonchange(){
        ...
        this.$emit('getDate', {result: this.year_month_day_time});
    },
```
5. 在引用组件的Demo主js文件中接收传来的日期时间值更新相应字段。

```
Clicked (e) {
    this.year_month_day_time = e.detail.result;
},
```


#### 版本迭代

- v0.1.0-alpha

#### 版权和许可信息

- DatePicker_ohos经过[Apache License, version 2.0](https://gitee.com/link?target=http%3A%2F%2Fwww.apache.org%2Flicenses%2FLICENSE-2.0)授权许可。