@momo-kits/native-kits 0.157.1-skill.1-debug → 0.157.1-skill.3-debug

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-4-datetimepicker/with_skill/outputs/DateTimePickerExample.kt

@@ -0,0 +1,318 @@
+package com.example
+
+import android.app.DatePickerDialog
+import android.app.TimePickerDialog
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableLongStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
+import vn.momo.kits.components.DateTimePicker
+import vn.momo.kits.components.Title
+import vn.momo.kits.components.TitleType
+import java.text.SimpleDateFormat
+import java.util.Calendar
+import java.util.Date
+import java.util.Locale
+
+/**
+ * DateTimePicker Component Example
+ *
+ * This example demonstrates how to use the DateTimePicker component from MoMo Native Kits
+ * for date selection in a Kotlin Multiplatform Compose project.
+ *
+ * The DateTimePicker supports:
+ * - Single date selection
+ * - Date range selection (isRangeMode)
+ * - Minimum and maximum date constraints
+ * - Custom date format
+ */
+
+@Composable
+fun DateTimePickerExample() {
+    val context = LocalContext.current
+
+    // State for single date selection
+    var selectedDate by remember { mutableLongStateOf<Long?>(null) }
+
+    // State for date range selection
+    var startDate by remember { mutableLongStateOf<Long?>(null) }
+    var endDate by remember { mutableLongStateOf<Long?>(null) }
+
+    // State to toggle between single and range mode
+    var isRangeMode by remember { mutableStateOf(false) }
+
+    // Date formatter
+    val dateFormat = SimpleDateFormat("dd/MM/yyyy", Locale.getDefault())
+
+    // Calculate min and max dates (e.g., today and 1 year from now)
+    val calendar = Calendar.getInstance()
+    val today = calendar.timeInMillis
+
+    calendar.add(Calendar.YEAR, 1)
+    val oneYearFromNow = calendar.timeInMillis
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+    ) {
+        // Title
+        Title(
+            text = "DateTimePicker Example",
+            type = TitleType.TITLE_1
+        )
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        // Single Date Selection Mode
+        Text(text = "Single Date Selection:")
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // Display selected date
+        Text(
+            text = if (selectedDate != null) {
+                "Selected: ${dateFormat.format(Date(selectedDate!!))}"
+            } else {
+                "No date selected"
+            }
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // Using DateTimePicker for single date selection
+        DateTimePicker(
+            selectedDate = selectedDate,
+            onDateSelected = { timestamp ->
+                selectedDate = timestamp
+            },
+            minDate = today,
+            maxDate = oneYearFromNow,
+            dateFormat = "dd/MM/yyyy",
+            isRangeMode = false,
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        // Date Range Selection Mode
+        Text(text = "Date Range Selection:")
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // Display selected range
+        Text(
+            text = buildString {
+                if (startDate != null && endDate != null) {
+                    append("From: ${dateFormat.format(Date(startDate!!))}")
+                    append(" To: ${dateFormat.format(Date(endDate!!))}")
+                } else if (startDate != null) {
+                    append("Start: ${dateFormat.format(Date(startDate!!))}")
+                    append(" (Select end date)")
+                } else {
+                    append("No range selected")
+                }
+            }
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // Using DateTimePicker for date range selection
+        DateTimePicker(
+            selectedDate = startDate,
+            onDateSelected = { timestamp ->
+                if (isRangeMode) {
+                    // In range mode, handle start/end based on current state
+                    if (startDate == null || (startDate != null && endDate != null)) {
+                        startDate = timestamp
+                        endDate = null
+                    } else if (timestamp > startDate) {
+                        endDate = timestamp
+                    } else {
+                        startDate = timestamp
+                        endDate = null
+                    }
+                } else {
+                    selectedDate = timestamp
+                }
+            },
+            minDate = today,
+            maxDate = oneYearFromNow,
+            dateFormat = "dd/MM/yyyy",
+            isRangeMode = true,
+            onRangeSelected = { start, end ->
+                startDate = start
+                endDate = end
+            },
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        Spacer(modifier = Modifier.height(24.dp))
+
+        // Toggle mode button
+        Button(
+            onClick = {
+                isRangeMode = !isRangeMode
+                // Reset selection when toggling mode
+                selectedDate = null
+                startDate = null
+                endDate = null
+            },
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(
+                text = if (isRangeMode) "Switch to Single Date Mode" else "Switch to Range Mode"
+            )
+        }
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        // Clear selection button
+        Button(
+            onClick = {
+                selectedDate = null
+                startDate = null
+                endDate = null
+            },
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(text = "Clear Selection")
+        }
+    }
+}
+
+/**
+ * Alternative implementation using Android's built-in DatePickerDialog
+ * for more customization options
+ */
+@Composable
+fun AlternativeDatePickerExample() {
+    val context = LocalContext.current
+    var selectedDate by remember { mutableStateOf<Long?>(null) }
+    val dateFormat = SimpleDateFormat("dd/MM/yyyy", Locale.getDefault())
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+    ) {
+        Text(
+            text = if (selectedDate != null) {
+                "Selected: ${dateFormat.format(Date(selectedDate!!))}"
+            } else {
+                "Tap to select a date"
+            }
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        Button(
+            onClick = {
+                val calendar = Calendar.getInstance()
+                selectedDate?.let { calendar.timeInMillis = it }
+
+                DatePickerDialog(
+                    context,
+                    { _, year, month, dayOfMonth ->
+                        val selectedCalendar = Calendar.getInstance()
+                        selectedCalendar.set(year, month, dayOfMonth)
+                        selectedDate = selectedCalendar.timeInMillis
+                    },
+                    calendar.get(Calendar.YEAR),
+                    calendar.get(Calendar.MONTH),
+                    calendar.get(Calendar.DAY_OF_MONTH)
+                ).show()
+            },
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(text = "Open Date Picker Dialog")
+        }
+    }
+}
+
+/**
+ * Example with TimePicker
+ */
+@Composable
+fun DateTimePickerWithTimeExample() {
+    var selectedDate by remember { mutableLongStateOf<Long?>(null) }
+    var selectedHour by remember { mutableIntStateOf(0) }
+    var selectedMinute by remember { mutableIntStateOf(0) }
+
+    val context = LocalContext.current
+    val dateFormat = SimpleDateFormat("dd/MM/yyyy HH:mm", Locale.getDefault())
+
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+    ) {
+        Text(
+            text = if (selectedDate != null) {
+                val calendar = Calendar.getInstance()
+                calendar.timeInMillis = selectedDate!!
+                calendar.set(Calendar.HOUR_OF_DAY, selectedHour)
+                calendar.set(Calendar.MINUTE, selectedMinute)
+                "Selected: ${dateFormat.format(calendar.time)}"
+            } else {
+                "Select date and time"
+            }
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
+
+        // Date selection
+        Button(
+            onClick = {
+                val calendar = Calendar.getInstance()
+                selectedDate?.let { calendar.timeInMillis = it }
+
+                DatePickerDialog(
+                    context,
+                    { _, year, month, dayOfMonth ->
+                        val selectedCalendar = Calendar.getInstance()
+                        selectedCalendar.set(year, month, dayOfMonth)
+                        selectedDate = selectedCalendar.timeInMillis
+                    },
+                    calendar.get(Calendar.YEAR),
+                    calendar.get(Calendar.MONTH),
+                    calendar.get(Calendar.DAY_OF_MONTH)
+                ).show()
+            },
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(text = "Select Date")
+        }
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        // Time selection
+        Button(
+            onClick = {
+                TimePickerDialog(
+                    context,
+                    { _, hourOfDay, minute ->
+                        selectedHour = hourOfDay
+                        selectedMinute = minute
+                    },
+                    selectedHour,
+                    selectedMinute,
+                    true // 24-hour format
+                ).show()
+            },
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(text = "Select Time")
+        }
+    }
+}

package/.claude/momo-native-kits-skill/workspace/iteration-1/eval-4-datetimepicker/without_skill/outputs/DateTimePickerExample.kt

@@ -0,0 +1,330 @@
+package com.example.datetimepicker
+
+import android.app.DatePickerDialog
+import android.app.TimePickerDialog
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
+import java.text.SimpleDateFormat
+import java.util.Calendar
+import java.util.Date
+import java.util.Locale
+
+/**
+ * DateTimePicker Example in Jetpack Compose
+ *
+ * This example demonstrates different ways to use DatePicker and TimePicker
+ * dialogs in Android Jetpack Compose applications.
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun DateTimePickerScreen() {
+    // State for selected date and time
+    var selectedDate by remember { mutableStateOf<Long?>(null) }
+    var selectedTime by remember { mutableStateOf<Long?>(null) }
+
+    // Formatters for displaying date and time
+    val dateFormatter = remember { SimpleDateFormat("dd/MM/yyyy", Locale.getDefault()) }
+    val timeFormatter = remember { SimpleDateFormat("HH:mm", Locale.getDefault()) }
+    val dateTimeFormatter = remember { SimpleDateFormat("dd/MM/yyyy HH:mm", Locale.getDefault()) }
+
+    // Calendar instance for dialogs
+    val calendar = remember { Calendar.getInstance() }
+
+    // Context for showing dialogs
+    val context = LocalContext.current
+
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = { Text("DateTimePicker Example") }
+            )
+        }
+    ) { paddingValues ->
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(paddingValues)
+                .padding(16.dp)
+        ) {
+            Text(
+                text = "Date & Time Selection",
+                style = MaterialTheme.typography.headlineSmall
+            )
+
+            Spacer(modifier = Modifier.height(24.dp))
+
+            // ===== Date Picker Example =====
+            Text(
+                text = "Date Picker",
+                style = MaterialTheme.typography.titleMedium
+            )
+
+            Spacer(modifier = Modifier.height(8.dp))
+
+            OutlinedTextField(
+                value = selectedDate?.let { dateFormatter.format(Date(it)) } ?: "",
+                onValueChange = { },
+                label = { Text("Select Date") },
+                readOnly = true,
+                modifier = Modifier.fillMaxWidth(),
+                trailingIcon = {
+                    TextButton(onClick = {
+                        // Show DatePickerDialog
+                        val datePickerDialog = DatePickerDialog(
+                            context,
+                            { _, year, month, dayOfMonth ->
+                                calendar.set(year, month, dayOfMonth)
+                                selectedDate = calendar.timeInMillis
+                            },
+                            calendar.get(Calendar.YEAR),
+                            calendar.get(Calendar.MONTH),
+                            calendar.get(Calendar.DAY_OF_MONTH)
+                        )
+                        datePickerDialog.show()
+                    }) {
+                        Text("Pick")
+                    }
+                }
+            )
+
+            Spacer(modifier = Modifier.height(16.dp))
+
+            // ===== Time Picker Example =====
+            Text(
+                text = "Time Picker",
+                style = MaterialTheme.typography.titleMedium
+            )
+
+            Spacer(modifier = Modifier.height(8.dp))
+
+            OutlinedTextField(
+                value = selectedTime?.let {
+                    val cal = Calendar.getInstance().apply { timeInMillis = it }
+                    String.format(
+                        Locale.getDefault(),
+                        "%02d:%02d",
+                        cal.get(Calendar.HOUR_OF_DAY),
+                        cal.get(Calendar.MINUTE)
+                    )
+                } ?: "",
+                onValueChange = { },
+                label = { Text("Select Time") },
+                readOnly = true,
+                modifier = Modifier.fillMaxWidth(),
+                trailingIcon = {
+                    TextButton(onClick = {
+                        // Show TimePickerDialog
+                        val timePickerDialog = TimePickerDialog(
+                            context,
+                            { _, hourOfDay, minute ->
+                                calendar.set(Calendar.HOUR_OF_DAY, hourOfDay)
+                                calendar.set(Calendar.MINUTE, minute)
+                                selectedTime = calendar.timeInMillis
+                            },
+                            calendar.get(Calendar.HOUR_OF_DAY),
+                            calendar.get(Calendar.MINUTE),
+                            true // 24-hour format
+                        )
+                        timePickerDialog.show()
+                    }) {
+                        Text("Pick")
+                    }
+                }
+            )
+
+            Spacer(modifier = Modifier.height(16.dp))
+
+            // ===== Combined Date & Time Example =====
+            Text(
+                text = "Date & Time Picker",
+                style = MaterialTheme.typography.titleMedium
+            )
+
+            Spacer(modifier = Modifier.height(8.dp))
+
+            OutlinedTextField(
+                value = if (selectedDate != null && selectedTime != null) {
+                    val combinedCal = Calendar.getInstance().apply {
+                        timeInMillis = selectedDate!!
+                        val timeCal = Calendar.getInstance().apply { timeInMillis = selectedTime!! }
+                        set(Calendar.HOUR_OF_DAY, timeCal.get(Calendar.HOUR_OF_DAY))
+                        set(Calendar.MINUTE, timeCal.get(Calendar.MINUTE))
+                    }
+                    dateTimeFormatter.format(Date(combinedCal.timeInMillis))
+                } else if (selectedDate != null) {
+                    dateFormatter.format(Date(selectedDate!!))
+                } else {
+                    ""
+                },
+                onValueChange = { },
+                label = { Text("Select Date & Time") },
+                readOnly = true,
+                modifier = Modifier.fillMaxWidth(),
+                trailingIcon = {
+                    TextButton(onClick = {
+                        // First show DatePicker, then TimePicker
+                        val datePickerDialog = DatePickerDialog(
+                            context,
+                            { _, year, month, dayOfMonth ->
+                                calendar.set(year, month, dayOfMonth)
+                                selectedDate = calendar.timeInMillis
+
+                                // After date is selected, show time picker
+                                val timePickerDialog = TimePickerDialog(
+                                    context,
+                                    { _, hourOfDay, minute ->
+                                        calendar.set(Calendar.HOUR_OF_DAY, hourOfDay)
+                                        calendar.set(Calendar.MINUTE, minute)
+                                        selectedTime = calendar.timeInMillis
+                                    },
+                                    calendar.get(Calendar.HOUR_OF_DAY),
+                                    calendar.get(Calendar.MINUTE),
+                                    true
+                                )
+                                timePickerDialog.show()
+                            },
+                            calendar.get(Calendar.YEAR),
+                            calendar.get(Calendar.MONTH),
+                            calendar.get(Calendar.DAY_OF_MONTH)
+                        )
+                        datePickerDialog.show()
+                    }) {
+                        Text("Pick")
+                    }
+                }
+            )
+
+            Spacer(modifier = Modifier.height(32.dp))
+
+            // ===== Display Selected Values =====
+            Text(
+                text = "Selected Values:",
+                style = MaterialTheme.typography.titleMedium
+            )
+
+            Spacer(modifier = Modifier.height(8.dp))
+
+            Text(
+                text = "Date: ${selectedDate?.let { dateFormatter.format(Date(it)) } ?: "Not selected"}"
+            )
+
+            Text(
+                text = "Time: ${selectedTime?.let {
+                    val cal = Calendar.getInstance().apply { timeInMillis = it }
+                    String.format(Locale.getDefault(), "%02d:%02d", cal.get(Calendar.HOUR_OF_DAY), cal.get(Calendar.MINUTE))
+                } ?: "Not selected"}"
+            )
+
+            Spacer(modifier = Modifier.height(24.dp))
+
+            // ===== Clear Button =====
+            OutlinedButton(
+                onClick = {
+                    selectedDate = null
+                    selectedTime = null
+                },
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Text("Clear Selection")
+            }
+        }
+    }
+}
+
+/**
+ * Alternative approach using Material3 DatePicker and TimePicker composables
+ * (Available in newer versions of Material3)
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun DateTimePickerWithMaterial3(
+    onDateTimeSelected: (Long) -> Unit = {}
+) {
+    // This requires Material3 1.1.0+ and shows inline pickers
+    // For full implementation, use the datePicker and timePicker state APIs
+
+    var showDatePicker by remember { mutableStateOf(false) }
+    var showTimePicker by remember { mutableStateOf(false) }
+    var selectedDateMillis by remember { mutableStateOf<Long?>(null) }
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp)
+    ) {
+        Button(
+            onClick = { showDatePicker = true },
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text("Show Date Picker Dialog")
+        }
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        Button(
+            onClick = { showTimePicker = true },
+            modifier = Modifier.fillMaxWidth(),
+            enabled = selectedDateMillis != null
+        ) {
+            Text("Show Time Picker Dialog")
+        }
+
+        // Note: Material3 also provides DatePicker and TimePicker composables
+        // that can be used inline (not as dialogs) for more customization
+    }
+}
+
+/**
+ * Example of custom DatePickerDialog styling
+ */
+@Composable
+fun StyledDatePickerExample() {
+    val context = LocalContext.current
+    val calendar = remember { Calendar.getInstance() }
+
+    Button(
+        onClick = {
+            val dialog = DatePickerDialog(
+                context,
+                { _, year, month, dayOfMonth ->
+                    // Handle date selection
+                    calendar.set(year, month, dayOfMonth)
+                    println("Selected date: ${calendar.time}")
+                },
+                calendar.get(Calendar.YEAR),
+                calendar.get(Calendar.MONTH),
+                calendar.get(Calendar.DAY_OF_MONTH)
+            ).apply {
+                // Customize dialog
+                datePicker.firstDayOfWeek = Calendar.MONDAY
+                // Set min/max date if needed
+                // datePicker.minDate = ...
+                // datePicker.maxDate = ...
+            }
+            dialog.show()
+        }
+    ) {
+        Text("Styled Date Picker")
+    }
+}