How do I change the format of the date? I am using a datepicker to pick a date but I want the date to display as dd/mm/yyyy, here is the code
class DatePicker extends StatefulWidget {
const DatePicker({Key? key}) : super(key: key);
#override
State<DatePicker> createState() => _DatePickerState();
}
class _DatePickerState extends State<DatePicker> {
DateTime selectedDate = DateTime.now();
Future<void> _selectDate(BuildContext context) async {
final DateTime? picked = await showDatePicker(
context: context,
initialDate: selectedDate,
firstDate: DateTime(2015, 8),
lastDate: DateTime(2101));
if (picked != null && picked != selectedDate) {
setState(() {
selectedDate = picked;
});
}
}
#override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
InkWell(
onTap: () => _selectDate(context),
child: Text("${selectedDate.toLocal()}".split(' ')[0])),
SizedBox(
height: 20.0,
),
],
);
}
}
Try using instead of
child: Text("${selectedDate.toLocal()}".split(' ')[0])),
do
child: Text(DateFormat('dd/MM/yyyy').format(selectedDate)),
Please try this
var formattedSelectedDate;
if (picked != null && picked != selectedDate) {
setState(() {
final DateFormat formatter = DateFormat('yyyy-MM-dd');
final String formatted = formatter.format(picked);
print(formatted);
selectedDate = picked;
formattedSelectedDate = formatted;
});
}
Use this "formattedSelectedDate" to display on the UI.
For displaying the date you should use this
Text("${selectedDate.day}/${selectedDate.month}/${selectedDate.year}"),
Related
IconButton(
onPressed: () async {
DateTime? x = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime.now(),
lastDate: DateTime(2040));
if (x == null) return;
setState(() {
final DateFormat formatter = DateFormat('yyyy-MM-dd');
String formattedDate = formatter.format(x);
print(formattedDate);
print(formattedDate.runtimeType);
});
},
icon: const Icon(UniconsLine.clock)),
Text(formattedDate ?? "EMPTY"),
I am seeing always empty my formattedDate variable below on the build method why doesnt work this code
Could you try to lift up the formattedDate? I think the Problem is that your variable is out of scope.
class DatePicker extends StatefulWidget {
const DatePicker({Key? key}) : super(key: key);
#override
State<DatePicker> createState() => _DatePickerState();
}
class _DatePickerState extends State<DatePicker> {
String? formattedDate;
#override
Widget build(BuildContext context) {
return Column(children: [
IconButton(
onPressed: () async {
DateTime? x = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime.now(),
lastDate: DateTime(2040));
if (x == null) return;
setState(() {
final DateFormat formatter = DateFormat('yyyy-MM-dd');
formattedDate = formatter.format(x);
print(formattedDate);
print(formattedDate.runtimeType);
});
},
icon: const Icon(Icons.date_range)),
Text(formattedDate ?? "EMPTY"),
]);
}
}
The problem is in the scope of your variable formattedDate. It only exists inside setState because it was declared there.
Declare it at the beginning of the class.
You have redefined formattedDate inside setState() as a local variable. The field formattedDate you are using in Text(formattedDate ?? "EMPTY") is a totally different variable. It remains null, as you are not changing it at all. Just remove the String before formattedDate and it should be fine.
final DateFormat formatter = DateFormat('yyyy-MM-dd');
formattedDate = formatter.format(x); <-- This is your problem
print(formattedDate);
I am working on a flutter app where I want to show date and time pickers. In the third example, I am trying to show how to pick a date and time together, which is working fine. But what I want is when the user cancels the date picker dialog then the time picker should automatically get cancelled. But right now we have to do it separately. For reference, you can see the problem in the image below.
I need some help with the app logic to cancel the date & time picked at once.
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
void main() {
runApp(const DateTimePickerApp());
}
class DateTimePickerApp extends StatelessWidget {
const DateTimePickerApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: TextScreen(),
);
}
}
class TextScreen extends StatefulWidget {
const TextScreen({
Key? key,
}) : super(key: key);
#override
State<TextScreen> createState() => _TextScreenState();
}
class _TextScreenState extends State<TextScreen> {
DateTime selectedDate = DateTime.now();
TimeOfDay selectedTime = TimeOfDay.now();
DateTime dateTime = DateTime.now();
bool showDate = true;
bool showTime = true;
bool showDateTime = true;
// Select for Date
Future<DateTime> _selectDate(BuildContext context) async {
final selected = await showDatePicker(
context: context,
initialDate: selectedDate,
firstDate: DateTime(2000),
lastDate: DateTime(2025),
);
if (selected != null && selected != selectedDate) {
setState(() {
selectedDate = selected;
});
}
return selectedDate;
}
// Select for Time
Future<TimeOfDay> _selectTime(BuildContext context) async {
final selected = await showTimePicker(
context: context,
initialTime: selectedTime,
);
if (selected != null && selected != selectedTime) {
setState(() {
selectedTime = selected;
});
}
return selectedTime;
}
// select date time picker
Future _selectDateTime(BuildContext context) async {
final date = await _selectDate(context);
final time = await _selectTime(context);
if (date == null) return;
if (time == null) return;
setState(() {
dateTime = DateTime(
date.year,
date.month,
date.day,
time.hour,
time.minute,
);
});
}
String getDate() {
// ignore: unnecessary_null_comparison
if (selectedDate == null) {
return 'select date';
} else {
return DateFormat('MMM d, yyyy').format(selectedDate);
}
}
String getDateTime() {
// ignore: unnecessary_null_comparison
if (dateTime == null) {
return 'select date timer';
} else {
return DateFormat('yyyy-MM-dd HH:mm a').format(dateTime);
}
}
String getTime(TimeOfDay tod) {
final now = DateTime.now();
final dt = DateTime(now.year, now.month, now.day, tod.hour, tod.minute);
final format = DateFormat.jm();
return format.format(dt);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('GeeksforGeeks'),
centerTitle: true,
backgroundColor: Colors.green,
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
showDate ? Center(child: Text(getDate())) : const SizedBox(),
Container(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: ElevatedButton(
onPressed: () {
_selectDate(context);
showDate = true;
},
child: const Text('Date Picker'),
),
),
showTime
? Center(child: Text(getTime(selectedTime)))
: const SizedBox(),
Container(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: ElevatedButton(
onPressed: () {
_selectTime(context);
showTime = true;
},
child: const Text('Timer Picker'),
),
),
showDateTime
? Center(child: Text(getDateTime()))
: const SizedBox(),
Container(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: ElevatedButton(
onPressed: () {
_selectDateTime(context);
showDateTime = true;
},
child: const Text(' Date & Time '),
),
),
],
),
),
);
}
}
You need to use nullable selectedDate
class _TextScreenState extends State<TextScreen> {
DateTime? selectedDate ;
then make _selectDate nullable return
// Select for Date
Future<DateTime?> _selectDate(BuildContext context) async {
final selected = await showDatePicker(
context: context,
initialDate: selectedDate??DateTime.now(),
firstDate: DateTime(2000),
lastDate: DateTime(2025),
);
if (selected != null && selected != selectedDate) {
setState(() {
selectedDate = selected;
});
}
return selectedDate;
}
And while showing _selectTime check selectedDate if it null or not. Also make it null again if you like to avoid cancel second timer loop
// select date time picker
Future<void> _selectDateTime(BuildContext context) async {
final date = await _selectDate(context);
if (date == null) return;
selectedDate = null; // if you want to avoid second loop time picker on cancel
final time = await _selectTime(context);
You also need to add bang on getDate while selectedDate is now nullable. Using bang! because we've check it's null
String getDate() {
// ignore: unnecessary_null_comparison
if (selectedDate == null) {
return 'select date';
} else {
return DateFormat('MMM d, yyyy').format(selectedDate);
}
}
I am trying to make a date range picker like this ,date picker start with on value (today value) then user select the range he need ,in flutter finally I found this package.
But I can't open it when I click on the button as date picker.
I trayed to use another package date range picker but it doesn't help me!
Flutter has now an inbuilt date range picker below is an example of using it
IconButton(
onPressed: () async {
final picked = await showDateRangePicker(
context: context,
lastDate: endDate,
firstDate: new DateTime(2019),
);
if (picked != null && picked != null) {
print(picked);
setState(() {
startDate = picked.start;
endDate = picked.end;
//below have methods that runs once a date range is picked
allWaterBillsFuture = _getAllWaterBillsFuture(
picked.start.toIso8601String(),
picked.end
.add(new Duration(hours: 24))
.toIso8601String());
});
}
},
icon: Icon(
Icons.calendar_today,
color: Colors.white,
),
),
There's a package specifically built for that purpose, date_range_picker
To install it, you should add the following line under dependecies in the pubspec.yaml file:
date_range_picker: ^1.0.5
You should then import the package at the top of the file of the Widget you would like to use the function:
import 'package:date_range_picker/date_range_picker.dart' as DateRangePicker;
Then, you could use the package as follows:
new MaterialButton(
color: Colors.deepOrangeAccent,
onPressed: () async {
final List<DateTime> picked = await DateRagePicker.showDatePicker(
context: context,
initialFirstDate: new DateTime.now(),
initialLastDate: (new DateTime.now()).add(new Duration(days: 7)),
firstDate: new DateTime(2015),
lastDate: new DateTime(2020)
);
if (picked != null && picked.length == 2) {
print(picked);
}
},
child: new Text("Pick date range")
)
This is a full example on how you could use it:
import 'package:flutter/material.dart';
import 'package:date_range_picker/date_range_picker.dart' as DateRagePicker;
void main() {
runApp(MaterialApp(home: HomeScreen(), title: 'Flutter Date Range Example'));
}
class HomeScreen extends StatefulWidget {
HomeScreen({Key key}) : super(key: key);
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: MaterialButton(
color: Colors.deepOrangeAccent,
onPressed: () async {
final List<DateTime> picked = await DateRagePicker.showDatePicker(
context: context,
initialFirstDate: new DateTime.now(),
initialLastDate:
(new DateTime.now()).add(new Duration(days: 7)),
firstDate: new DateTime(2015),
lastDate: new DateTime(2020));
if (picked != null && picked.length == 2) {
print(picked);
}
},
child: new Text("Pick date range")),
),
);
}
}
Here, I'm using Flutter inbuilt date range picker, where you should initially give the start and end date, to display the selected range used two elevated buttons where the date range will be shown.in setState, if you click cancel in daterange picker popup, the initial date range will be assigned.
import 'package:flutter/material.dart';
class DateRangeWidget extends StatefulWidget {
DateRangeWidget({Key? key}) : super(key: key);
#override
State<DateRangeWidget> createState() => _DateRangeWidgetState();
}
class _DateRangeWidgetState extends State<DateRangeWidget> {
DateTimeRange dateRange = DateTimeRange(
start: DateTime(2021, 11, 5),
end: DateTime(2022, 12, 10),
);
#override
Widget build(BuildContext context) {
final start = dateRange.start;
final end = dateRange.end;
return Column(children: [
const Text(
'Date Range',
style: TextStyle(fontSize: 16),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: ElevatedButton(
child: Text(
'${start.year}/${start.month}/${start.day}',
),
onPressed: pickDateRange,
),
),
Container(
margin: EdgeInsets.only(left: 20),
child: ElevatedButton(
child: Text(
'${end.year}/${end.month}/${end.day}',
),
onPressed: pickDateRange,
),
),
],
)
]);
}
Future pickDateRange() async {
DateTimeRange? newDateRange = await showDateRangePicker(
context: context,
initialDateRange: dateRange,
firstDate: DateTime(2019),
lastDate: DateTime(2023),
);
setState(() {
dateRange = newDateRange ?? dateRange;
// if (newDateRange == null) return;
// setState(() => dateRange = newDateRange);
});
}
}
[1]: https://i.stack.imgur.com/h1HIN.png
I have an array with certain dates.
I want to disable these dates in the date picker and also change the color. How to do this?
You can use selectableDayPredicate property. For colors, you can change it by themes.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
DateTime selectedDate = DateTime(2020, 1, 14);
// DatePicker will call this function on every day and expect
// a bool output. If it's true, it will draw that day as "enabled"
// and that day will be selectable and vice versa.
bool _predicate(DateTime day) {
if ((day.isAfter(DateTime(2020, 1, 5)) &&
day.isBefore(DateTime(2020, 1, 9)))) {
return true;
}
if ((day.isAfter(DateTime(2020, 1, 10)) &&
day.isBefore(DateTime(2020, 1, 15)))) {
return true;
}
if ((day.isAfter(DateTime(2020, 2, 5)) &&
day.isBefore(DateTime(2020, 2, 17)))) {
return true;
}
return false;
}
Future<void> _selectDate(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: selectedDate,
selectableDayPredicate: _predicate,
firstDate: DateTime(2019),
lastDate: DateTime(2021),
builder: (context, child) {
return Theme(
data: ThemeData(
primaryColor: Colors.orangeAccent,
disabledColor: Colors.brown,
textTheme:
TextTheme(body1: TextStyle(color: Colors.blueAccent)),
accentColor: Colors.yellow),
child: child,
);
});
if (picked != null && picked != selectedDate)
setState(() {
selectedDate = picked;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("${selectedDate.toLocal()}".split(' ')[0]),
SizedBox(
height: 20.0,
),
RaisedButton(
onPressed: () => _selectDate(context),
child: Text('Select date'),
),
],
),
),
);
}
}
I encountered the same problem. After going back and forth, I did the following:
Created a list of specific dates:
static var unavailableDates = ["2020-08-14", "2020-08-20", "2020-08-13","2020-08-21","2020-08-23"];
Created an initial date variable:
static DateTime initialDate = DateTime.now();
formatted the initial date to get rid of the timestamp:
static DateFormat dateFormat = new DateFormat("yyyy-MM-dd");
String formattedDate = dateFormat.format(initialDate);
Put my unavailable dates in order:
unavailableDates.sort(((a, b) => a.compareTo(b)));
Added a way to verify the initial date does not fall on the disabled date. This jumps to the next available date. If you do not have something in place to verify unavailable date and initial date is not the same, you will get an exception:
for(var unavdate in unavailableDates){
if (unavdate.compareTo(formattedDate) == 0) {
formattedDate = unavdate;
fromStringDate = DateTime.parse(formattedDate);
initialDate = fromStringDate.add(new Duration(days: 1));
formattedDate = dateFormat.format(initialDate);
}
}
Created a day predicate function:
bool setDayPredicate(DateTime val) {
//this allows certain dates to be greyed out based on availability
String Dates = dateFormat.format(val); //formatting passed in value
return !unavailableDates.contains(Dates);
}
Put it all together:
date = await showDatePicker(
context: context,
initialDate: initialDate,
firstDate: new DateTime.now(),
lastDate: new DateTime.now().add(new Duration(days: 30)),
selectableDayPredicate: setDayPredicate, });
I'm having trouble setting the state to get the value from textfield with a date picker.
How do you return the value in the text field if the date picked is between start and end. I set pressed initially to false and when it's press it becomes true which will return the value from the text field.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: MyApp(),
));
class MyApp extends StatefulWidget {
#override
MyAppState createState() {
return new MyAppState();
}
}
class MyAppState extends State<MyApp> {
bool pressed = false;
final myController = TextEditingController();
DateTime selectedDate = DateTime.now();
Future<Null> _selectDate(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: selectedDate,
firstDate: DateTime(2015, 8),
lastDate: DateTime(2101));
if (picked != null && picked != selectedDate)
setState(() {
selectedDate = picked;
});
}
#override
void dispose() {
// Clean up the controller when the widget is disposed.
myController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: Column(
children: <Widget>[
TextField(
controller: myController,
decoration: new InputDecoration(labelText: "Enter a number"),
keyboardType: TextInputType.number,
),
SizedBox(
height: 50.0,
),
RaisedButton(
onPressed: () => _selectDate(context),
child: Text('Select date'),
),
RaisedButton(
child: Text("show text"),
onPressed: () {
DateTime start = DateTime(2019, 01, 01);
final end = DateTime(2022, 12, 31);
if (selectedDate.isAfter(start) && selectedDate.isBefore(end)) {
return pressed = true;
} else {
return pressed = false;
}
},
),
pressed ? Text(myController.text) : Text('no'),
],
),
);
}
}
final myController = TextEditingController();
DateTime selectedDate = DateTime.now();
Future<Null> _selectDate(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: selectedDate,
firstDate: DateTime(2015, 8),
lastDate: DateTime(2101));
if (picked != null && picked != selectedDate)
setState(() {
selectedDate = picked;
myController.text = selectedDate.toString();
});
}