Requested component by UD users built for UD users

Universal Dashboard Universal Dashboard Show Off
,
1

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
2

Fancy man!
20 char limit

2 Likes
3

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

1 Like
4

@psDevUK Great slim date time component :slight_smile:

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

2 Likes
5

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

2 Likes
6

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?

image
image904Ɨ327 12.7 KB

Thanks!

1 Like
7

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
8

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
9

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:

10

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:

11

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
12

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.

13

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

test
test772Ɨ429 481 KB

14

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.

15

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.

16

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)

17

@psDevUK -

fixed it

1 Like
18

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

19

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

20

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