shinyMobile (version 2.0.0)

f7DatePicker: 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",
  style = list(outline = FALSE, inset = FALSE, strong = FALSE, dividers = FALSE),
  ...
)
updateF7DatePicker(
  inputId,
  value = NULL,
  ...,
  session = shiny::getDefaultReactiveDomain()
)

Value

a Date vector.

Arguments

inputId

Date input id.

label

Input label.

value

Array with initial selected dates. Each array item represents selected date. If timePicker enabled, the value needs to be an object of type POSIXct.

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.

style

Input style. Inherit from f7List options such as outline, inset, strong and dividers.

...

Other options to pass to the picker. See https://framework7.io/docs/calendar#calendar-parameters.

session

The Shiny session object, usually the default value will suffice.

Examples

library(shiny)
library(shinyMobile)

app <- shinyApp(
  ui = f7Page(
    title = "My app",
    f7SingleLayout(
      navbar = f7Navbar(title = "Update date picker"),
      f7Segment(
        f7Button(inputId = "update", label = "Update"),
        f7Button(inputId = "rmToolbar", label = "Remove toolbar"),
        f7Button(inputId = "addToolbar", label = "Add toolbar")
      ),
      f7Segment(
        f7Button(inputId = "removeTime", label = "Remove time"),
        f7Button(inputId = "addTime", label = "Add time")
      ),
      f7DatePicker(
        inputId = "picker",
        label = "Choose a date and time",
        value = as.POSIXct("2024-03-24 09:00:00 UTC"),
        openIn = "auto",
        direction = "horizontal",
        timePicker = TRUE,
        dateFormat = "yyyy-mm-dd, HH::mm"
      ),
      f7Block(verbatimTextOutput("pickerval"))
    )
  ),
  server = function(input, output, session) {
    output$pickerval <- renderPrint(input$picker)

    observeEvent(input$update, {
      updateF7DatePicker(
        inputId = "picker",
        value = as.POSIXct("2024-03-23 10:00:00 UTC"),
        timePicker = TRUE,
        dateFormat = "yyyy-mm-dd, HH::mm" # preserve date format
      )
    })

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

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

    observeEvent(input$removeTime, {
      updateF7DatePicker(
        inputId = "picker",
        value = as.Date(input$picker),
        timePicker = FALSE,
        dateFormat = "yyyy-mm-dd" # new date format
      )
    })

    observeEvent(input$addTime, {
      updateF7DatePicker(
        inputId = "picker",
        value = as.POSIXct(input$picker),
        timePicker = TRUE,
        dateFormat = "yyyy-mm-dd, HH::mm" # preserve date format
      )
    })
  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app