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

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

प्रकार

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

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

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

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

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

राज्य

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

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

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

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

@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
                    )
                }
            }
        }
    }
}

@Composable
fun DatePickerFieldToModal(modifier: Modifier = Modifier) {
    var selectedDate by remember { mutableStateOf<Long?>(null) }
    var showModal by remember { mutableStateOf(false) }

    OutlinedTextField(
        value = selectedDate?.let { convertMillisToDate(it) } ?: "",
        onValueChange = { },
        label = { Text("DOB") },
        placeholder = { Text("MM/DD/YYYY") },
        trailingIcon = {
            Icon(Icons.Default.DateRange, contentDescription = "Select date")
        },
        modifier = modifier
            .fillMaxWidth()
            .pointerInput(selectedDate) {
                awaitEachGesture {
                    // Modifier.clickable doesn't work for text fields, so we use Modifier.pointerInput
                    // in the Initial pass to observe events before the text field consumes them
                    // in the Main pass.
                    awaitFirstDown(pass = PointerEventPass.Initial)
                    val upEvent = waitForUpOrCancellation(pass = PointerEventPass.Initial)
                    if (upEvent != null) {
                        showModal = true
                    }
                }
            }
    )

    if (showModal) {
        DatePickerModal(
            onDateSelected = { selectedDate = it },
            onDismiss = { showModal = 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 लैम्ब्डा एक्सप्रेशन लागू होता है.
  • यह पैरंट कॉम्पोज़ेबल को चुनी गई तारीख दिखाता है.
• जब उपयोगकर्ता डायलॉग को खारिज करता है, तब onDismiss लैम्ब्डा एक्सप्रेशन लागू होता है.

नतीजे

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

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

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

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

@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 का इस्तेमाल करने के बजाय, पैरंट कॉम्पोज़ेबल से चाइल्ड कॉम्पोज़ेबल में, राज्य ऑब्जेक्ट को पास किया जा सकता है. ऐसा करने से, आपको पैरंट में पूरी स्थिति कैप्चर करने में मदद मिलेगी.

यह भी देखें:

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