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

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

प्रकार

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

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

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

  • 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 composable फ़ंक्शन, तारीख चुनने वाला मॉडल दिखाता है.
  • जब उपयोगकर्ता कोई तारीख चुनता है, तो 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?> या डेटा क्लास का इस्तेमाल करना होगा.

यह भी देखें: