टाइम पिकर

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

टाइप

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

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

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

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

एपीआई सरफ़ेस

समय चुनने वाले टूल को लागू करने के लिए, TimePicker या TimeInput कंपोज़ेबल का इस्तेमाल करें:

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

ध्यान दें: TimePicker और TimeInput, अलग-अलग कॉम्पोनेंट दिखाते हैं. हालांकि, पैरामीटर के मामले में ये दोनों कंपोज़ेबल काफ़ी मिलते-जुलते हैं. इसलिए, इन्हें ज़्यादातर मामलों में एक-दूसरे की जगह इस्तेमाल किया जा सकता है.

राज्य

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

Dialog

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

डायल टाइम पिकर

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

@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+ API desugaring को चालू करें, ताकि 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 होती है.

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

तीसरी इमेज. समय चुनने वाला विजेट.

राज्य [state] एट्रिब्यूट का इस्तेमाल करना

समय चुनने वाले टूल में उपयोगकर्ता ने जो समय चुना है उसका इस्तेमाल करने के लिए, अपने 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 - Time Pickers