f7DatePicker in f7TabLayout()

[styvens]

Hi Tim,

Thank you so much for this amazing package.

f7DatePicker in f7TabLayout () doesn't work when I deploy the app, is there any way to do it?

Thank you.

[DivadNojnarg]

Hi Styvens,

do you have any reproducible code? Thanks

[styvens]

Hi David;

In the following example, I just replicate the code that is in shinyMobile Reference and add a f7DatePicker in the first Tab. When this is displayed it looks good on a desktop, but on my android, the date field does not work. The example is displayed on https://mydash.shinyapps.io/proofdateMobile/

Thanks for your help.

Code:

  library(shinyMobile)
  library(shinyWidgets)
  
  shiny::shinyApp(
    ui = f7Page(
      title = "My app",
      init = f7Init(skin = "md", theme = "light"),
      f7TabLayout(
        tags$head(
          tags$script(
            "$(function(){
            $('#tapHold').on('taphold', function () {
            app.dialog.alert('Tap hold fired!');
            });
            });
            "
      )
      ),
      panels = tagList(
        f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
        f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", effect = "cover")
      ),
      navbar = f7Navbar(
        title = "Tabs",
        hairline = FALSE,
        shadow = TRUE,
        left_panel = TRUE,
        right_panel = TRUE
      ),
      f7Tabs(
        animated = FALSE,
        swipeable = TRUE,
        f7Tab(
          tabName = "Tab 1",
          icon = f7Icon("email"),
          active = TRUE,
          f7Shadow(
            intensity = 10,
            hover = TRUE,
            f7Card(
              title = "Card header",
              f7Stepper(
                "obs1",
                "Number of observations",
                min = 0,
                max = 1000,
                value = 500,
                step = 100
              ),
              f7DatePicker(
                inputId = "date",
                label = "Choose a date",
                value = "2019-08-24"
              ),
              
              plotOutput("distPlot1"),
              footer = tagList(
                f7Button(inputId = "tapHold", label = "My button"),
                f7Badge("Badge", color = "green")
              )
            )
          )
        ),
        f7Tab(
          tabName = "Tab 2",
          icon = f7Icon("today"),
          active = FALSE,
          f7Shadow(
            intensity = 10,
            hover = TRUE,
            f7Card(
              title = "Card header",
              f7Select(
                inputId = "obs2",
                label = "Distribution type:",
                choices = c(
                  "Normal" = "norm",
                  "Uniform" = "unif",
                  "Log-normal" = "lnorm",
                  "Exponential" = "exp"
                )
              ),
              plotOutput("distPlot2"),
              footer = tagList(
                f7Button(label = "My button", src = "https://www.google.com"),
                f7Badge("Badge", color = "orange")
              )
            )
          )
        ),
        f7Tab(
          tabName = "Tab 3",
          icon = f7Icon("cloud_upload"),
          active = FALSE,
          f7Shadow(
            intensity = 10,
            hover = TRUE,
            f7Card(
              title = "Card header",
              f7SmartSelect(
                inputId = "variable",
                label = "Variables to show:",
                c("Cylinders" = "cyl",
                  "Transmission" = "am",
                  "Gears" = "gear"),
                multiple = TRUE,
                selected = "cyl"
              ),
              tableOutput("data"),
              footer = tagList(
                f7Button(label = "My button", src = "https://www.google.com"),
                f7Badge("Badge", color = "green")
              )
            )
          )
        )
      )
        )
      ),
    server = function(input, output) {
      output$distPlot1 <- renderPlot({
        dist <- rnorm(input$obs1)
        hist(dist)
      })
      
      output$distPlot2 <- renderPlot({
        dist <- switch(
          input$obs2,
          norm = rnorm,
          unif = runif,
          lnorm = rlnorm,
          exp = rexp,
          rnorm
        )
        
        hist(dist(500))
      })
      
      output$data <- renderTable({
        mtcars[, c("mpg", input$variable), drop = FALSE]
      }, rownames = TRUE)
    }
    )

[DivadNojnarg]

Could you give me more details about your android device (version, ...). I tried on Nvidia shield (quite old android) and it works. Could you take a screenshot? Thanks :)

[styvens]

Hi David;

This is the phone information.

When I see the app on the phone it looks good, but it doesn't show the date selection calendar.

While on the desktop it looks like this:

Thanks