'How to show time in AM or PM format from TimeOfDay with flutter?

I used ShowTimePicker class to select time according to my wish but want to show it in PM or AM with Text .like 9:00 AM, 10:00 PM.

means take 12 hours format.

Code :

import 'package:flutter/material.dart';



class ShowTimePickerDemo extends StatefulWidget {
  @override
  _ShowTimePickerDemoState createState() => _ShowTimePickerDemoState();
}

class _ShowTimePickerDemoState extends State<ShowTimePickerDemo> {
  TimeOfDay pickedTime = TimeOfDay.now();

  Future<Null> _selectTime(BuildContext context) async {
    final TimeOfDay response = await showTimePicker(
      context: context,
      initialTime: pickedTime,
    );
    if (response != null && response != pickedTime) {
      setState(() {
        pickedTime = response;
      });
    }
  } 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(pickedTime.toString()),
            SizedBox(height:10),
            FlatButton(
              color: Colors.blue,
              onPressed: (){
                _selectTime(context);
              }, 
              child: Text("Show Time Pikcer")
            )
          ],
        ),
      ),
    );
  }
}

OutPut screenshot:

enter image description here

flutterdarttime


Solution 1:[1]

Once you have the time selected, you can format it with new DateFormat.jm(), which will output, for example, 5:00 PM. See DateFormat docs for more.

Edit: You could do this a few ways.

One way is to use a function, like this:

String formatTimeOfDay(TimeOfDay tod) {
    final now = new DateTime.now();
    final dt = DateTime(now.year, now.month, now.day, tod.hour, tod.minute);
    final format = DateFormat.jm();  //"6:00 AM"
    return format.format(dt);
}

Another way is to use this is in the example provided from the docs:

print(new DateFormat.yMMMd().format(new DateTime.now()));

Solution 2:[2]

When you have identified the TimeOfDay class of Flutter, you can now convert the used variable to change it's current format to 12-hour system.

TimeOfDay initialTime = TimeOfDay.now();

initialTime.format(context)

Solution 3:[3]

There is a pre-define property inside TimeOfDay object called period that return DayPeriod either am or pm as per the selection.

onTimeButtonClick(BuildContext context) async {
    TimeOfDay? _timeOfDay = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );

    DayPeriod dayPeriod = _timeOfDay!.period;
    print(dayPeriod); // This will return => DayPeriod.am/DayPeriod.pm as per the selection of time.
  }

Solution 4:[4]

I am using this method to get formatted Date

getformattedTime(TimeOfDay time) {
    return '${time.hour}:${time.minute} ${time.period.toString().split('.')[1]}';
  }

This returns the following value: 10:39 am

Solution 5:[5]

 var time = TimeOfDay(hour: 11, minute: 55).format(context);
 print(time);

It will result: 11:55 Am

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Carl Angelo Angcana
Solution 3 Ali Murtaza
Solution 4 Gvs Akhil
Solution 5 Ayyaz meo

Related Questions