टाइम पिकर

टाइम पिकर की मदद से उपयोगकर्ता समय चुन सकते हैं. आप समय लागू करने के लिए, TimePicker और TimeInput कंपोज़ेबल का इस्तेमाल करें पिकर की सुविधा का इस्तेमाल करें.

ध्यान दें: TimePicker और TimeInput एक्सपेरिमेंट के तौर पर उपलब्ध हैं. यहां बताई गई किसी भी समस्या के बारे में बताएं समस्या को ट्रैक करने वाला टूल.

प्रकार

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

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

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

पहली इमेज. डायल और इनपुट टाइम पिकर.

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

टाइम पिकर लागू करने के लिए, 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
• मटीरियल डिज़ाइन - टाइम पिकर