New-UDDatePicker a new calendar component

Hello fellow dashboarders I was asked by another UD user if I could do them a calendar component that allowed you to easily select a start date and an end date. So I accepted the challenge. I bring New-UDDatePicker
Github page here:-

I did put the example behind the GIF on the github page, but I actually managed to bind this to UD so you can read the “from” and “to” attributes from the state in the component as shown here:-

I hope you enjoy using this control, I am looking at using it myself to reveal chart reports based on a date range. Let me know what you think. Thanks


This looks really useful. Could you explain how to install it please?

Thanks @Alc yeah to install this either go to the and search for “simpleud” without quotes. Or head over to the marketplace for universal dashboard and see all the other cool add-ins for UD. I got a blog here which has all the links to marketplace. Read the documentation for importing a module into UD. I’m sure this is on my github page as well link on the blog page. Hope this helps. Peace

In fact I will write a blog on using this control later today…

Was looking for something to write about on my blog so this page was for you. :smile:

1 Like

Thanks for the write up :smiley:

Any idea how I can get these to line up please?

New-UDRow -Columns {
            New-UDColumn -Size 3  -Content {
                # -BrowserDefault
                New-UDSelect -Label "Site" -Option {
                    New-UDSelectOption -Name " " -Value " "
                    $cache:sites = get-sites
                    $cache:sites | ForEach-Object { New-UDSelectOption -Name "$($_.site_code) $($_.site_name)" -Value "$($_.site_code)" }

                } -OnChange {
                    $Session:SiteSelected = $eventdata
                    #  Show-UDToast -Message "Changed to $($Session:SiteSelected)" -Duration 5000
                    #  Sync-UDElement -Id Heading
            New-UDColumn -Size 6 -Content {
                New-UDDatePicker -Id "Picker"


Hey @Alc well there is probably more than one way to do this…without being overly technical you could try adding something like:-

New-UDHtml -Markup "<br></br>"

Just above the

New-UDDatePicker -Id "Picker"

Or you could look at modifying the padding within the CSS for either of the components you using.

This worked :slight_smile:

'.DayPickerInput'                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              = @{
        'padding-top' = '17px'

I’m playing arround with this component. So, I’m making a Message Tracking Log for Exchange 2019. Basically, the code is the same as the sample, and the output to a grid.
If I hardcode the dates (from and to) in the command, the grid shows me the logs.
If I use the date picker, to pass those as variables for the command, I get the error:

Cannot process argument transformation on parameter ‘Start’. Cannot convert null to type “System.DateTime”.

I believe this is a powershell error, but it does not harm to ask…:stuck_out_tongue:

The Show-UDToast shows me the correct dates and all.


Get-MessageTrackingLog -ResultSize 5 -Start $start -End $end -Sender “

Get-UDDashboard | Stop-UDDashboard
$theme = Get-UDtheme -Name ‘Azure’
$Dashboard = New-UDDashboard -Title “TEST” -Content{

New-UDElement -Tag "div" -Attributes @{
    style = @{
        height = '25px'

New-UDRow -Columns {
    New-UDColumn -Size 10 -SmallOffset 1 -Content {
        New-UDRow -Columns {
            New-UDColumn -Size 10 -Content {
                New-UDDatePicker -Id "Picker"
                New-UDButton -Text "Get Dates" -OnClick {
                $from = (Get-UDElement -Id "Picker").Attributes.from
                [datetime]$s = "$from"
                $Start = get-date $s -format 'dd/MM/yyyy'
                $to = (Get-UDElement -Id "Picker")
                [datetime]$e = "$to"
                $End = get-date $e -format 'dd/MM/yyyy'
                show-udtoast -message "You Selected $Start until $End" -duration 5000 -Position center

            New-UDColumn -Size 2 -Content {
                New-UDButton -Id "btnSearch" -Text "Search" -Icon search -OnClick {
                    $SessionEXCH = New-PSSession -ConfigurationName Microsoft.Exchange -ConnectionUri -Authentication Kerberos 
                    Import-PSSession $SessionEXCH -DisableNameChecking

                    Set-UDElement -Id "results" -Content {
                        New-UDGrid -Title "Exchange Message Tracking" -Headers @("Timestamp","EventId","Source","Sender","Recipients","MessageSubject","MessageInfo") -Properties @("Timestamp","EventId","Source","Sender","Recipients","MessageSubject","MessageInfo") -Endpoint {
                            $Logs = Get-MessageTrackingLog -ResultSize 5 -Start $Start -End $End -Sender "" 
                            $Logs | Out-UDGridData 

New-UDRow -Columns {
    New-UDColumn -SmallSize 10 -SmallOffset 1 {
        New-UDElement -Tag "div" -Id "results"

} -Theme $theme

Start-UDDashboard -Port 10000 -Dashboard $Dashboard


I’m on an older exchange at work. But when I say set an out of office I got to do it in mm/dd/yyyy format in powershell. So does exchange 2019 accept yyyy-mm-dd format?

Crap just seen you are editing date. Have you tried in mm/dd/yyyy out of curiosity

Hi @abarrozo,

Youre trying to retrieve variables across endpoints.

In order to archieve this you need to utilize one of the magical variables $cache or $session.

IE: on button click just do $session:start = get-udelement in order to have it retrievable from the other endpoint.

Another thing to note: I’ve found importing PSSessions in endpoints to be kinda dirty, and if you do make sure to disconnect from the session at the end of your endpoint.
I’d suggest just creating the session and then using the “invoke-command -session $exchsession -scriptblock {get-messagetrackinglog}”

Heck, you could go fancy and store your Exchange Session in a $session variable, this way you can even invoke commands across your endpoints!

Hi! The magical $Cache did the trick! Thanks a lot.

@abarrozo my dude,

Remember that $cache is across your entire dashboard, $session is just for the current client.
In this usecase i’d suggest going with $session for the date input and $cache for the exchange session, to prevent Phyllis in accounting getting annoyed that her date inputs are acting crazy.

Test em both out my man!

I see your point! Still learning! Thanks a lot.


No probs bro, the UD forums is ready to assist you!

Take a look @psDevUK’s blog for some inspiration, and refill on content vs endpoint :


Should have spotted that you was using content script block which only makes the one request before it gets the data…it seems to work ok on simple math and things, but if you making an SQL call then the content can display before the variable holding the information is ready…hence you use @BoSen29 method…I really need to get my iPhone repaired as my screen is cracked to bits…the official documentation is great to learn from as well, I even got pointed by Mr @BoSen29 to an article I had not read…there is always things to learn and expand in UD which makes it so awesome :crazy_face:


Hi Guys! Maybe this is a stupid question as well, but with Theme “Azure”, the DatePicker Font Color is white as the background.


Is there any way to sort this out?

This does not happen with the Default Theme

Hey @abarrozo don’t feel like you ever asking stupid questions…I do some really dinny things myself…anyways back to the subject…So the themes are based on CSS so this is def CSS related, I will load the component now in an azure theme inspect the element by right clicking on it, then I will have a butchers at the CSS code, then you got a few choices…you can either edit the theme (risky business) or apply your own theme and make azure the parent theme…or go crazy and use something like UDStyle:- but you will still need to know the CSS…give me a moment just got back from work.

psDevUK, no CSS knowledge here, but with my friend Google I get things done (most times LOL). I am playing with parent Themes, to get the right bling.

1 Like

yeah prior to using UD I had no CSS knowledge either…still waiting for VSCode to start…man my laptop is slow…