DatePicker {shiny.fluent}

DatePicker

Description

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.

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

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

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"))
}