# Format of Time and Adding in perspective

**URL:** <https://forum.inductiveautomation.com/t/format-of-time-and-adding-in-perspective/69829>\
**Category:** Ignition\
**Tags:** python, ignition80, ignition81, scripting, perspective\
**Created:** [February 14, 2023, 2:43pm UTC](https://forum.inductiveautomation.com/t/format-of-time-and-adding-in-perspective/69829 "2023-02-14T14:43:07Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\
**Post date:** [February 15, 2023, 4:33pm UTC](https://forum.inductiveautomation.com/t/format-of-time-and-adding-in-perspective/69829/4 "2023-02-15T16:33:10Z")

</div>

This can be accomplished using dateTimeInputs for the start and end time and a label for the duration:  
You can either keep the arrows or hide them  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/e/eee4f3966c662efb5c01cb60d6e28478521c9231.png)

setup for dateTimeInputs:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0df5ab110d293bc0e6281605edc00687bbdfa79a.png)  
To hide the spinner arrows just set the style of the component to: `{ "overflow": "hidden" }`  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/d/9d25e0c88c364c4ee148c3e172c86a5be1d3a662.png)  
**Note: you need to make the dateTimeInput small enough vertically for the overflow:hidden prop to hide the arrows**

here's the expression I'm using for the duration label:

```auto
if(
	{../startDate.props.value} > {../endDate.props.value}, // date spans into next day
	stringFormat("%02d:%02d",
		hoursBetween({../startDate.props.value}, addDays({../endDate.props.value}, 1)),
		minutesBetween({../startDate.props.value}, addDays({../endDate.props.value}, 1)) % 60
	),
	stringFormat("%02d:%02d",
		hoursBetween({../startDate.props.value}, {../endDate.props.value}),
		minutesBetween({../startDate.props.value}, {../endDate.props.value}) % 60
	)
)

```

Credit goes to Paul for the duration calculation:

> [@Convert seconds to HH MM SS](https://forum.inductiveautomation.com/t/convert-seconds-to-hh-mm-ss/8739/9):
>
> This is almost the “right” answer - slightly cleaner/better is to just use [stringFormat](https://docs.inductiveautomation.com/display/DOC79/stringFormat): stringFormat("%02d:%02d:%02d", hoursBetween({Root Container.Popup Calendar.date}, now()), minutesBetween({Root Container.Popup Calendar.date}, now()) % 60, secondsBetween({Root Container.Popup Calendar.date}, now()) % 60 ) Note that it’s worth a disclaimer that this will “break” if you overflow 24 hours. You can solve that with an additional if statement and more complex logic, but I’ll leave that for…

---

_[View the full topic](https://forum.inductiveautomation.com/t/format-of-time-and-adding-in-perspective/69829)._