Requested component by UD users built for UD users

So @BoSen29 was the first to release his own calendar component. I released one shortly after, which allowed you to select between a start date and an end date.
It was requested by @wsl2001 and @augustin.ziegler and @mylabonline if another calendar control could be built which would also have the ability to select a time.
I have now published this component to the marketplace here:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDSelectDateTime
I even went and wrote some instructions as well, and hosted an example ps1 file here:-

So like I say this is a component for UD users, requested by UD users
Example

6 Likes

Fancy man!
20 char limit

2 Likes

Impressive! Youā€™re getting really good at this! Nice work!

1 Like

@psDevUK Great slim date time component :slight_smile:

I will definitely include it in my current project ā€¦

2 Likes

Thanks for building this! I can tell you this is really going to come in handy!

2 Likes

Hi!!
Awesome component! Now trying to implement to my project.

I have an issueā€¦

The eventdata shows the correct Locale and Date/Time selected, but the toast showing only date/time shows in GMT 0 and not GMT -3 as I need.

Locale used: es-AR

I believe it has to do with ā€œ(Get-UDElement -id ā€œPickerā€).Attributes.startDateā€. It is not using the Locale selected.

Does it make any sense?

Thanks!

1 Like

Hey @abarrozo thanks for the postā€¦I did notice myself the date was coming out as mm/dd/yyyy HH:mm:ss when I selected en-GB to be default locale. I was personally going to splice and dice the date format into the required but will look to improve this in the 1.0.1 release, this is a demo I put together but you could always store the $eventdata into a session variable, which would then give you the results you wanted. The demo just shows a few ways you can interact with the component. This is how I would get the results you want:-

Import-Module -Name UniversalDashboard.community -RequiredVersion 2.8.1
Import-Module -Name UniversalDashboard.UDSelectDateTime
Get-UDDashboard | Stop-UDDashboard
$theme = New-UDTheme -Name "Basic" -Definition @{
    '.react-datepicker__input-container' = @{
        'width' = "140% !important"
    }
} -Parent "Default"
$endpointinit = New-UDEndpointInitialization -Module @("UniversalDashboard.UDSelectDateTime")
Start-UDDashboard -Port 1000 -AutoReload -Dashboard (
    New-UDDashboard -Title "Powershell UniversalDashboard" -Theme $theme -Content {
        New-UDRow -Columns {
            New-UDColumn -Size 3 -Endpoint {
                New-UDSelectDateTime -Id "Picker" -TimeIntervals 5 -WeekNumbers $true -Clearable $true -Locale "en-GB" -OnChange {
                    $Session:Selected = $eventData
                }
            } -AutoRefresh
            New-UDColumn -Size 4 -Endpoint {

                New-UDButton -Text "Toast" -OnClick {
                    Show-UDToast -Message "Selected:- $Session:Selected" -Position topLeft -Duration 4000
                }
                New-UDButton -Text "RemoveMe" -OnClick {
                    Remove-UDElement -id "Picker"
                }
                New-UDButton -text "ShowME" -OnClick {
                    Set-UDElement -id "Picker" -Attributes @{
                        hidden = $false
                    }
                }
                New-UDButton -Text "ClearMe" -OnClick {
                    Clear-UDElement -Id "Picker"
                }
            }
        }

    } -EndpointInitialization $endpointinit

)
3 Likes

Iā€™m using this as a workarround for nowā€¦

$From = (Get-UDElement -id ā€œPickerā€).Attributes.startDate
[datetime]$s = ā€œ$Fromā€
$Start = get-date $s.AddHours(-3) -format ā€˜yyyy-MM-dd hh:mm ttā€™

(-3) indicating the ā€œtime zoneā€. Itā€™s ugly but it worksā€¦LOL

2 Likes

Iā€™m really liking this date/time picker, itā€™s perfect for what I need. Iā€™ve noticed that since the clocks have changed for daylight savings, the picker shows the correct time but the output itā€™s giving is now an hour behind (Iā€™m using the default en-GB).

@psDevUK is it statically using GMT/UTC? Do you know if there is any way to account for daylight savings?
I could get it to check if the date is between 29th March and 25th October but I just wondered if the picker had any way of doing this?

Thanks :slight_smile:

Thanks @tom.obrien for taking the time to look and use this componentā€¦it is one of the very few components I am not using myself on one of my dashboardsā€¦so I will have to look into thisā€¦however I know @adam and @AlonGvili have so many new goodies for V3 of UD I would not be suprised if this is in V3ā€¦I been snowed under supporting at my work with this whole covid-19 pandemic so will put this on the support list :slight_smile:

No problem :slight_smile: Iā€™ve temporarily got around it by just taking the output and using PS to do .AddHours(1). Obviously a bit of a bodge but will tie me over for now!

1 Like

Yeah I am intrigued by this nowā€¦think I will dig out the demo script I got for this and take a butchers, as I am UK too so I should in theory get the same resultsā€¦good to know you have a work-around, I have lots of work-arounds in life :slight_smile: but would be good to get to the bottom of it.

Mine is saying (Bristish Summer Time) is yours doing that? Iā€™m using firefox and everything works as expected using this script:-

Import-Module -Name UniversalDashboard.community -RequiredVersion 2.8.1

Import-Module -Name UniversalDashboard.UDSelectDateTime

Get-UDDashboard | Stop-UDDashboard

$theme = New-UDTheme -Name "Basic" -Definition @{

    '.react-datepicker__input-container' = @{

        'width' = "140% !important"

    }

} -Parent "Default"

$endpointinit = New-UDEndpointInitialization -Module @("UniversalDashboard.UDSelectDateTime")

Start-UDDashboard -Port 1000 -AutoReload -Dashboard (

    New-UDDashboard -Title "Powershell UniversalDashboard" -Theme $theme -Content {

        New-UDRow -Columns {

            New-UDColumn -Size 3 -Endpoint {

                New-UDSelectDateTime -Id "Picker" -TimeIntervals 5 -WeekNumbers $true -Clearable $true -Locale "en-GB" -OnChange {

                    $Session:Selected = $eventData

                }

            } -AutoRefresh

            New-UDColumn -Size 4 -Endpoint {

                New-UDButton -Text "Toast" -OnClick {

                    Show-UDToast -Message "Selected:- $Session:Selected" -Position topLeft -Duration 4000

                    $Session:Selected > C:\ud\time.txt

                }

                New-UDButton -Text "RemoveMe" -OnClick {

                    Remove-UDElement -id "Picker"

                }

                New-UDButton -text "ShowME" -OnClick {

                    Set-UDElement -id "Picker" -Attributes @{

                        hidden = $false

                    }

                }

                New-UDButton -Text "ClearMe" -OnClick {

                    Clear-UDElement -Id "Picker"

                }

            }

        }

    } -EndpointInitialization $endpointinit

)

The toast and the output to C:\UD\time.txt is showing me what I selectedā€¦I did read older browsers not supportedā€¦try the above script do you get working results like I didā€¦?

Here is my proof in the pudding I am not telling fibs:-

Interesting, that does work for me too. Iā€™m getting the value in a different way though so Iā€™m wondering if thatā€™s why. In your example youā€™re getting it with the -onchange eventdata but Iā€™m using (Get-UDElement -id ā€˜pickerā€™).Attributes.StartDate. The reason I did it that way was because if the user doesnā€™t change the date/time then the value will be blank.

Hmmm I just looked at this in firefox then pressing F12 and went to the REACT add-on tab to inspected the ā€œstartdateā€ that is held in the state of the componentā€¦and when I updated it the ā€œstartdateā€ updated to the same valueā€¦so itā€™s either a browser issue, I am using firefox with no problemsā€¦or itā€™s a refresh issue with the component and UD, you are using this in an endpoint yeah? Have you also used the -AutoRefresh param like I didā€¦? Well I hope the script I provided will enable you to solve it within your script as you seen it does work.

Strange, I tried in both edge and chrome but got the same result. It does update when I change the date/time but itā€™s always an hour behind. Before the clocks changed it was outputting the correct time.

I tried getting the value from the eventdata using -onchange and it does indeed return the correct value. I think I will use that method instead. Providing I null off the session variable at the end then if the box isnā€™t edited I can just use get-date instead for the output.

The output I get is slightly different to yours so Iā€™m wondering if its a machine locale setting or something. Yours has ā€œBritish Summer Timeā€ whereas mine has ā€œGMT Daylight Timeā€ (not that there should be any difference between them!)

e.g.
Wed Apr 01 2020 19:00:00 GMT+0100 (GMT Daylight Time)

@psDevUK -

fixed it

1 Like

@psDevUK -

Do you know if itā€™s possible to include UDSelectDateTime in UDInput or include in one of the UDInputField? I tried to just include the UDSelectDateTime under UDInput, it did not appear. The existing UDInputField for date & time does not look good.

You could use it outside of the input but on the new UD action reference the ID and the attribute value to obtain the data. I hope this makes sense on :iphone: atm

Thanks, @psDevUK.

It seems the selected datetime is 2 hours behind (server is under CET timezone) - I think it generated standard GMT time. I added +2 hours in the output attributes value. The eventdata is showing browser/clients correct datetime though. To fix this, I added AddHours(2) in ((Get-UDElement -id ā€œPickerā€).Attributes.startDate).Addhours(2)

Anyway, how do you align the time container nicely?

image