Jetpack compose date input text
Hi Everyone in this article i am sharing about the Jetpack compose date input text.
In this course you’ll create stunning animations using Jetpack Compose and learn about the API that allows you to create these animations in a snap.
Jetpack Compose is an innovative and super-cool toolkit that allows you to build an native Android UI in a declarative manner. The code that is written in a declarative manner specifies how the UI will appear based on the current state instead of altering the UI every time state changes. This is why Jetpack Compose lets you develop applications that use a more modular design by creating less code, and arranging it into smaller and reuseable components that are simpler to maintain. What is Jetpack Compose’s approach to Animations?
Jetpack compose date input text Example
Create a new Project with jetpack compose activity. and Build your project. after the follow below the steps.
Dependancies
dependencies {
implementation 'androidx.core:core-ktx:1.7.0'
implementation 'androidx.appcompat:appcompat:1.4.1'
implementation 'com.google.android.material:material:1.5.0'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.0'
implementation 'androidx.activity:activity-compose:1.4.0'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
}
MainActivity.kt Source Code Jetpack compose date input text.
import android.os.Build import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.annotation.RequiresApi import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.input.key.Key import androidx.compose.ui.input.key.key import androidx.compose.ui.input.key.onKeyEvent import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.text.* import androidx.compose.ui.text.input.* import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.jetpack.speechtotext.ui.theme.SpeechToTextTheme import java.text.SimpleDateFormat import java.time.LocalDateTime import java.time.ZoneId import java.util.*
class MainActivity : ComponentActivity() {
private var talk by mutableStateOf("Click to button Speech text ")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
SpeechToTextTheme {
Surface(color = MaterialTheme.colors.background) {
Scaffold(
topBar = {
TopAppBar(
title = {
Text(
text = "Jetpack Compose Date Input ",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Left
)
}
)
}
) {
DateInput()
}
}
}
}
}
Create a Function DateInput.
@Composable
fun DateInput() {
Column(
modifier = Modifier
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
var date by remember {
mutableStateOf(
TextFieldValue(
text = "dd-MM-yyyy"
)
)
}
DateTextField(
value = date,
onValueChange = {
date = it
}
)
}
}
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun DateTextField(
value: TextFieldValue,
modifier: Modifier = Modifier,
onValueChange: (TextFieldValue) -> Unit
) {
var isBackspacePressed by remember { mutableStateOf(false) }
OutlinedTextField(
value = value,
visualTransformation = DateFormatVisualTransformation(LocalTextStyle.current),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Done
),
onValueChange = {
// ex: "01-1M-yyyy" -> "011"
val date = it.text.takeDigitString()
if (date.length < 9) {
// if date length is 3 or 5, move cursor to index + 1
// ex: (| = cursor) "01-|1M-yyyy" to "01-1|M-yyyy"
val selection = if (!isBackspacePressed) {
when (date.length) {
3, 5 -> it.selection.start + 1
else -> it.selection.start
}
} else it.selection.start
onValueChange(
it.copy(
text = TextFieldDateFormatter.format(it),
selection = TextRange(selection)
)
)
}
},
modifier = modifier
.onKeyEvent { event ->
if (event.key == Key.Backspace) {
isBackspacePressed = true
return@onKeyEvent true
} else {
isBackspacePressed = false
}
false
}
)
}
class DateFormatVisualTransformation(
private val textStyle: TextStyle
): VisualTransformation {
override fun filter(text: AnnotatedString): TransformedText {
return TransformedText(
text = buildAnnotatedString {
for (word in text) {
withStyle(
textStyle.copy(
color = if (word.isDigit() || word == '-') textStyle.color
else Color.Gray
).toSpanStyle()
) {
append(word)
}
}
},
offsetMapping = OffsetMapping.Identity
)
}
}
object TextFieldDateFormatter {
private const val ddMMyyyy = "ddMMyyyy"
/**
* format "ddMMyyyy" to "dd-MMM-yyyy"
* @return formatted string, ex: "11-01-2007" or "11-0M-YYYY"
*/
fun format(
fieldValue: TextFieldValue,
minYear: Int = 2000,
maxYear: Int = 3000
): String {
val builder = StringBuilder()
val s = fieldValue.text.replace(
oldValue = listOf(" ", ".", ",", "-", "d", "M", "y"),
newValue = ""
)
if (s.length != 8) {
for (i in 0 until 8) {
builder.append(
try {
s[i]
} catch (e: Exception) {
ddMMyyyy[i]
}
)
}
} else builder.append(s)
repeat(3) {
when (it) {
0 -> {
val day = try {
"${builder[0]}${builder[1]}".toInt()
} catch (e: Exception) {
null
}
if (day != null) {
val dayMax = day
.coerceIn(
minimumValue = 1,
maximumValue = 31,
)
.toString()
builder.replace(
0,
2,
if (dayMax.length == 1) "0$dayMax" else dayMax
)
}
}
1 -> {
val month = try {
"${builder[2]}${builder[3]}".toInt()
} catch (e: Exception) {
null
}
if (month != null) {
val monthMax = month
.coerceIn(
minimumValue = 1,
maximumValue = 12,
)
.toString()
builder.replace(
2,
4,
if (monthMax.length == 1) "0$monthMax" else monthMax
)
}
}
2 -> {
val year = try {
"${builder[4]}${builder[5]}${builder[6]}${builder[7]}".toInt()
} catch (e: Exception) {
null
}
if (year != null) {
val yearMaxMin = year.coerceIn(
minimumValue = minYear,
maximumValue = maxYear
).toString()
builder.replace(4, 6, yearMaxMin.substring(0, 2))
builder.replace(6, 8, yearMaxMin.substring(2, 4))
}
}
}
}
return builder.toString()
.addStringBefore("-", 2) // dd-MMyyyy
.addStringBefore("-", 5) // dd-MM-yyyy
}
/**
* format time in milli second to formatted date
* @return formatted string, ex: "11-01-2007"
*/
// fun format(timeInMillis: Long): String {
// return SimpleDateFormat("dd-MM-yyyy", deviceLocale).format(timeInMillis)
// }
/**
* check if formattedDate is valid
*
* "01-01-2000" -> valid
* "01-0M-YYYY" -> not valid
* @param formattedDate "01-01-2000"
*/
fun isValid(formattedDate: String): Boolean {
return formattedDate.takeDigitString().length == 8
}
/**
* convert formatted string date to time in millis
* @param formattedDate "01-01-2000"
* @return time in millis
*/
@RequiresApi(Build.VERSION_CODES.O)
fun parse(formattedDate: String): Long {
val date = "${formattedDate[6]}${formattedDate[7]}${formattedDate[8]}${formattedDate[9]}-"
.plus("${formattedDate[3]}${formattedDate[4]}-")
.plus("${formattedDate[0]}${formattedDate[1]}")
.plus("T00:00")
return LocalDateTime.parse(date)
.atZone(ZoneId.of(TimeZone.getDefault().id, ZoneId.SHORT_IDS))
.toInstant()
.toEpochMilli()
}
}
/**
* take a string that is a number
*
* ex:
* val s = "123a456b"
* s.takeDigitString() => "123456"
* @author kafri8889
*/
fun String.takeDigitString(): String {
var builder = ""
forEach { if (it.isDigit()) builder += it }
return builder
}
/**
* add a new string before the given index
* @author kafri8889
*/
fun String.addStringBefore(s: String, index: Int): String {
val result = StringBuilder()
forEachIndexed { i, c ->
if (i == index) {
result.append(s)
result.append(c)
} else result.append(c)
}
return result.toString()
}
/**
* Returns a new string with all occurrences of oldValue replaced with newValue.
* @author kafri8889
*/
fun String.replace(
oldValue: List<String>,
newValue: String,
ignoreCase: Boolean = false
): String {
var result = this
oldValue.forEach { s ->
if (this.contains(s)) {
result = result.replace(s, newValue, ignoreCase)
}
}
return result
}
Now run your project and see the output. to enter the date month and year in input filed jetpack compose. Jetpack compose date input text.
Read More Tutorial
