Skip to content

Latest commit

 

History

History
100 lines (94 loc) · 3.93 KB

README.md

File metadata and controls

100 lines (94 loc) · 3.93 KB

Time Picker

Time pickers help users select and set a specific time.

Dependencies

For using Material_TimePicker in your app, add the below dependency in the entry/package.json

"dependencies": {
    "@ohos/material_timepicker": "file:../Material_TimePicker"
  }

Add dependency command with

npm i @ohos/material_timepicker

Usage instructions

Import these components and data types

import { MaterialTimePicker, TimeFormat, InputMethod } from "@ohos/material_timepicker"

Screenshots

CLOCK INPUT MODE IN 12H FORMAT TEXT INPUT MODE IN 12H FORMAT CLOCK INPUT MODE IN 24H FORMAT TEXT INPUT MODE IN 24H FORMAT

How to use it

Imports

Import the following components and data types

import { MaterialTimePicker, TimeFormat, InputMethod } from "@ohos/material_timepicker"

Code

To pickup from the Time Picker


MaterialTimePicker({
                  options: {
                    timeFormat: TimeFormat.CLOCK_24H,
                    hour:10,
                    minute:30,
                    cancel: [this.cancel],
                    onPositiveButtonClick: [(time: string) => this.submit2(time)],
                    onNegativeButtonClick:[this.cancel],
                    dismiss:[this.cancel],
                    keyboardSymbol: $r("app.media.keyboard"),
                    clockSymbol:$r("app.media.clock"),
                    clockFaceBackgroundColor:Color.Pink,
                    clockHandColor:Color.Green,
                    inputMethod:InputMethod.TextInputMethod,
                    clockNumberTextColor:Color.Red,
                    textInputTitle:"SELECT YOUR TIME",
                    clockInputTitle:"Enter your Time",
                    titleBackgroundColor:Color.Yellow,
                    titleFontColor:Color.White,
                    labelColor:Color.Red,
                    materialCircleRadius:200,
                    selectorSize:60
                  }
    })

Styling

You can style the viewer using these attributes :

Attribute Description
timeFormat sets the 12H or 24H format
hour sets the initial value of hour
minute sets the initial value of minute
cancel list of callback functions to call on cancelling the time picker
onPositiveButtonClick list of callback functions to call on clicking OK button
onNegativeButtonClick list of callback functions to call on clicking cancel button
dismiss list of callback functions to call on dismissing the timepicker
keyboardSymbol Symbol for the keyboard icon
clockSymbol symbol for the clock icon
clockFaceBackgroundColor sets the color of the background of clock's face
clockHandColor sets the color of clock's hand
inputMethod sets the initial Input Method
clockNumberTextColor sets the color of clock's elements
textInputTitle sets the title of the Time Picker screen in Text Input Mode
clockInputTitle sets the title of the Time Picker screen in Clock Input Mode
titleBackgroundColor sets the background color of the title
titleFontColor sets the font color of the title
labelColor sets the font color of the label in text input mode
materialCircleRadius sets the radius indicating how far away from the center of the group the elements are positioned
selectorSize sets the diameter of the pointer of the clock hand

Compatibility

Supports OpenHarmony API version 9

Code Contribution

If you find any problems during usage, you can submit an issue to us. Of course, we also welcome you to send us PR.

Open source License

This project is based on Apache License 2.0, please enjoy and participate in open source freely.