Giter Club home page Giter Club logo

date_range_form_field's Introduction

date_range_form_field

A Flutter package for adding a DateRange widget into a form. A date picker UX is provided by showDateRangePicker. The widget will accept InputDecoration or use the default from the app's theme. Additionally, the widget will accept a date format, defaulting to MM-dd-yyyy.

Usage

This widget should be used like any other FormField within a form. It is important to note that the firstDate and lastDate properties correspond to the first and last valid dates. This widget must have a MaterialWidget ancestor, such as a MaterialApp

Example

import 'package:date_range_form_field/date_range_form_field.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: MyFormField(),
    );
  }
}

class MyFormField extends StatefulWidget {
  @override
  _MyFormFieldState createState() => _MyFormFieldState();
}

GlobalKey<FormState> myFormKey = new GlobalKey();

class _MyFormFieldState extends State<MyFormField> {
  DateTimeRange? myDateRange;

  void _submitForm() {
    final FormState? form = myFormKey.currentState;
    form!.save();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Date Range Form Example"),
      ),
      body: SafeArea(
        child: Form(
          key: myFormKey,
          child: Column(
            children: [
              SafeArea(
                child: DateRangeField(
                    enabled: true,
                    initialValue: DateTimeRange(
                        start: DateTime.now(),
                        end: DateTime.now().add(Duration(days: 5))),
                    decoration: InputDecoration(
                      labelText: 'Date Range',
                      prefixIcon: Icon(Icons.date_range),
                      hintText: 'Please select a start and end date',
                      border: OutlineInputBorder(),
                    ),
                    validator: (value) {
                      if (value!.start.isBefore(DateTime.now())) {
                        return 'Please enter a later start date';
                      }
                      return null;
                    },
                    onSaved: (value) {
                      setState(() {
                        myDateRange = value!;
                      });
                    }),
              ),
              ElevatedButton(
                child: Text('Submit'),
                onPressed: _submitForm,
              ),
              if (myDateRange != null)
                Text("Saved value is: ${myDateRange.toString()}")
            ],
          ),
        ),
      ),
    );
  }
}

Contributing

Contributions are welcome as pull requests to the github repo. Please open issues on the repo for feature requests or bug reports.

date_range_form_field's People

Contributors

azzeccagarbugli avatar cali0707 avatar itaispector avatar joemurray avatar percula avatar whisper40 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

date_range_form_field's Issues

Type 'DateTimeRange' not found

And I got an error

../../flutter/.pub-cache/hosted/pub.dartlang.org/date_range_form_field-0.0.4/lib/date_range_form_field.dart:184:9: Error: Type 'DateTimeRange' not found. final DateTimeRange initialValue;

Running on sdk 1.17.5

Not able to display hintText

In your example code you are using hintText and labelText.
LabelText is working, but hintText is just not displaying.

When we use hintText, it should display the sentence, and once we click it should be displayed as a labelText. In your case, it is not doing this default beaviour.

You can try on your side, but i think that there is a problem with the hintText (while not using initialValue.. ) .

Issue with the date range picker format

Hello Dev team.
I would like to commend you on the effort you put into the creation of the package.

There's an issue in the package, however, where the date format is a bit weird in the date-range field. It gives me a 04/38/2022 as a date format.
This is the sample:
Simulator Screen Shot - iPhone Xʀ - 2022-04-25 at 14 57 31

I tried editing the package to solve this problem but it still persists.
Please try fixing the issue.

Can't choose later dates

I was excited find such a neat package until I realized it can't be used for my project because, i can't select dates before the current one. At the very least it should be scrollable and go as far back as 1990s.

Validation problem date format on input (not calendar)

I definied dateFormat: DateFormat('dd/MM/yyyy'),
When i select dates in the calendar, the validation is working, and the display is OK.

But if tape the date in the input, i cannot validate it with the format provided above.
The validator want's a 'MM/dd/yyyy'

Not able to translate Start Date - End Date on Calendar mode

I don't find in your code something for changing this, it is related to you or flutter ?

I set this in the code :

helpText: 'Sélectionnez un interval de dates',
fieldStartLabelText: 'Date de début',
fieldEndLabelText: 'Date de fin',
fieldStartHintText: 'Début',
fieldEndHintText: 'Fin',

(this code works for translating on the input side as requested in another issue)
image

Version : 1.0.2 (latest)

Label and Hint problem on input

In your code there is this : This is causing a problem when you want to override the text, because there is an error in the attribute name.

fieldStartHintText: fieldStartLabelText ?? 'Start Date',
fieldEndLabelText: fieldEndLabelText ?? 'End Date') ?? state.value;

I think that you should set something like :

fieldStartHintText: fieldStartHintText ?? 'Hint Start Date',
fieldStartLabelText: fieldStartLabelText ?? 'Label Start Date',
fieldEndHintText: fieldEndHintText ?? 'Hint End Date',
fieldEndLabelText: fieldEndLabelText ?? 'Label End Date',

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.