तारीख चुनने वाले टूल

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

प्रकार

तारीख चुनने वाले टूल तीन तरह के होते हैं:

• डॉक किया गया: लेआउट में इनलाइन दिखता है. यह संक्षिप्त आकार के लिए उपयुक्त है ऐसे लेआउट जहां खास तौर पर बनाए गए डायलॉग से रुकावट पैदा हो सकती है.
• मोडल: ऐप्लिकेशन के कॉन्टेंट को ओवरले करने वाले डायलॉग बॉक्स के तौर पर दिखता है. इससे पता चलता है कि तारीख चुनने पर फ़ोकस साफ़ तौर पर करें.
• मोडल इनपुट: इस विकल्प की मदद से, टेक्स्ट फ़ील्ड को मोडल डेट पिकर से जोड़ा जा सकता है.

तारीख चुनने वाले इन टूल को अपने ऐप्लिकेशन में लागू करने के लिए, इनका इस्तेमाल करें: कंपोज़ेबल:

• DatePicker: तारीख चुनने वाले टूल के लिए सामान्य कंपोज़ेबल. कंटेनर इस्तेमाल से यह तय होता है कि उसे डॉक किया गया है या मॉडल.
• DatePickerDialog: मॉडल और मॉडल इनपुट तारीख, दोनों के लिए कंटेनर पिकर.
• DateRangePicker: तारीख चुनने वाले किसी भी विकल्प के लिए, उपयोगकर्ता शुरू और खत्म होने की तारीख वाली रेंज.

ध्यान दें: DatePicker, DatePickerDialog, और DateRangePicker एक्सपेरिमेंट के तौर पर उपलब्ध हैं. समस्या को ट्रैक करने वाले टूल पर जाकर, किसी भी समस्या की शिकायत करें.

राज्य

तारीख चुनने वाले अलग-अलग कंपोज़ेबल में शेयर किया जाने वाला मुख्य पैरामीटर यह है state, जिसमें या तो DatePickerState या DateRangePickerState ऑब्जेक्ट. उनकी प्रॉपर्टी तारीख चुनने वाले टूल का इस्तेमाल करके उपयोगकर्ता की चुनी गई तारीख, जैसे कि चुनी गई मौजूदा तारीख.

चुनी गई तारीख का इस्तेमाल कैसे किया जा सकता है, इस बारे में ज़्यादा जानकारी के लिए, Use सेक्शन चुनें.

डॉक किया गया तारीख चुनने वाला टूल

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

@Composable
fun DatePickerDocked() {
    var showDatePicker by remember { mutableStateOf(false) }
    val datePickerState = rememberDatePickerState()
    val selectedDate = datePickerState.selectedDateMillis?.let {
        convertMillisToDate(it)
    } ?: ""

    Box(
        modifier = Modifier.fillMaxWidth()
    ) {
        OutlinedTextField(
            value = selectedDate,
            onValueChange = { },
            label = { Text("DOB") },
            readOnly = true,
            trailingIcon = {
                IconButton(onClick = { showDatePicker = !showDatePicker }) {
                    Icon(
                        imageVector = Icons.Default.DateRange,
                        contentDescription = "Select date"
                    )
                }
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(64.dp)
        )

        if (showDatePicker) {
            Popup(
                onDismissRequest = { showDatePicker = false },
                alignment = Alignment.TopStart
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .offset(y = 64.dp)
                        .shadow(elevation = 4.dp)
                        .background(MaterialTheme.colorScheme.surface)
                        .padding(16.dp)
                ) {
                    DatePicker(
                        state = datePickerState,
                        showModeToggle = false
                    )
                }
            }
        }
    }
}

fun convertMillisToDate(millis: Long): String {
    val formatter = SimpleDateFormat("MM/dd/yyyy", Locale.getDefault())
    return formatter.format(Date(millis))
}
DatePickers.kt

ध्यान दें: यह उदाहरण पूरी तरह से सही है. चुनी गई तारीख को सार्वजनिक करने का तरीका अन्य उदाहरण देखें.

कोड के बारे में खास जानकारी

• जब उपयोगकर्ता IconButton पर क्लिक करता है, तो तारीख चुनने वाला टूल दिखता है.
  • आइकन बटन OutlinedTextField की trailingIcon पैरामीटर.
  • showDatePicker स्टेट वैरिएबल, यह कंट्रोल करता है कि डॉक किया गया तारीख चुनने वाला टूल.
• तारीख चुनने वाले टूल का कंटेनर एक Popup कंपोज़ेबल है, जो कॉन्टेंट, दूसरे एलिमेंट के लेआउट पर असर डाले बिना.
• selectedDate चुनी गई तारीख की वैल्यू को DatePickerState ऑब्जेक्ट देता है और convertMillisToDate का इस्तेमाल करके इसे फ़ॉर्मैट करता है फ़ंक्शन का इस्तेमाल करना होगा.
• चुनी गई तारीख, टेक्स्ट फ़ील्ड में दिखती है.
• डॉक किए गए तारीख चुनने वाले टूल को offset का इस्तेमाल करके, टेक्स्ट फ़ील्ड के नीचे रखा गया है कार्रवाई बदलने वाली कुंजी.
• Box का इस्तेमाल रूट कंटेनर के तौर पर किया जाता है, ताकि टेक्स्ट की सही लेयर बनाई जा सके फ़ील्ड और तारीख चुनने वाला टूल.

नतीजे

कैलेंडर आइकॉन पर क्लिक करने के बाद, यह तरीका इस तरह दिखता है:

पहली इमेज. डॉक किया गया तारीख चुनने वाला टूल.

मोडल तारीख चुनने वाला विजेट

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

@Composable
fun DatePickerModal(
    onDateSelected: (Long?) -> Unit,
    onDismiss: () -> Unit
) {
    val datePickerState = rememberDatePickerState()

    DatePickerDialog(
        onDismissRequest = onDismiss,
        confirmButton = {
            TextButton(onClick = {
                onDateSelected(datePickerState.selectedDateMillis)
                onDismiss()
            }) {
                Text("OK")
            }
        },
        dismissButton = {
            TextButton(onClick = onDismiss) {
                Text("Cancel")
            }
        }
    ) {
        DatePicker(state = datePickerState)
    }
}
DatePickers.kt

कोड के बारे में खास जानकारी

• DatePickerModal कंपोज़ेबल फ़ंक्शन में मोडल तारीख चुनने वाला टूल दिखता है.
• onDateSelected lambda एक्सप्रेशन तब लागू होता है, जब उपयोगकर्ता किसी तारीख.
  • इससे पैरंट कंपोज़ेबल में चुनी गई तारीख दिखती है.
• onDismiss lambda एक्सप्रेशन तब लागू होता है, जब उपयोगकर्ता डायलॉग.

नतीजे

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

दूसरी इमेज. मोडल तारीख चुनने वाला टूल.

मोडल तारीख चुनने वाला टूल

इनपुट के साथ मोडल डेट पिकर, एक डायलॉग दिखाता है. यह डायलॉग, स्क्रीन पर फ़्लोट करता है और उपयोगकर्ता को तारीख डालने की अनुमति देता है.

@Composable
fun DatePickerModalInput(
    onDateSelected: (Long?) -> Unit,
    onDismiss: () -> Unit
) {
    val datePickerState = rememberDatePickerState(initialDisplayMode = DisplayMode.Input)

    DatePickerDialog(
        onDismissRequest = onDismiss,
        confirmButton = {
            TextButton(onClick = {
                onDateSelected(datePickerState.selectedDateMillis)
                onDismiss()
            }) {
                Text("OK")
            }
        },
        dismissButton = {
            TextButton(onClick = onDismiss) {
                Text("Cancel")
            }
        }
    ) {
        DatePicker(state = datePickerState)
    }
}
DatePickers.kt

कोड के बारे में खास जानकारी

यह मॉडल तारीख चुनने वाले टूल के उदाहरण जैसा ही है. मुख्य अंतर यह है:

• initialDisplayMode पैरामीटर, शुरुआती डिसप्ले मोड को इस पर सेट करता है DisplayMode.Input.

तीसरी इमेज. इनपुट के साथ मोडल तारीख चुनने वाला टूल.

तारीख की सीमा के साथ तारीख चुनने वाला टूल

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

DateRangePicker का इस्तेमाल बिलकुल DatePicker की तरह ही है. आप PopUp के बच्चे के तौर पर डॉक पिकर के लिए इसका इस्तेमाल किया जा सकता है या मॉडल पिकर पर क्लिक करें और उसे DatePickerDialog को पास करें. मुख्य अंतर यह है जिन्हें आप DatePickerState के बजाय DateRangePickerState का उपयोग करते हैं.

नीचे दिया गया स्निपेट सीमा:

@Composable
fun DateRangePickerModal(
    onDateRangeSelected: (Pair<Long?, Long?>) -> Unit,
    onDismiss: () -> Unit
) {
    val dateRangePickerState = rememberDateRangePickerState()

    DatePickerDialog(
        onDismissRequest = onDismiss,
        confirmButton = {
            TextButton(
                onClick = {
                    onDateRangeSelected(
                        Pair(
                            dateRangePickerState.selectedStartDateMillis,
                            dateRangePickerState.selectedEndDateMillis
                        )
                    )
                    onDismiss()
                }
            ) {
                Text("OK")
            }
        },
        dismissButton = {
            TextButton(onClick = onDismiss) {
                Text("Cancel")
            }
        }
    ) {
        DateRangePicker(
            state = dateRangePickerState,
            title = {
                Text(
                    text = "Select date range"
                )
            },
            showModeToggle = false,
            modifier = Modifier
                .fillMaxWidth()
                .height(500.dp)
                .padding(16.dp)
        )
    }
}
DatePickers.kt

कोड के बारे में खास जानकारी

• onDateRangeSelected पैरामीटर एक कॉलबैक है, जिसे Pair<Long?, Long?>, जो चुनी गई शुरू और खत्म होने की तारीखें दिखाता है. यह चुनी गई रेंज का पैरंट कंपोज़ेबल ऐक्सेस देता है.
• rememberDateRangePickerState(), तारीख की सीमा के लिए स्थिति बनाता है पिकर.
• DatePickerDialog, एक मॉडल डायलॉग कंटेनर बनाता है.
• पुष्टि करें बटन के onClick हैंडलर में, onDateRangeSelected पास हो गया है चुनी गई रेंज को पैरंट कंपोज़ेबल में सेट किया गया है.
• DateRangePicker कंपोज़ेबल, डायलॉग कॉन्टेंट के तौर पर काम करता है.

नतीजे

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

चौथी इमेज. चुनी गई सीमा के साथ मोडल तारीख चुनने वाला टूल.

चुनी गई तारीख का इस्तेमाल करें

चुनी गई तारीख को कैप्चर करने के लिए, उसे पैरंट कंपोज़ेबल में Long के तौर पर ट्रैक करें और onDateSelected में मान को DatePicker पर पास करें. नीचे दिया गया स्निपेट इसे प्रदर्शित करता है, हालांकि आप इसका पूरा कार्यान्वयन आधिकारिक स्निपेट ऐप्लिकेशन के.

// ...
    var selectedDate by remember { mutableStateOf<Long?>(null) }
// ...
        if (selectedDate != null) {
            val date = Date(selectedDate!!)
            val formattedDate = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault()).format(date)
            Text("Selected date: $formattedDate")
        } else {
            Text("No date selected")
        }
// ...
        DatePickerModal(
            onDateSelected = {
                selectedDate = it
                showModal = false
            },
            onDismiss = { showModal = false }
        )
    }
// ...
DatePickers.kt

यह बात रेंज की तारीख चुनने वाले टूल पर भी लागू होती है. हालांकि, आपको: शुरुआती और आखिरी वैल्यू को कैप्चर करने के लिए, Pair<Long?, Long?> या डेटा क्लास का इस्तेमाल करना.

अहम जानकारी: चुनी गई तारीख के लिए Long का इस्तेमाल करने के बजाय, पैरंट कंपोज़ेबल से चाइल्ड के लिए ऑब्जेक्ट को सबमिट करना. ऐसा करने से आपको पैरंट में पूरी स्थिति की जानकारी मिल जाती है.

यह भी देखें:

• मटीरियल डिज़ाइन के लिए डेट पिकर
• टाइम पिकर