datepicker: Framework7 date picker

In shinyMobile: Mobile Ready 'shiny' Apps with Standalone Capabilities

Framework7 date picker

Description

f7DatePicker creates a Framework7 date picker input.

updateF7DatePicker changes the value of a date picker input on the client.

Usage

f7DatePicker(
  inputId,
  label,
  value = NULL,
  multiple = FALSE,
  direction = c("horizontal", "vertical"),
  minDate = NULL,
  maxDate = NULL,
  dateFormat = "yyyy-mm-dd",
  openIn = c("auto", "popover", "sheet", "customModal"),
  scrollToInput = FALSE,
  closeByOutsideClick = TRUE,
  toolbar = TRUE,
  toolbarCloseText = "Done",
  header = FALSE,
  headerPlaceholder = "Select date"
)

updateF7DatePicker(
  inputId,
  value = NULL,
  ...,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

inputId	The id of the input object.
label	Input label.
value	The new value for the input.
multiple	If TRUE allow to select multiple dates.
direction	Months layout direction, could be 'horizontal' or 'vertical'.
minDate	Minimum allowed date.
maxDate	Maximum allowed date.
dateFormat	Date format: "yyyy-mm-dd", for instance.
openIn	Can be auto, popover (to open calendar in popover), sheet (to open in sheet modal) or customModal (to open in custom Calendar modal overlay). In case of auto will open in sheet modal on small screens and in popover on large screens.
scrollToInput	Scroll viewport (page-content) to input when calendar opened.
closeByOutsideClick	If enabled, picker will be closed by clicking outside of picker or related input element.
toolbar	Enables calendar toolbar.
toolbarCloseText	Text for Done/Close toolbar button.
header	Enables calendar header.
headerPlaceholder	Default calendar header placeholder text.
...	Parameters used to update the date picker, use same arguments as in f7DatePicker.
session	The Shiny session object, usually the default value will suffice.

Value

a Date vector.

Examples

# Date picker
if (interactive()) {
  library(shiny)
  library(shinyMobile)

  shinyApp(
    ui = f7Page(
      title = "My app",
      f7SingleLayout(
        navbar = f7Navbar(title = "f7DatePicker"),
        f7DatePicker(
          inputId = "date",
          label = "Choose a date",
          value = "2019-08-24"
        ),
        "The selected date is",
        verbatimTextOutput("selectDate"),
        f7DatePicker(
          inputId = "multipleDates",
          label = "Choose multiple dates",
          value = Sys.Date() + 0:3,
          multiple = TRUE
        ),
        "The selected date is",
        verbatimTextOutput("selectMultipleDates"),
        f7DatePicker(
          inputId = "default",
          label = "Choose a date",
          value = NULL
        ),
        "The selected date is",
        verbatimTextOutput("selectDefault")
      )
    ),
    server = function(input, output, session) {

      output$selectDate <- renderPrint(input$date)
      output$selectMultipleDates <- renderPrint(input$multipleDates)
      output$selectDefault <- renderPrint(input$default)

    }
  )
}
# Update date picker
if (interactive()) {
  library(shiny)
  library(shinyMobile)

  shinyApp(
    ui = f7Page(
      title = "My app",
      f7SingleLayout(
        navbar = f7Navbar(title = "Update date picker"),
        f7Card(
          f7Button(inputId = "selectToday", label = "Select today"),
          f7Button(inputId = "rmToolbar", label = "Remove toolbar"),
          f7Button(inputId = "addToolbar", label = "Add toolbar"),
          f7DatePicker(
            inputId = "mypicker",
            label = "Choose a date",
            value = Sys.Date() - 7,
            openIn = "auto",
            direction = "horizontal"
          ),
          verbatimTextOutput("pickerval")
        )
      )
    ),
    server = function(input, output, session) {

      output$pickerval <- renderPrint(input$mypicker)

      observeEvent(input$selectToday, {
        updateF7DatePicker(
          inputId = "mypicker",
          value = Sys.Date()
        )
      })

      observeEvent(input$rmToolbar, {
        updateF7DatePicker(
          inputId = "mypicker",
          toolbar = FALSE,
          dateFormat = "yyyy-mm-dd" # preserve date format
        )
      })

      observeEvent(input$addToolbar, {
        updateF7DatePicker(
          inputId = "mypicker",
          toolbar = TRUE,
          dateFormat = "yyyy-mm-dd" # preserve date format
        )
      })

    }
  )
}

shinyMobile documentation built on Nov. 25, 2022, 5:05 p.m.