# ohos-PickerView

**Repository Path**: openharmony-sig/ohos-PickerView

## Basic Information

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

## Statistics

- **Stars**: 7
- **Forks**: 11
- **Created**: 2022-04-16
- **Last Updated**: 2025-08-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PickerView

## Overview

PickerView implements a time picker that is capable of time selection, locale selection, divider setting, and text size and color setting.

## Display Effects
Time picker:

![](PickerView/PickerView_EN.png)

Time picker (switch between calendars):

![](preview/time_EN.png)

Time picker (year, month, day, hour, minute, and second):

![](preview/time_year_second_EN.png)

Circle divider picker:

![](preview/circle_EN.png)

City picker (province and city):

![](preview/province_EN.png)

Custom picker:

![](preview/customize_EN.png)

Card picker:

![](preview/card_EN.png)

City picker (province, city, and district):

![](preview/provinceToCity_EN.png)
## How to Install
```shell
ohpm install @ohos/pickerview --save
```
For details, see [Installing an OpenHarmony HAR](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.en.md).

## How to Use
The usage of different pickers is similar. The following uses the time picker as an example.

1. Initialization: Instantiate **scroller** and the corresponding **ShowTimePickerComponent.Model** object.
 ```
private scroller: Scroller = new Scroller()
@State showTimeData: ShowTimePickerComponent.Model = new ShowTimePickerComponent.Model();
 ```
2. Attribute setting: Set UI attributes through the **Model** class object to define the required style. You can also add required callbacks.
 ```
 aboutToAppear() {
    this.showTimeData
        .setDividerLineStroke(2)
        .setDividerLineColor(Color.Black)
        .setFontSize(20)
        .setFontColor(Color.Red)
        .setConfirmButtonFont ("OK")
        .setCancelButtonFont ("Cancel")
        .setCancelButtonColor(Color.Red)
        .setConfirmButtonColor(Color.Black)
        .setTitleFontSize(20)
        .setTitleFontColor(Color.Black)
        .setPickerSpace(20)
        .setButtonBackgroundColor("#DCDCDC")
        .setYearRangeStart(2001)
        .setYearRangeEnd(2050)
        .setDefaultSelection([2005, 5, 11])
        .setDividerType(DividerType.CIRCLE)
        .setLineSpacingMultiplier(40)
        .withClick((event: ClickEvent) => {
        this.showTimeData.withText("clicked " + this.count++ + " times");
      });
 ```
3. UI drawing: Invoke the object constructor to pass the instantiated object.
 ```
 build() {
    Stack() {
      Scroll(this.scroller) {
        Column() {
          ShowTimePickerComponent({model: this.showTimeData})
       }
      }
    }
  }
 ```
## Available APIs
`@State showTimeData: ShowTimePickerComponent.Model = new ShowTimePickerComponent.Model();`
1. Sets the width of the divider line.
   this.showTimeData.setDividerLineStroke(2)
2. Sets the color of the divider line.
   this.showTimeData.setDividerLineColor(Color.Black)
3. Sets the text size.
   this.showTimeData.setFontSize(20)
4. Sets the text color.
   this.showTimeData.setFontColor(Color.Red)
5. Sets the text of the **OK** button.
   this.showTimeData.setConfirmButtonFont ("OK")
6. Sets the text of the **Cancel** button.
   this.showTimeData.setCancelButtonFont ("Cancel")
7. Sets the text color of the **Cancel** button.
   this.showTimeData.setCancelButtonColor(Color.Red)
8. Sets the text color of the **OK** button.
   this.showTimeData.setConfirmButtonColor(Color.Black)
9. Sets the text size of the title, **OK** button, and **Cancel** button.
   this.showTimeData.setTitleFontSize(20)
10. Sets the text color of the title.
    this.showTimeData.setTitleFontColor(Color.Black)
11. Sets the spacing between picker pages.
    this.showTimeData.setPickerSpace(20)
12. Sets the background color of a button.
    this.showTimeData.setButtonBackgroundColor("#7CDCDC")
13. Sets the start time.
    this.showTimeData.setYearRangeStart(2001)
14. Sets the end time.
    this.showTimeData.setYearRangeEnd(2050)
15. Sets the divider type.
    this.showTimeData.setDividerType(DividerType.CIRCLE)
16. Sets the spacing.
    this.showTimeData.setLineSpacingMultiplier(40)
## Constraints

PickerView has been verified in the following versions:

- DevEco Studio: 4.1 Canary (4.1.3.317), OpenHarmony SDK: API11 (4.1.0.36)
- IDE: DevEco Studio Next, Developer Beta1(5.0.3.121), SDK: API12 (5.0.0.16)

## Directory Structure
````
|---- pickerview 
|     |---- entry  # Sample code
|     |---- pickerview  # PickerView library
|           |---- src
         |----main
            |----ets
               |----components
                  |----common
                     |----AreaDataPickerViewLib.ets # AreaDataParseSample picker
                     |----CardModel.ets                  # Card data generation class
                     |----CardPickerComponent.ets        # Card picker
                     |----ChinaDateModel.ets             # Time entity class.
                     |----CircleDividerViewLib.ets       # Circle divider 
                     |----CityPickerComponent.ets        # City picker
                     |----Constant.ets                   # Constants
                     |----CustomizeModel.ets             # Custom entities
                     |----CustomizePickerComponent.ets # Custom pickers
                     |----HourSecondMinuteComponent.ets # Time picker (hour and minute)
                     |----HourSecondMinuteModel.ets      # Time picker (hour, minute, and second)
                     |----LunarCalendar.ets              # Lunar calendar
                     |----LunarTimeUtil.ets              # Switch between lunar calendar and solar calendar
                     |----PickerData.ets                 # Picker data
                     |----PickerModel.ets                # Picker models
                     |----Province.ets                   # Province, city, and district data
                     |----ShowTimePickerViewLib.ets      # Time picker views
                     |----ShowToast.ets                  # Dialog box
                     |----SolarCalendar.ets              # Solar calendar
                     |----TimePickerComponent.ets        # Time picker
                     |----YearReachSecondComponent.ets   # Time picker (year, month, day, hour, minute, and second)
|     |---- README_EN.md  # Readme                   
````

## How to Contribute
If you find any problem when using PickerView, submit an [Issue](https://gitee.com/openharmony-sig/ohos-PickerView/issues) or [PR](https://gitee.com/openharmony-sig/ohos-PickerView/pulls) to us.

## License
This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/ohos-PickerView/blob/master/LICENSE).