I have a CupertinoDatePicker with the initial DateTime as DateTime.now(). However, when I change the month or year, the hours/minutes gets reset to 0:00.
The time is initially set to 17:37
However if I change the month/year, the time resets to 0:00
My code so far:
class EventsCreate extends StatefulWidget {
const EventsCreate({Key? key}) : super(key: key);
@override
_EventsCreateState createState() => _EventsCreateState();
}
class _EventsCreateState extends State<EventsCreate> {
DateTime dateTimeStart = DateTime.now();
DateTime dateTimeEnd = DateTime.now().add(const Duration(hours: 24));
@override
Widget build (BuildContext context) {
...
Container(
margin: const EdgeInsets.only(left: 20.0, right: 20.0),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10.0)),
child: Column(
children: [
Row(
children: [
const Padding(
padding: EdgeInsets.only(left: 20.0, top: 15.0, bottom: 15.0),
child: Text(
'Starts',
style: TextStyle(color: Colors.black, fontSize: 16),
),
),
Padding(
padding: const EdgeInsets.only(left: 109.0),
child: GestureDetector(
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(8),
),
child: Text(
'${DateFormat.MMMM().format(dateTimeStart).substring(0, 3)} ${dateTimeStart.day}, ${dateTimeStart.year}',
style: const TextStyle(color: CupertinoColors.activeBlue)
),
),
onTap: () {
showCupertinoModalPopup(
context: context,
builder: (BuildContext context) => SizedBox(
height: 250,
child: CupertinoDatePicker(
backgroundColor: Colors.white,
initialDateTime: dateTimeStart,
onDateTimeChanged: (DateTime newTime) {
setState(() => dateTimeStart = newTime);
},
mode: CupertinoDatePickerMode.date,
)
)
);
},
),
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: GestureDetector(
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(8),
),
child: Text(
DateFormat('HH:mm').format(dateTimeStart),
style: const TextStyle(color: CupertinoColors.activeBlue)
),
),
onTap: () {
showCupertinoModalPopup(
context: context,
builder: (BuildContext context) => SizedBox(
height: 250,
child: CupertinoDatePicker(
backgroundColor: Colors.white,
use24hFormat: true,
initialDateTime: dateTimeStart,
onDateTimeChanged: (DateTime newTime) {
setState(() => dateTimeStart = newTime);
},
mode: CupertinoDatePickerMode.time,
)
)
);
},
),
),
],
),
Container(
margin: const EdgeInsets.only(left: 20.0),
height: 1.5,
color: const Color(0xFFF5F5F5),
),
Row(
children: [
const Padding(
padding: EdgeInsets.only(left: 20.0, top: 15.0, bottom: 15.0),
child: Text(
'Ends',
style: TextStyle(color: Colors.black, fontSize: 16),
),
),
Padding(
padding: const EdgeInsets.only(left: 116.0),
child: GestureDetector(
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(8),
),
child: Text(
'${DateFormat.MMMM().format(dateTimeEnd).substring(0, 3)} ${dateTimeEnd.day}, ${dateTimeEnd.year}',
style: const TextStyle(color: CupertinoColors.activeBlue)
),
),
onTap: () {
showCupertinoModalPopup(
context: context,
builder: (BuildContext context) => SizedBox(
height: 250,
child: CupertinoDatePicker(
backgroundColor: Colors.white,
initialDateTime: dateTimeEnd,
onDateTimeChanged: (DateTime newTime) {
setState(() => dateTimeEnd = newTime);
},
mode: CupertinoDatePickerMode.date,
)
)
);
},
),
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: GestureDetector(
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(8),
),
child: Text(
DateFormat('HH:mm').format(dateTimeEnd),
style: const TextStyle(color: CupertinoColors.activeBlue)
),
),
onTap: () {
showCupertinoModalPopup(
context: context,
builder: (BuildContext context) => SizedBox(
height: 250,
child: CupertinoDatePicker(
backgroundColor: Colors.white,
use24hFormat: true,
initialDateTime: dateTimeEnd,
onDateTimeChanged: (DateTime newTime) {
setState(() => dateTimeEnd = newTime);
},
mode: CupertinoDatePickerMode.time,
)
)
);
},
),
),
],
),
],
)
),
CodePudding user response：
You have initialized your CupertinoDatePicker with the mode CupertinoDatePickerMode.date. This will create the UI as desired by you, but also has the sideeffect that any date you select is set to midnight per default.
These are the relevant lines in your code:
onDateTimeChanged: (DateTime newTime) {
setState(() => dateTimeEnd = newTime);
},
mode: CupertinoDatePickerMode.date,
In the beginning, you use
DateTime dateTimeStart = DateTime.now();
DateTime dateTimeEnd = DateTime.now().add(const Duration(hours: 24));
which also contains the current hours and minute. So everything shows up as correct.
So you might want to change your code to
onDateTimeChanged: (DateTime newTime) {
var oldHour = dateTimeEnd.hour;
var oldMinute = dateTimeEnd.minute;
var newDay = newTime.day;
var newMonth = newTime.month;
var newYear = newTime.year;
var adjustedDate = DateTime(newYear, newMonth, newDay, oldHour, oldMinute);
setState(() => dateTimeEnd = adjustedDate);
},
mode: CupertinoDatePickerMode.date,
Similar correction could be performed for dateTimeStart/dateTimeEnd.
More info in the docs to DateTime and CupertinoDatePicker.