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?
1 Like
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.
2 Likes
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
1 Like
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
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
}
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
3 Likes
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?
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
1 Like
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.
Any update on this?
I wonder why perspective doesn’t support this feature from beginning which is necessary in modern application
1 Like
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…
just not possible to know with no javascript
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.
def runAction(self, event):
# To show current date on initial selection
if self.props.value == None:
self.props.value = system.date.now()
1 Like