English
English
简体中文
Contact Us
Register
Log In
layoutIndex

TimerPicker

Last Updated on : 2022-03-01 07:55:04download

Overview

TimerPicker is a time period selection component that supports selection of start time and end time.

Code demo

Note: for more information, see Demo.

import React, { Component } from "react"; import { View, StyleSheet } from "react-native"; import { TimerPicker } from "tuya-panel-kit"; export default class TimerPickerScene extends Component { state = { startTime: 0, endTime: 0, }; _handleTimerChange = (startTime, endTime) => { this.setState({ startTime, endTime }); }; render() { return ( <View style={styles.container}> <TimerPicker title="Time period selection" cancelText="Cancel" confirmText="Confirm" startTime={this.state.startTime} endTime={this.state.endTime} is12Hours={true} onTimerChange={this._handleTimerChange} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, paddingHorizontal: 16, }, });

Interaction demo

API

style

Specify the container style to encapsulate timerPicker.

Type Required
ViewPropTypes.style No

startTime

The start time.

Type Required Default value
number No 480 (in minutes, that is, 08:00)

endTime

The end time.

Type Required Default value
number No 840 (in minutes, that is, 14:00)

pickerFontColor

The color of the selector font.

Type Required Default value
string No #333

disabled

Whether the selector supports gesture operations.

Type Required Default value
bool No false

loop

Whether to support loop scrolling of the selector.

Type Required Default value
bool No true

is12Hours

Whether it is 12-hour system.

Type Required Default value
bool No true

singlePicker

Whether to support the single selector only.

Type Required Default value
bool No false

prefixPosition

Prefix position, that is, the position of AM and PM.

Type Required Default value
enum: 'left', 'right' No right

onTimerChange

Callback of changing the time period. The following parameters must be entered when calling:

  • startTime: the start time.
  • endTime: the end time.
Type Required
(startTime, endTime) => void No