חלונית לבחירת תאריך

חלונית לבחירת תאריך מאפשרת למשתמשים לבחור תאריך, טווח תאריכים או את שניהם. הם משתמשים בתיבת דו-שיח של יומן או בקלט טקסט כדי לאפשר למשתמשים לבחור תאריכים.

סוגים

יש שלושה סוגים של בוררי תאריכים:

• מחובר לאביזר עגינה: מופיע בתוך השורה. זה מתאים להצגה קומפקטית פריסות שבהן תיבת דו-שיח ייעודית עלולה להפריע.
• מודולרי: מוצג כתיבת דו-שיח שמכסה את תוכן האפליקציה. זה מספק ניקוי המיקוד בבחירת התאריך.
• קלט מודלי: שילוב של שדה טקסט עם חלונית לבחירת תאריך מודל.

אפשר להטמיע את בוחרי התאריכים באפליקציה באמצעות תכנים קומפוזביליים:

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

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 מציגה חלונית לבחירת תאריך מודאלי.
• ביטוי lambda onDateSelected מופעל כשהמשתמש בוחר תאריך.
  • הוא חושף את התאריך שנבחר לתוכן הקומפוזבילי ברמה העליונה.
• ביטוי lambda 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. ההבדל העיקרי הוא אתם משתמשים ב-DateRangePickerState במקום ב-DatePickerState.

קטע הקוד הבא מדגים איך יוצרים חלונית לבחירת תאריך של מודל טווח:

@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 הוא קריאה חוזרת (callback) שמקבלת Pair<Long?, Long?> שמייצג את תאריכי ההתחלה והסיום שנבחרו. הזה מעניקה להורה הגישה הקומפוזבילית לטווח שנבחר.
• rememberDateRangePickerState() יוצר את המצב של טווח התאריכים בוחר.
• הרכיב DatePickerDialog יוצר קונטיינר של תיבת דו-שיח של חלון.
• ב-handler של לחצן האישור onClick, onDateRangeSelected מעבירים הטווח שנבחר לאפשרות ההורה הקומפוזבילית.
• התוכן הקומפוזבילי DateRangePicker משמש כתוכן של תיבת הדו-שיח.

תוצאות

היישום הזה נראה כך:

שימוש בתאריך שנבחר

כדי לתעד את התאריך שנבחר, צריך לעקוב אחריו בתוכן הקומפוזבילי ברמה העליונה Long וגם מעבירים את הערך ל-DatePicker ב-onDateSelected. קטע הקוד הבא ממחיש זאת, למרות שאפשר לראות את ההטמעה המלאה ב של קטעי טקסט.

// ...
    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?> או במחלקת נתונים כדי לתעד את ערכי ההתחלה והסיום.

למידע נוסף

• בוררי תאריכים ב-Material Design
• כלים לבחירת שעה