Format of Time and Adding in perspective

Ignition
, , , ,
4

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

setup for dateTimeInputs:
image
To hide the spinner arrows just set the style of the component to: { "overflow": "hidden" }
image
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:

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:

3 Likes