date_format_field

Description:

date format field

A Textfield supporting automatic date formating.
Features #
This textfield supports four date time formating options:

Four Date formating styles
Automatic addition of separators
Two Spearators for time formating
Sets Keboard type to date keyboard

Getting Started #
In your flutter project pubspec.yaml add the dependency
dependencies:
date_time_formater: any
copied to clipboard
Inport the package to your file
import 'package:date_format_field/date_format_field.dart';
copied to clipboard
Create a Simple DateTime field
DateFormatField(
type: DateFormatType.type1,
onComplete: (date){
print(date.toString)
}
)
copied to clipboard
Usage #
Format Options #
DateFormatField takes in a required type this gives a date formating option for the textfield. The available types are:



type
example
description




type1
23/10/22
This format gives the last two values of the year. this type assumes the 21st century for all entries. It uses a backslash (/) for seperation of date


type2
23/10/2022
This format uses a backslash (/) for separation and gives the date in full


type3
23-10-22
This format gives the last two digits of the year and uses a dash (-) for separation. It assumes the 21st century for all entries


type4
23-10-2022
This format gives the year in full and uses a dash (-) for separation



Preview
Type 1

Type 2

Type 3

Type 4

basic example using type 4
DateFormatField(
type: DateFormatType.type4,
onComplete: (date){
print(date.toString)
}
)
copied to clipboard
Getting data #
The onComplete call back function returns a Datetime nullable object containing the result from the DateFormatField.
The response from the call back returns null when ever the field is not complete but when the entry for the date input is complete, it returns true.
You can use a null check to update your value once the entry is complete. See the example below
DateFormatField(
type: DateFormatType.type1,
onComplete: (date){
if(date != null){
setState((){
selectedDate = date!;
});
}
}
)
copied to clipboard
removing calendar Icon #
By default a calendar icon is attached as the trailling icon which triggers a Date Selection modal screen on clicking.
Calendar Icon on DateFormatField

Modal on clicking calendar Icon

Selecting a date prefills the DateFormatField using the selected date.
You can remove this icon by setting the addCalendar to false. this is shown in the example below:
DateFormatField(
type: DateFormatType.type4,
addCalendar: false,
onComplete: (date) {
print(date);
},
),
copied to clipboard
Adding Decoration to DateFormatField #
DateFormatField makes use of the default InputDecoration class which comes with Flutter TextFields. This allows you to style the textfield widget as much as you like. The example below shows this usage:
import 'package:date_format_field/date_format_field.dart';

DateFormatField(
type: DateFormatType.type4,
decoration: const InputDecoration(
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
fontStyle: FontStyle.italic,
),
border: InputBorder.none,
label: Text("Date"),
),
onComplete: (date) {
setState(() {
_date = date;
});
},
),
copied to clipboard

Support the package #
Have a feature you would like to see? why not lend the developers a hand 🤝