तारीख चुनने वाले टूल की मदद से, उपयोगकर्ता तारीख, तारीख की सीमा या दोनों चुन सकते हैं. वे किसी कैलेंडर डायलॉग या टेक्स्ट इनपुट का इस्तेमाल करें, ताकि उपयोगकर्ता तारीख चुन सकें.
प्रकार
तारीख चुनने वाले टूल तीन तरह के होते हैं:
- डॉक किया गया: लेआउट में इनलाइन दिखता है. यह संक्षिप्त आकार के लिए उपयुक्त है ऐसे लेआउट जहां खास तौर पर बनाए गए डायलॉग से रुकावट पैदा हो सकती है.
- मोडल: ऐप्लिकेशन के कॉन्टेंट को ओवरले करने वाले डायलॉग बॉक्स के तौर पर दिखता है. इससे पता चलता है कि तारीख चुनने पर फ़ोकस साफ़ तौर पर करें.
- मोडल इनपुट: इस विकल्प की मदद से, टेक्स्ट फ़ील्ड को मोडल डेट पिकर से जोड़ा जा सकता है.
तारीख चुनने वाले इन टूल को अपने ऐप्लिकेशन में लागू करने के लिए, इनका इस्तेमाल करें: कंपोज़ेबल:
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)) }
कोड के बारे में खास जानकारी
- जब उपयोगकर्ता
IconButton
पर क्लिक करता है, तो तारीख चुनने वाला टूल दिखता है.- आइकन बटन
OutlinedTextField
कीtrailingIcon
पैरामीटर. showDatePicker
स्टेट वैरिएबल, यह कंट्रोल करता है कि डॉक किया गया तारीख चुनने वाला टूल.
- आइकन बटन
- तारीख चुनने वाले टूल का कंटेनर एक
Popup
कंपोज़ेबल है, जो कॉन्टेंट, दूसरे एलिमेंट के लेआउट पर असर डाले बिना. selectedDate
चुनी गई तारीख की वैल्यू कोDatePickerState
ऑब्जेक्ट देता है औरconvertMillisToDate
का इस्तेमाल करके इसे फ़ॉर्मैट करता है फ़ंक्शन का इस्तेमाल करना होगा.- चुनी गई तारीख, टेक्स्ट फ़ील्ड में दिखती है.
- डॉक किए गए तारीख चुनने वाले टूल को
offset
का इस्तेमाल करके, टेक्स्ट फ़ील्ड के नीचे रखा गया है कार्रवाई बदलने वाली कुंजी. Box
का इस्तेमाल रूट कंटेनर के तौर पर किया जाता है, ताकि टेक्स्ट की सही लेयर बनाई जा सके फ़ील्ड और तारीख चुनने वाला टूल.
नतीजे
कैलेंडर आइकॉन पर क्लिक करने के बाद, यह तरीका इस तरह दिखता है:
![डॉक किए गए तारीख चुनने वाले टूल का उदाहरण.](https://developer.android.com/static/develop/ui/compose/images/components/datepicker-docked.png?hl=hi)
मोडल तारीख चुनने वाला विजेट
मोडल तारीख चुनने वाला टूल, स्क्रीन पर फ़्लोट करने वाला डायलॉग दिखाता है. लागू करने के लिए
एक 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) } }
कोड के बारे में खास जानकारी
DatePickerModal
कंपोज़ेबल फ़ंक्शन में मोडल तारीख चुनने वाला टूल दिखता है.onDateSelected
lambda एक्सप्रेशन तब लागू होता है, जब उपयोगकर्ता किसी तारीख.- इससे पैरंट कंपोज़ेबल में चुनी गई तारीख दिखती है.
onDismiss
lambda एक्सप्रेशन तब लागू होता है, जब उपयोगकर्ता डायलॉग.
नतीजे
यह लागू होने का तरीका इस तरह दिखता है:
![मोडल तारीख चुनने वाले टूल का उदाहरण.](https://developer.android.com/static/develop/ui/compose/images/components/datepicker-modal.png?hl=hi)
मोडल तारीख चुनने वाला टूल
इनपुट के साथ मोडल डेट पिकर, एक डायलॉग दिखाता है. यह डायलॉग, स्क्रीन पर फ़्लोट करता है और उपयोगकर्ता को तारीख डालने की अनुमति देता है.
@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) } }
कोड के बारे में खास जानकारी
यह मॉडल तारीख चुनने वाले टूल के उदाहरण जैसा ही है. मुख्य अंतर यह है:
initialDisplayMode
पैरामीटर, शुरुआती डिसप्ले मोड को इस पर सेट करता हैDisplayMode.Input
.
![इनपुट के साथ मोडल तारीख चुनने वाला टूल.](https://developer.android.com/static/develop/ui/compose/images/components/datepicker-modal-input.png?hl=hi)
तारीख की सीमा के साथ तारीख चुनने वाला टूल
तारीख चुनने वाला ऐसा टूल बनाया जा सकता है जिसकी मदद से उपयोगकर्ता, शुरू होने के बीच की समयसीमा चुन सकते हैं
और खत्म होने की तारीख डालें. ऐसा करने के लिए, 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) ) } }
कोड के बारे में खास जानकारी
onDateRangeSelected
पैरामीटर एक कॉलबैक है, जिसेPair<Long?, Long?>
, जो चुनी गई शुरू और खत्म होने की तारीखें दिखाता है. यह चुनी गई रेंज का पैरंट कंपोज़ेबल ऐक्सेस देता है.rememberDateRangePickerState()
, तारीख की सीमा के लिए स्थिति बनाता है पिकर.DatePickerDialog
, एक मॉडल डायलॉग कंटेनर बनाता है.- पुष्टि करें बटन के
onClick
हैंडलर में,onDateRangeSelected
पास हो गया है चुनी गई रेंज को पैरंट कंपोज़ेबल में सेट किया गया है. DateRangePicker
कंपोज़ेबल, डायलॉग कॉन्टेंट के तौर पर काम करता है.
नतीजे
यह लागू होने का तरीका इस तरह दिखता है:
![मोडल रेंज के लिए तारीख चुनने वाले टूल का उदाहरण.](https://developer.android.com/static/develop/ui/compose/images/components/datepicker-range.png?hl=hi)
चुनी गई तारीख का इस्तेमाल करें
चुनी गई तारीख को कैप्चर करने के लिए, उसे पैरंट कंपोज़ेबल में 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 } ) } // ...
यह बात रेंज की तारीख चुनने वाले टूल पर भी लागू होती है. हालांकि, आपको:
शुरुआती और आखिरी वैल्यू को कैप्चर करने के लिए, Pair<Long?, Long?>
या डेटा क्लास का इस्तेमाल करना.