New-UDDatePicker a new calendar component

psDevUK · November 8, 2019, 5:43pm

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
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.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

Alc · November 23, 2019, 2:13pm

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

psDevUK · November 23, 2019, 2:31pm

Thanks @Alc yeah to install this either go to the powershellgallery.com 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 https://psdevuk.github.io/ud-flix/ 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

psDevUK · November 23, 2019, 2:34pm

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

psDevUK · November 23, 2019, 6:59pm

Was looking for something to write about on my blog https://psdevuk.github.io/ud-flix/Custom-Date-Picker/ so this page was for you.

Alc · November 27, 2019, 11:23am

Thanks for the write up

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"

            }
        }

psDevUK · November 27, 2019, 1:33pm

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.

Alc · November 28, 2019, 12:26pm

This worked

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

abarrozo · November 28, 2019, 5:40pm

Hi!
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…

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

Command/Code:

Get-MessageTrackingLog -ResultSize 5 -Start $start -End $end -Sender “mail@domain.com”

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").Attributes.to
                [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 http://mailserver.domain.com/PowerShell/ -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 "mail@domain.com" 
                            $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

Thanks

psDevUK · November 28, 2019, 6:06pm

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

BoSen29 · November 28, 2019, 6:11pm

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!

abarrozo · November 28, 2019, 6:15pm

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

BoSen29 · November 28, 2019, 6:19pm

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

abarrozo · November 28, 2019, 6:21pm

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

BoSen29 · November 28, 2019, 6:26pm

@abarrozo

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 : https://psdevuk.github.io/ud-flix/Content-vs-Endpoint/

psDevUK · November 28, 2019, 9:55pm

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

abarrozo · December 2, 2019, 5:55pm

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

psDevUK · December 2, 2019, 6:36pm

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:- https://psdevuk.github.io/ud-flix/Bring-more-styles-with-UDStyle/ but you will still need to know the CSS…give me a moment just got back from work.

abarrozo · December 2, 2019, 6:41pm

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.

psDevUK · December 2, 2019, 6:42pm

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

Topic		Replies	Views
Requested component by UD users built for UD users Universal Dashboard Show Off datetime , select-datetime	19	1242	April 17, 2020
Fancy new control, UDCalendar Universal Dashboard Show Off	57	4528	May 15, 2024
New-UDDatePicker Date Range PowerShell Universal	1	136	February 13, 2024
I have Googled and found a Date Picker, but no idea how to integrate it? Universal Dashboard Help	12	1622	January 17, 2020
DatePicker Input Universal Dashboard Help	10	1466	April 11, 2019

New-UDDatePicker a new calendar component

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

Related topics