Skip to contents

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 cannot handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

Usage

DatePicker(...)

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

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

Arguments

...

Props to pass to the component. The allowed props are listed below in the Details section.

inputId

ID of the component.

value

Starting value.

session

Object passed as the session argument to Shiny server.

Value

Object with shiny.tag class suitable for use in the UI of a Shiny app. The update functions return nothing (called for side effects).

Details

  • 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.

  • value Date
    Default value of the DatePicker, if any

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

# Example 1
library(shiny)
library(shiny.fluent)

ui <- function(id) {
  ns <- NS(id)
  div(
    DatePicker.shinyInput(ns("date"), value = "2020-06-25T22:00:00.000Z"),
    textOutput(ns("dateValue")),
    h3("If `value` is missing, default to system date"),
    DatePicker.shinyInput(ns("date2")),
    textOutput(ns("dateDefault")),
    h3("If `value` is NULL, return NULL"),
    DatePicker.shinyInput(ns("date3"), value = NULL, placeholder = "I am placeholder!"),
    textOutput(ns("dateNull"))
  )
}

server <- function(id) {
  moduleServer(id, function(input, output, session) {
    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))
    })
  })
}

if (interactive()) {
  shinyApp(ui("app"), function(input, output) server("app"))
}

# Example 2
library(shiny)
library(shiny.fluent)

# Supplying custom strings for DatePicker
ui <- function(id) {
  fluentPage(
    DatePicker.shinyInput(
      "date",
      value = Sys.Date(),
      strings = list(
        months = list(
          "January", "February", "March", "April",
          "May", "June", "July", "August",
          "September", "October", "November", "December"
        ),
        shortMonths = list(
          "Jan", "Feb", "Mar", "Apr", "May", "Jun",
          "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ),
        days = list(
          "Sunday", "Monday", "Tuesday", "Wednesday",
          "Thursday", "Friday", "Saturday"
        ),
        shortDays = list("S", "M", "T", "W", "T", "F", "S"),
        goToToday = "Go to today",
        prevMonthAriaLabel = "Go to previous month",
        nextMonthAriaLabel = "Go to next month",
        prevYearAriaLabel = "Go to previous year",
        nextYearAriaLabel = "Go to next year"
      )
    )
  )
}

server <- function(id) {
  moduleServer(id, function(input, output, session) {})
}

if (interactive()) {
  shinyApp(ui("app"), function(input, output) server("app"))
}