date_format_field 0.1.0

date_format_field: ^0.1.0 copied to clipboard

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

Inport the package to your file

import 'package:date_format_field/date_format_field.dart';

Create a Simple DateTime field

DateFormatField(
    type: DateFormatType.type1,
    onComplete: (date){
        print(date.toString)
    }
)

Usage #

Format Options #

DateFormatField takes in a required type this gives a date formating option for the textfield. The available types are:

Preview

Type 1

Type 2

Type 3

Type 4

basic example using type 4

DateFormatField(
    type: DateFormatType.type4,
    onComplete: (date){
        print(date.toString)
    }
)

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!;
            });
        }
    }
)

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);
    },
),

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;
        });
    },
),

Support the package #

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