Picking a date can be tough without context. A date picker (DatePicker) offers a drop-down control that’s optimized for picking a single date from a calendar view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available dates.

For more details and examples visit the official docs. The R package can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

DatePicker(...)

DatePicker.shinyInput(inputId, ..., value = defaultValue)

updateDatePicker.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

value

Date
Default value of the DatePicker, if any

allFocusable

boolean
Allows all elements to be focused, including disabled ones

allowTextInput

boolean
Whether the DatePicker allows input a date string directly or not

ariaLabel

string
Aria Label for TextField of the DatePicker for screen reader users.

borderless

boolean
Determines if DatePicker has a border.

calendarAs

IComponentAs<ICalendarProps>
Custom Calendar to be used for date picking

calendarProps

ICalendarProps
Pass calendar props to calendar component

calloutProps

ICalloutProps
Pass callout props to callout component

className

string
Optional Classname for datepicker root element .

componentRef

IRefObject<IDatePicker>
Optional callback to access the IDatePicker interface. Use this instead of ref for accessing the public methods and properties of the component.

dateTimeFormatter

ICalendarFormatDateCallbacks
Apply additional formating to dates, for example localized date formatting.

disableAutoFocus

boolean
Whether the DatePicker should open automatically when the control is focused

disabled

boolean
Disabled state of the DatePicker.

firstDayOfWeek

DayOfWeek
The first day of the week for your locale.

firstWeekOfYear

FirstWeekOfYear
Defines when the first week of the year should start, FirstWeekOfYear.FirstDay, FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values

formatDate

(date?: Date) => string
Optional method to format the chosen date to a string to display in the DatePicker

highlightCurrentMonth

boolean
Whether the month picker should highlight the current month

highlightSelectedMonth

boolean
Whether the month picker should highlight the selected month

initialPickerDate

Date
The initially highlighted date in the calendar picker

isMonthPickerVisible

boolean
Whether the month picker is shown beside the day picker or hidden.

isRequired

boolean
Whether the DatePicker is a required field or not

label

string
Label for the DatePicker

maxDate

Date
The maximum allowable date.

minDate

Date
The minimum allowable date.

onAfterMenuDismiss

() => void
Callback that runs after DatePicker's menu (Calendar) is closed

onSelectDate

(date: Date | null | undefined) => void
Callback issued when a date is selected

parseDateFromString

(dateStr: string) => Date | null
Optional method to parse the text input value to date, it is only useful when allowTextInput is set to true

pickerAriaLabel

string
Aria label for date picker popup for screen reader users.

placeholder

string
Placeholder text for the DatePicker

showCloseButton

boolean
Whether the CalendarDay close button should be shown or not.

showGoToToday

boolean
Whether the "Go to today" link should be shown or not

showMonthPickerAsOverlay

boolean
Show month picker on top of date picker when visible.

showWeekNumbers

boolean
Whether the calendar should show the week number (weeks 1 to 53) before each week row

strings

IDatePickerStrings
Localized strings to use in the DatePicker

styles

IStyleFunctionOrObject<IDatePickerStyleProps, IDatePickerStyles>
Call to provide customized styling that will layer on top of the variant rules.

tabIndex

number
The tabIndex of the TextField

textField

ITextFieldProps
Pass textField props to textField component. Prop name is "textField" for compatiblity with upcoming slots work.

theme

ITheme
Theme provided by High-Order Component.

today

Date
Value of today. If null, current time in client machine will be used.

underlined

boolean
Whether or not the Textfield of the DatePicker is underlined.

Best practices

Layout

  • Use the control the way it’s designed and built. Don’t break it apart.

Content

  • The control provides the date in a specific format. If the date can be entered in an input field, provide helper text in the appropriate format.

Examples

library(shiny.fluent)

if (interactive()) {
  shinyApp(
    ui = div(
      DatePicker.shinyInput("date", value = "2020-06-25T22:00:00.000Z"),
      textOutput("dateValue"),
      h3("If `value` is missing, default to system date"),
      DatePicker.shinyInput("date2"),
      textOutput("dateDefault"),
      h3("If `value` is NULL, return NULL"),
      DatePicker.shinyInput("date3", value = NULL, placeholder = "I am placeholder!"),
      textOutput("dateNull")
    ),
    server = function(input, output) {
      output$dateValue <- renderText({
        sprintf("Value: %s", input$date)
      })
      output$dateDefault <- renderText({
        sprintf("Value: %s", input$date2)
      })
      output$dateNull <- renderText({
        sprintf("Value: %s", deparse(input$date3))
      })
    }
  )
}