# Highlight today's date on dateTimeInput component in perspective

**URL:** <https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707>\
**Category:** Ignition\
**Created:** [March 28, 2022, 10:34am UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707 "2022-03-28T10:34:50Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![user66](https://avatars.discourse-cdn.com/v4/letter/u/b487fb/32.png) [@user66](https://forum.inductiveautomation.com/u/user66)\
**Post date:** [March 28, 2022, 10:34am UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/1 "2022-03-28T10:34:50Z")

</div>

I want to highlight today’s date (present date) when I click on the dateTimeInput component and the date picker pops up. Is this possible?

---

<div class="post-metadata">

**Author:** ![kvane](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kvane/32/22228_2.png) [@kvane](https://forum.inductiveautomation.com/u/kvane)\
**Post date:** [March 28, 2022, 4:11pm UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/2 "2022-03-28T16:11:28Z")

</div>

The Perspective DateTimePicker component will highlight whatever date is currently selected. So one approach is placing a script on startup of the view that sets the date input component to [system.date.now()](https://docs.inductiveautomation.com/display/DOC81/system.date.now).

This would result in the date time automatically being set to the current time when the view is first opened. The script could be placed on the component itself and driven via the onClick() event, but I would not recommend that since the component needs to be clicked on for interaction.

Here is an example placed on the root container of a view that has a single “DateTimePicker” component:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/2/f22158bee325fe987e5783391827278e9d0da62b.png)

---

<div class="post-metadata">

**Author:** ![user66](https://avatars.discourse-cdn.com/v4/letter/u/b487fb/32.png) [@user66](https://forum.inductiveautomation.com/u/user66)\
**Post date:** [March 28, 2022, 5:14pm UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/3 "2022-03-28T17:14:30Z")

</div>

Thanks for that. But I don’t really what the date to change(don’t want the value property to be affected) . Just want the present date to be show when I open the datePicker and also if I choose to close the component(datePicker) without selecting any date, no date should be selected.

It there any way?

---

<div class="post-metadata">

**Author:** ![kvane](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kvane/32/22228_2.png) [@kvane](https://forum.inductiveautomation.com/u/kvane)\
**Post date:** [March 28, 2022, 5:37pm UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/4 "2022-03-28T17:37:11Z")

</div>

Currently, the intent of the component is to show the date selected. There is not a way to highlight a date that is not the selected date (at least not without some hacky component swapping).

That would likely require the addition of a new property that differentiates the highlighted date from the selected date. So this would be a good [Feature Request](https://ideas.inductiveautomation.com/ignition-features-and-ideas).

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 28, 2022, 6:18pm UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/5 "2022-03-28T18:18:50Z")

</div>

> [@user66](#):
>
> [I] just want the present date to be show when I open the datePicker ...

That would be bad design and inconsistent with almost all other GUIs.

> ... and also if I choose to close the component(datePicker) without selecting any date, no date should be selected.

Again confusing.

I recommend that you add a "Today" button beside the calendar and have that update the calendar value.

---

<div class="post-metadata">

**Author:** ![user66](https://avatars.discourse-cdn.com/v4/letter/u/b487fb/32.png) [@user66](https://forum.inductiveautomation.com/u/user66)\
**Post date:** [March 28, 2022, 7:13pm UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/6 "2022-03-28T19:13:05Z")

</div>

I’m sorry. The date input field in most websites have the present date highlighted if we click on the input field and calendar pops up right?

Like the present day date would we differentiated with some other color.

I was thinking of something like that

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 28, 2022, 7:42pm UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/7 "2022-03-28T19:42:05Z")

</div>

Ah, OK. A separate low-level highlight as opposed to the selected value.  
I’ve had a look at the calendar with the web developer tools in Google Chrome but can’t see anything that indicates that the calendar even knows what date it is.

If you set `props.maxdate` to an expression binding with `now(5000)` (so it will update every 5 s) all the dates after today will be muted. That makes it fairly easy to see where in the month we are - apart from when today is the last day of the month.

There is a CSS property called `last-of-type` which may be able to modify the last non-muted date but I’m afraid I don’t know enough CSS to work that out for you.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [March 28, 2022, 8:57pm UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/8 "2022-03-28T20:57:38Z")

</div>

The following CSS will work, the problem is getting it to be inserted dynamically. I haven’t been able to get that to work.

I tried using an expression to insert the selector into a style property on the component, but either I had it in the incorrect place or my syntax was wrong. I don’t know of any CSS to calculate the current month and day. So you’ll need to figure out a way to get the values changed dynamically.

Perhaps @victordcq has a trick?

```auto
div[data-month="3"] [data-day="28"]{ 
    border-style: solid;
    border-color: #EEB815;
    border-width: 3px;
}

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 29, 2022, 7:31am UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/9 "2022-03-29T07:31:38Z")

</div>

> [@lrose](#):
>
> I don’t know of any CSS to calculate the current month and day.

That is not possible,  
You would need to create a class for every day/month and use an expression to get the correct class in the css.  
I suppose you might get away with doing just the days and also filter if its a filler day or not

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/7/178f1c53698596568e24990b4223e5eec9d2d229.png)  
do this for every 31days

```auto
.psc-LightDay1 .dayTile[data-day="1"]:not(.ia_dateRangePicker __calendar__ dayTile--fillerTile){
  background-color:#add8e655
}
.psc-LightDay29 .dayTile[data-day="29"]:not(.ia_dateRangePicker __calendar__ dayTile--fillerTile){
  background-color:#add8e655
}

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/a/4aa8a82047d270a76095156bb72a97c4b2d42f17.png)  
and put a binding on the classes to determine which day it is... not that much work i suppose.

Edit: **filter problems**...  
Welp just the day is not enough since adjusting the month filter doesnt trigger any events so your binding wouldnt know about it to not select any classes... rip  
There is also no way to know what year you are trying to filter so it would always highlight something wrong:(

creating 365 classes seems to much work for something that doesnt even work correct xD

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [July 5, 2022, 5:41pm UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/10 "2022-07-05T17:41:20Z")

</div>

What about scripting the date somehow?

What would be the hacky component swapping option?

Custom property option?

Or maybe I can turn the date selector visible and not visible?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 6, 2022, 6:37am UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/11 "2022-07-06T06:37:24Z")

</div>

It would be possible to put a transparent square above a date.  
But there is no way to know in a script what month/year is selected, there are no events that say they are getting changed, so there would be no way of knowing what to highlight.

turning of the date selector to make your own so you get the events… i guess, but its really gonna be way to much work for something wonky, you’d be better of making your own datepicker then xd

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [July 6, 2022, 1:27pm UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/12 "2022-07-06T13:27:32Z")

</div>

It is already wonky, shows two random days from this past April.

I might go with a check box controlling a script, and custom properties that get swapped.

* * *

edit:  
oh I missed the startup script note from Kvane  
Didn’t work for me though when I tried to open the page a few times.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [July 23, 2022, 8:46pm UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/13 "2022-07-23T20:46:39Z")

</div>

Any update on this?  
I wonder why perspective doesn’t support this feature from beginning which is necessary in modern application

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [July 24, 2022, 10:30am UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/14 "2022-07-24T10:30:38Z")

</div>

Changing the month would require a click, so maybe use an onclick event on the component ?  
Now I have no idea what you could check/do in order to evaluate what month is currently shown…

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 25, 2022, 6:30am UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/15 "2022-07-25T06:30:09Z")

</div>

just not possible to know with no javascript

---

<div class="post-metadata">

**Author:** ![Bryan\_Luza](https://avatars.discourse-cdn.com/v4/letter/b/c77e96/32.png) [@Bryan\_Luza](https://forum.inductiveautomation.com/u/Bryan_Luza)\
**Post date:** [January 30, 2024, 5:20pm UTC](https://forum.inductiveautomation.com/t/highlight-todays-date-on-datetimeinput-component-in-perspective/57707/16 "2024-01-30T17:20:05Z")

</div>

In case anyone wonders around here looking for solutions (like I did): I added this little script to the onMouseDown event of the DateTimeImput component so when you select it, it jumps to the current date. The date value needs to be clear before this so it does it only once (the script won't work good without the if statement).  
I clear the date selection after the users submit the data or on view startup with a simple event handler on the component. Works great for me, hope it helps others.

```auto
def runAction(self, event):
	# To show current date on initial selection
	if self.props.value == None:
		self.props.value = system.date.now()

```