Fancy new control, UDCalendar

amazing work thanks for getting this out - and with lots of customizations!

Removed the time



How did you remove the time if you don’t mind me asking? :slight_smile:

Hey @kreef just woke up having my morning Tea…
the parameter -showTimeSelect set this to $false as in
New-UDSelectDateTime -showTimeSelect $false
To remove the time select

1 Like
New-UDSelectDateTime -Id "Picker" -dateFormat "MMMM d, yyyy" -WeekNumbers $false -showTimeSelect $false -Clearable $false -Locale "en-US" -OnChange {
     Show-UDToast -Message "Date Changed $eventData" -Position topLeft -Duration 3000

The above code snip is what I used to generate the image I posted above. You can also change how the date/time is displayed using the -dateFormat parameter.

And the -Clearable switch allows for a X clear button to clear out the date - but the positioning and style of that button overlaps with the date (in my UD anyway)

Hey @mylabonline for the overlapping thing, you can set the input field to be a bit wider using the following CSS:-

$theme = New-UDTheme -Name "Basic" -Definition @{
    '.react-datepicker__input-container' = @{
        'width' = "140% !important"
} -Parent "Default"

This will show the full time and have the space for the clear button…
I did put some simple documentation here:-

1 Like

Hey @BoSen29
are you sure that the endpoint you make in the code is uniq for that user?

$OnChange = New-UDEndpoint -Endpoint $OnChange -Id ($Id + “onChange”)

are we sure that the “new-udcalendar” are uniq for each user? (
if not they will be making changes for each other if they use it as the same time ?

edit: hmm I can see that it’s the same pattern in Standard UD components, so I guess they are :slight_smile:

Hi @McAndersDK!

I did kinda just copy from UD’s code, so yeah should be fine! :slight_smile:

Are you having issues with the component, or are you using it as a reference for a new component?

hey @BoSen29, ah yeah sorry, no issue with your component :slight_smile:
yeah I were looking into you module for the actions/events.

I better not highjack this thread with component questions/wondering :wink:

Feel free to post in the UD Development topic, and i’ll happy to give you guidance man! :slight_smile:

Should this control have text attribute so the field can be seen on the page? The demo works but the field appears transparent once cleared. Very nice job. Thanks!!!

Hi @cadayton this clears the input when the item is cleared. Not seen this transparent issue yet? Have you tried this in a different browser? This is one of the few components I am not actually using myself, so will have to look into this. I know sometimes when I use FireFox certain input fields like the date selection component I did does not look that visible, as opposed to IE…are you able to post a before and after screenshot? I am guessing this will most likely need some CSS setting tweaked to see the input field as a different colour.

Behavior is the same in FireFox and Chrome.

Out of interest is there a way to disable the calendar? I’m looking to include the calendar in a form but the user filling the form in should only be able to select anything if a certain checkbox is checked. I can do this with other fields like text boxes etc but I couldn’t see a way to do it for the calendar.

Hi @tom.obrien,

Disable - no, hide out of sight from the user? Yes!
Note: remove-udelement does the same thing as “Set-UDELEMENT -attributed @{hidden = $true}”

New-UDButton -Text "RemoveMe" -OnClick {
                    Remove-UDElement -id "Picker"
                New-UDButton -text "ShowME" -OnClick {
                    Set-UDElement -id "Picker" -Attributes @{
                        hidden = $false

Really liking the new version of this component, some nice new features. I think I might have found a bug though. I wanted to apply some css with New-UDStyle however if I put the picker inside a new-udstyle element then I get this:

Adding CSS at the theme level does work but there are a couple of bits of CSS that I want to only add to one date picker so ideally I wanted to use new-udstyle.

You cool to post the udstyle bit of code, just going from the screenshot you provided it looks unhappy about the timevalue being entered. Just thought if I could use your example to try and replicate the issue. Thanks

Yeah absolutely. I had a bit of a play around and it seems to do the same regardless of what is in the style however here’s an example dashboard that you should be able to run which shows it in action:

$init = New-UDEndpointInitialization -Module @(‘UniversalDashboard.UDSelectDateTime’)
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 10005 -Dashboard (
New-UDDashboard -Title “Powershell UniversalDashboard” -Content {
New-UdColumn -Size 3 -Endpoint {
New-UDParagraph -Text “This date picker works”
New-UDSelectDateTime -Id “Picker1” -TimeIntervals 30 -WeekNumbers $true -Clearable $false -OnChange {
} -inline $true -showYearDropdown $true -showMonthDropdown $true -fixedHeight $true -showTimeSelect $true -showPreviousMonths $false -CloseOnSelect $true
New-UDParagraph -Text “This date picker doesn’t :(”
New-UDStyle -Style ’
.react-datepicker__time-container–with-today-button {
}’ -Content {
New-UDSelectDateTime -Id “Picker2” -TimeIntervals 30 -WeekNumbers $true -Clearable $false -OnChange {
} -inline $true -showYearDropdown $true -showMonthDropdown $true -fixedHeight $true -showTimeSelect $true -showPreviousMonths $false -CloseOnSelect $true
} -AutoRefresh
} -EndpointInitialization $init

This is the result that I get:

What is really strange is that after a few seconds the whole page disappears and is replaced by this:

This only happens when the picker inside the UDStyle is on the page page though, if you comment out the second picker then the first one loads fine and stays on the page without any errors.

Strange one!

1 Like

Is this only for picking dates? If so, does anyone know if something exists to allow displaying and interacting with events on a calendar ala outlook?