Revisiting A Previous Component

I have updated the date and time component I released a while back

Featured image


Wasn’t planning on any blogs as I actually been really busy lately with work and life. But when a fellow dashboard user reaches out for some assistance it’s just to hard for me to say no. So without doing a Conner McGregor and releasing the personal DM basically I was asked by another UniversalDashboard user if I could add the ability to set the initial date on the UniversalDashboard.UDSelectDateTime component I release a while back. Weirdly enough although I could think of several reasons to use this component, I never actually used this specific component I built for any of my dashboards. So why did I build it then?

The original Story Behind The Component

This is the true story of a component to select the date and the time. It was requested on the UD forums to have a component that was like a calendar component but would also allow you to select the time. Both things built into one component. This folks is the answer to that request. This component is based upon the component shown on I tried to implement as many of the useful props and pass them as powershell parameters

I have now updated this component new parameters listed below

I had a request to allow the user to specify the start date. Whilst I was at it, I noticed some other handy parameters I could add. So please see the 11 additional things I done to upgrade this component

Example Using The Component

Import-Module -Name UniversalDashboard
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 {
                    Show-UDToast -Message "Date Changed $eventData" -Position topLeft -Duration 3000
            } -AutoRefresh
            New-UDColumn -Size 4 -Endpoint {

                New-UDButton -Text "Toast" -OnClick {
                    $val = (Get-UDElement -id "Picker").Attributes.startDate
                    Show-UDToast -Message "Selected:- $val" -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


Demo with new parameters

 New-UdColumn -Size 3 -Endpoint {
           $future = (get-date).AddDays(4).AddHours(3).AddMinutes(15)
           $Exclude = (get-date).AddDays(-3)
                New-UDSelectDateTime -Id "Picker" -StartDate $future -TimeIntervals 5 -WeekNumbers $true -Clearable $true  -OnChange {
                     $Session:Selected = $eventData
                 } -DateFormatCalendar "MMMM yyyy" -CloseOnSelect $true -showPopperArrow $true -showYearDropdown $true -showMonthDropdown $true -startOpen $false -inline $true -fixedHeight $true
            } -AutoRefresh

Then to read the values, you could either use the $Session:Selected which will only hold the value if the user has changed it, or if the user hasn’t changed the date, then read it directly from the state of the component via the attributes. Like so

                 New-UDButton -Text "Toast" -OnClick {
                    Show-UDToast -Message "OnChange Selected:- $Session:Selected" -Position topLeft -Duration 4000
                    $val = (Get-UDElement -id "Picker").Attributes.startDate
                    $val2date = $val.Substring(0,24)
                    $valis = (Get-Date $val2date).ToString("dd/MM/yyyy HH:mm")
                    Show-UDToast -Message "The default is $valis" -Position topLeft -Duration 4000

As the JavaScript date held in the state is not recognised as a valid date, I am using the SubString method to read the first 25 characters as that is all I am interested in passing to Powershell to process as the date. I hope these examples makes sense, and any issues, drop me a shout on the UD forum


As I am from the United Kingdom I fixed the locale issue and this is now defaulted to enGB sorry I do not know how to dynamically change this, but if you are from another country really wanting this in your home language I am more than happy to make it happen and release a language specific component for you



Not that I don’t have enough to deal with (I have 4 daughters) the challenge of adding the one additional parameter requested was super tricky to pull off, I encourage you to have a butchers of the JSX file included with the module to see all the magic behind the component. Adding the ability to select a specific start date did take numerous builds, and also involved me tweeting BoSen29 who is based outside the UK so this was an international call for help, and he was kind enough to send me some links which would ultimately lead to me solving the puzzle. This request was on Friday, and I managed to pull it off by Saturday morning, so I was really happy with the results, despite this taking me lots more goes than I initially planned to actually nail this. I looked at the main website of this component which can be found by clicking on this link and noticed there were some cool additional props I could add so went to this documentation page on all of the props available on this component and added these as additional parameters to the component to allow further customisation of the component, and get it to behave how you want it to for the users accessing your dashboard. I hope this has been a good read and that this component will find it’s way to your dashboard.