टाइम पिकर

टाइम पिकर की मदद से, उपयोगकर्ता समय चुन सकते हैं. अपने ऐप्लिकेशन में टाइम पिकर लागू करने के लिए, TimePicker और TimeInput कॉम्पोनेंट का इस्तेमाल किया जा सकता है.

प्रकार

टाइम पिकर दो तरह के होते हैं:

• डायल: इसकी मदद से, उपयोगकर्ता डायल के हैंडल को घुमाकर समय सेट कर सकते हैं.
• इनपुट: इसकी मदद से, उपयोगकर्ता अपने कीबोर्ड का इस्तेमाल करके समय सेट कर सकते हैं.

नीचे दी गई इमेज में, बाईं ओर डायल टाइम पिकर और दाईं ओर इनपुट टाइम पिकर का उदाहरण दिया गया है:

एपीआई का प्लैटफ़ॉर्म

टाइम पिकर लागू करने के लिए, TimePicker या TimeInput के साथ काम करने वाले कॉम्पोनेंट का इस्तेमाल करें:

• TimePicker: डायल टाइम पिकर लागू करता है.
• TimeInput: समय चुनने के लिए इनपुट पिकर लागू करता है.

राज्य

TimePicker और TimeInput, दोनों के लिए आपको TimePickerState भी पास करना होगा. इसकी मदद से, पिकर पर दिखने वाला डिफ़ॉल्ट समय चुना जा सकता है. यह उस समय को भी कैप्चर करता है जिसे उपयोगकर्ता ने पिकर का इस्तेमाल करके चुना है.

डायलॉग

टाइम पिकर, डायलॉग में दिखते हैं. इस गाइड में दिए गए उदाहरणों में डायलॉग का इस्तेमाल नहीं किया गया है. डॉयलॉग का इस्तेमाल करने वाले उदाहरणों के लिए, टाइम पिकर के लिए डॉयलॉग गाइड देखें.

डायल पर समय चुनने वाला टूल

इस स्निपेट में, समय चुनने के लिए बुनियादी डायल को लागू करने का तरीका बताया गया है.

@Composable
fun DialExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

इस स्निपेट में इन बातों का ध्यान रखें:

• Calendar.getInstance(), TimePickerState को मौजूदा समय के साथ शुरू करता है.
  • इस उदाहरण में java.util.Calendar का इस्तेमाल किया गया है. अपने प्रोजेक्ट में Java 8+ एपीआई को डीसुगर करने की सुविधा चालू करें, ताकि सभी Android वर्शन पर java.time.LocalTime का इस्तेमाल किया जा सके.
• TimePicker कंपोज़ेबल, timePickerState को पैरामीटर के तौर पर लेकर टाइम पिकर दिखाता है.
• इसमें दो बटन शामिल हैं: एक, चुने गए विकल्प की पुष्टि करने के लिए और दूसरा, पिकर को खारिज करने के लिए.

लागू होने पर यह ऐसा दिखता है:

समय चुनने वाला विजेट

इस स्निपेट में, इनपुट स्टाइल वाला बुनियादी टाइम पिकर लागू करने का तरीका बताया गया है.

@Composable
fun InputExample(
    onConfirm: () -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimeInput(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = onConfirm) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

इस सुविधा को लागू करते समय ध्यान रखने वाली ज़रूरी बातें:

• यह स्ट्रक्चर, डायल टाइम पिकर जैसा ही होता है. इनमें मुख्य अंतर यह है कि डायल टाइम पिकर में TimePicker के बजाय TimeInput का इस्तेमाल किया जाता है.
• timePickerState के लिए is24Hour पैरामीटर, साफ़ तौर पर true पर सेट है. डिफ़ॉल्ट रूप से, यह वैल्यू false होती है.

लागू होने पर यह ऐसा दिखता है:

राज्य का इस्तेमाल करना

टाइम पिकर में उपयोगकर्ता के चुने गए समय का इस्तेमाल करने के लिए, अपने onConfirm फ़ंक्शन में सही TimePickerState पास करें. इसके बाद, पैरंट कॉम्पोनेंट, TimePickerState.hour और TimePickerState.minute की मदद से चुने गए समय को ऐक्सेस कर सकता है.

नीचे दिए गए स्निपेट में, ऐसा करने का तरीका बताया गया है:

@Composable
fun DialUseStateExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    Column {
        TimePicker(
            state = timePickerState,
        )
        Button(onClick = onDismiss) {
            Text("Dismiss picker")
        }
        Button(onClick = { onConfirm(timePickerState) }) {
            Text("Confirm selection")
        }
    }
}
TimePickers.kt

इसके बाद, इस तरह से कॉम्पोज़ेबल को कॉल किया जा सकता है:

var selectedTime: TimePickerState? by remember { mutableStateOf(null) }

// ...

DialUseStateExample(
    onDismiss = {
        showDialExample = false
    },
    onConfirm = {
            time ->
        selectedTime = time
        showDialExample = false
    },
)

// ...

if (selectedTime != null) {
    val cal = Calendar.getInstance()
    cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
    cal.set(Calendar.MINUTE, selectedTime!!.minute)
    cal.isLenient = false
    Text("Selected time = ${formatter.format(cal.time)}")
} else {
    Text("No time selected.")
}

ज़्यादा जानकारी के लिए, स्निपेट ऐप्लिकेशन में पूरी जानकारी देखें.

अन्य संसाधन

• TimePicker
• Material Design - टाइम पिकर