Highlight today's date on dateTimeInput component in perspective

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?

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().

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:

1 Like

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?

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.

1 Like

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.

1 Like

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

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.

1 Like

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?

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

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
do this for every 31days

.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
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

2 Likes