# Data range component for setting a range 0-24hours

**URL:** <https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173>\
**Category:** Ignition\
**Created:** [October 14, 2014, 7:53am UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173 "2014-10-14T07:53:58Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 14, 2014, 7:53am UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/1 "2014-10-14T07:53:58Z")

</div>

I’m looking for a component for setting a range between 0-24h.  
I would like the date range component’s behavior (movable and sizable rectangle but restricted into 0-24 hours)

---

<div class="post-metadata">

**Author:** ![KathyApplebaum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kathyapplebaum/32/7261_2.png) [@KathyApplebaum](https://forum.inductiveautomation.com/u/KathyApplebaum)\
**Post date:** [October 14, 2014, 2:01pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/2 "2014-10-14T14:01:33Z")

</div>

If you take the date range component and change the Max Selection property to say “24 hours”, the rectangle can slide and can select smaller ranges, but can’t select a range larger than 24 hours. Is there some other behavior you want?

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 14, 2014, 2:12pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/3 "2014-10-14T14:12:16Z")

</div>

It’s ok for the size of the range, but I want to display only ticks from 0 to 24.  
Doesn’t need displaying start - end date.  
I would like to build a component for setting a resizable range between 0 - 24 inside a day, with no date consideration.

---

<div class="post-metadata">

**Author:** ![KathyApplebaum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kathyapplebaum/32/7261_2.png) [@KathyApplebaum](https://forum.inductiveautomation.com/u/KathyApplebaum)\
**Post date:** [October 14, 2014, 2:32pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/4 "2014-10-14T14:32:29Z")

</div>

This is as close as I could get with the Date Range component. Expanding it a bit shows 00 on the right, not 24.  
 ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/5/5410a0b08479ae25b4e49b2593206896e7fb4904.png)

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 14, 2014, 2:42pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/5 "2014-10-14T14:42:45Z")

</div>

Yes Kathy, exactly what I need…  
I suppose, this requires a bit of swing code ??,

---

<div class="post-metadata">

**Author:** ![KathyApplebaum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kathyapplebaum/32/7261_2.png) [@KathyApplebaum](https://forum.inductiveautomation.com/u/KathyApplebaum)\
**Post date:** [October 14, 2014, 3:07pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/6 "2014-10-14T15:07:10Z")

</div>

Nothing quite so elegant as swing hacking. 🙂

It’s the date range component with an opaque label over the top part. Set the max range to 24 hours and the initial range to 24 hours. I took advantage of the fact that you’re in the French locale, which makes it a 24 hour clock. You would need to strip out the day part of the info you get back, but that’s easy.

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 14, 2014, 3:14pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/7 "2014-10-14T15:14:25Z")

</div>

Set the max range to 24 hours and the initial range to 24 hours ???  
Which Date Range property do you mean ?

---

<div class="post-metadata">

**Author:** ![KathyApplebaum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kathyapplebaum/32/7261_2.png) [@KathyApplebaum](https://forum.inductiveautomation.com/u/KathyApplebaum)\
**Post date:** [October 14, 2014, 3:36pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/8 "2014-10-14T15:36:19Z")

</div>

Sorry, that’s what I get from going from memory. It’s Max Selection and Outer Range Start/End.  
 ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/9196298653689f2ca67319b635cda82391a3e36c.png)

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 14, 2014, 3:47pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/9 "2014-10-14T15:47:27Z")

</div>

Ok,  
but there remains a problem, when we drag the range on the right side or the left side, with the mouse and continue outside the date range, the limit are not respected and hours tick changes…  
Any workaround for this case ?

---

<div class="post-metadata">

**Author:** ![KathyApplebaum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kathyapplebaum/32/7261_2.png) [@KathyApplebaum](https://forum.inductiveautomation.com/u/KathyApplebaum)\
**Post date:** [October 14, 2014, 4:08pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/10 "2014-10-14T16:08:07Z")

</div>

I’m not getting that behavior with the settings I posted. Can you post a shot of the properties on your date range component?

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 16, 2014, 4:05pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/11 "2014-10-16T16:05:11Z")

</div>

How do you lock the slider in the 0-24h of the day choosen ?  
If you click on the center of the slider and move it on the left side or right side, the ticks change ☹  
 ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/3a9013ce5a1cc0b1e36da8b9c6f9e4b7613ac32c.png)

 ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/a/a2d602083076faa9d6d98366ba54253edc66f7f3.png)

---

<div class="post-metadata">

**Author:** ![KathyApplebaum](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kathyapplebaum/32/7261_2.png) [@KathyApplebaum](https://forum.inductiveautomation.com/u/KathyApplebaum)\
**Post date:** [October 16, 2014, 4:47pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/12 "2014-10-16T16:47:33Z")

</div>

Ah, I see what you mean now. When you said “drag the range on the right side or the left side”, I was dragging from the edges, not the middle.

Looks like that solution won’t work for you, then. If you don’t come up with one that works, you should post a request on [http://ideas.inductiveautomation.com/](http://ideas.inductiveautomation.com/)

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [October 16, 2014, 6:53pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/13 "2014-10-16T18:53:10Z")

</div>

Here’s one for you, Lionel.

Added a few Custom properties and a Property Change script. Still scrools away, but snaps back after releasing the button.  
[time\_clock\_DateRange JC\_2014-10-16\_1448.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/8/8b121077e5847fd3f4620c95cb651c0eb4303469.proj) (8.81 KB)

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 21, 2014, 12:00pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/14 "2014-10-21T12:00:26Z")

</div>

A component like this one would be perfect :  
[http://tillnagel.com/2012/06/animated-time-range-slider/](http://tillnagel.com/2012/06/animated-time-range-slider/)

---

<div class="post-metadata">

**Author:** ![DwSoFt](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DwSoFt](https://forum.inductiveautomation.com/u/DwSoFt)\
**Post date:** [May 17, 2018, 4:57pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/15 "2018-05-17T16:57:20Z")

</div>

LINK doesnt work. Can i get this still?

---

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [May 17, 2018, 7:45pm UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/16 "2018-05-17T19:45:44Z")

</div>

For that particular one? Well… nope.

Not that I don’t want to, but you seem to have hit on one that I didn’t keep around. Very odd for a code pack-rat like myself. 🙂

But with the new functionality added via the [**system.date**](https://docs.inductiveautomation.com/display/DOC79/system.date) functions, you can make your very own.

Put this in the propertyChange event of the Date Range component.

```auto
if event.propertyName =='selectedDateRange':

  startIn = event.source.startDate
  endIn = event.source.endDate
  
  #get date range
  diff = system.date.secondsBetween(startIn, endIn)
  
  # Use this instead if you want a full day (minus 1 second)
  # diff = 86399
  
  # Get midnight of startDate
  midnight = system.date.midnight(startIn)
  
  # Check to see if the startDate is already at midnight. Update if needed
  if event.source.startDate != midnight:
    event.source.startDate = midnight
    event.source.endDate = system.date.addSeconds(midnight, diff)

```

This will snap the start date to 12:00am on the same day. The end date floats, so you can adjust it, or you can hard code a range.

---

<div class="post-metadata">

**Author:** ![DwSoFt](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DwSoFt](https://forum.inductiveautomation.com/u/DwSoFt)\
**Post date:** [May 18, 2018, 5:37am UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/17 "2018-05-18T05:37:44Z")

</div>

Thank you.

I am looking to get it so a saved tag is the hard limit of the outer range start and then the end is anything after that to now. then i also want the range itself to be stuck at 22 hours and they can slide it through out that outer range.

I Will play around with your example and see what i can come up with. Thanks

---

<div class="post-metadata">

**Author:** ![DwSoFt](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DwSoFt](https://forum.inductiveautomation.com/u/DwSoFt)\
**Post date:** [May 18, 2018, 6:32am UTC](https://forum.inductiveautomation.com/t/data-range-component-for-setting-a-range-0-24hours/9173/18 "2018-05-18T06:32:15Z")

</div>

Yupp, Looks like i just needed a swift kick in the right direction.

The code below is in the slider bar propertyChange Script.  
It locks the outer range start/end as well as the size of the slider bar. works like a charm.  
If there is a way to optimize this please let me know.

Thanks.

```auto
start = event.source.outerRangeStartDate
end = event.source.outerRangeEndDate
startTest = system.tag.read("TimeatStart").value
endTest = system.tag.read("TimeNow").value

if event.source.outerRangeStartDate != startTest:
   event.source.outerRangeStartDate = startTest

if event.source.outerRangeEndDate != endTest:
   event.source.outerRangeEndDate = endTest
   
start2 = event.source.startDate

if event.source.endDate != system.date.addHours(start2, 22):
   event.source.endDate = system.date.addHours(start2, 22)

```