I have two DateTimeField which users will select Start Date and End Date which I will like the difference in the number of days to be displayed on another TextFormField below it. E.g If I select 2020-11-15
on DateFormField as the start date and I select 2020-11-03
on DateFormField as the end date then it should automatically display 12
on total days TextFormField. Below is my code:
TextEditingController _controllerStartDate = TextEditingController();
TextEditingController _controllerEndDate = TextEditingController();
TextEditingController _controllerTotalDays = TextEditingController();
body: Container{
child: Form{
child:ListView(
children:<widget>[
Text("Start Date:",style: TextStyle(color: colorBlack,fontWeight: FontWeight.bold),),
Container(
height: 50,
padding: EdgeInsets.only(left: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
border: Border.all(color: Colors.black, width: 1),
),
child:DateTimeField(
format: format,
controller: _controllerStartDate,
decoration: InputDecoration(
labelStyle: TextStyle(color: Colors.black)),
onShowPicker: (context, currentValue) {
return showDatePicker(
context: context,
firstDate: DateTime(1900),
initialDate: currentValue ?? DateTime.now(),
lastDate: DateTime(2100));
},
)
),
SizedBox(height: 25.0),
Text("End Date:",style: TextStyle(color: colorBlack,fontWeight: FontWeight.bold),),
Container(
height: 50,
padding: EdgeInsets.only(left: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
border: Border.all(color: Colors.black, width: 1),
),
child:DateTimeField(
format: format,
controller: _controllerEndDate,
decoration: InputDecoration(
labelStyle: TextStyle(color: Colors.black)),
onShowPicker: (context, currentValue) {
return showDatePicker(
context: context,
firstDate: DateTime(1900),
initialDate: currentValue ?? DateTime.now(),
lastDate: DateTime(2100));
},
)
),
SizedBox(height: 25.0),
TextFormField(
autovalidate: _autoValidate,
validator: validateLength,
style: style,
enabled: false,
keyboardType: TextInputType.text,
controller: _controllerTotalDays,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
labelStyle: new TextStyle(color: colorBlack),
hintStyle: new TextStyle(color: colorBlack),
enabledBorder: const OutlineInputBorder(
borderSide: const BorderSide(color: Colors.black),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),
),
),
)
]
)
}
}
From the above code, I will like some kind of operator difference between the date selected from the two DateFormField to display on the Textformfield just like the example I gave above.
you can obtain it as follows
DateTime date1 = DateTime.parse(_controllerEndDate.text);
DateTime date2 = DateTime.parse(_controllerStartDate.text);
var difference = date1.difference(date2).inDays;
print(difference);
make sure that the values of the dates are not null