shinyMobile icon indicating copy to clipboard operation
shinyMobile copied to clipboard

f7DatePicker selecting incorrect day based on timezone

Open nathhenry3 opened this issue 2 years ago • 3 comments

Hi there,

I have an issue simiilar to #138. I've uploaded my app to Google Cloud Run using a Dockerfile, and am finding that the date returned by f7DatePicker doesn't match the value on the widget itself. So if I put in 2021-08-02, the actual date it returns (looking at the 'input$x' value) is 2021-08-01, even though the date displayed on the widget is 2021-08-02.

HOWEVER, it appears that this only occurs for users in particular timezones. I'm currently in New Zealand, and am finding that this issue is occurring for the mobile app for NZ based users; however, when I try running the app on a server in the US (i.e. via Browserstack), the date is correctly returned. BUT when I run the app locally on my desktop (in New Zealand), I don't have this issue. So I'm not sure if the issue is at the server end or at the client end.

It's possible that the issue is caused by daylight savings - see this link - but my local server runs fine, so if this were the case, it would have to be the interaction between Cloud Run and mobile somehow.

Here's the code I'm using to calculate client_time and time_zone_offset (based on this link:)

Javascript:


HTML('<input type="text" id="client_time" name="client_time" style="display: none;"> '),
HTML('<input type="text" id="client_time_zone_offset" name="client_time_zone_offset" style="display: none;"> '),

tags$script('
  $(function() {
    var time_now = new Date()
    $("input#client_time").val(time_now.getTime())
    $("input#client_time_zone_offset").val(time_now.getTimezoneOffset())
});')

Shiny: (in server.r)


client_time <<- as.numeric(input$client_time) / 1000 # in s
time_zone_offset <<- as.numeric(input$client_time_zone_offset) * 60 # s from GMT
curr_datetime <<- as_datetime(client_time - time_zone_offset)

Any ideas what the issue could be?

Thanks a lot

nathhenry3 avatar Aug 02 '21 07:08 nathhenry3

I have the same issue. I am based in France, everything works fine locally. But when uploading to shinyapps, the issue arises (deployed app lives here). Screenshots and MRE below. Would greatly appreciate any tip.

server.R

library(shinyMobile)
# tried adding Sys.setenv(TZ='UTC'), to no avail

function(input, output, session) {
  output$date_output = renderUI(HTML(paste(input$date_input)))
}

ui.R

library(shinyMobile)

f7Page(
  f7DatePicker(
    'date_input',
    'Date entered by user:',
    value = NULL,
    maxDate = Sys.Date(), # tried setting to NULL, to no avail
    dateFormat = 'yyyy-mm-dd' # tried changing to 'mm-dd-yyyy' per https://stackoverflow.com/questions/7556591/is-the-javascript-date-object-always-one-day-off/31732581#31732581, to no avail
  ),
  div(style='padding-left:20px;',
    h5('Date recorded by the system:'),
    uiOutput('date_output')
  )
)

= = = = Local (no problem): = = = = image

= = = = Remote (one day discrepancy!): = = = = image

PS. I tried with Shiny's default dateInput and shinyWidgets' airDatePicker. None of them suffer from the issue, but unfortunately, they do not seem to be compatible with shinyMobile in terms of UI.

PPS. I think the solution might lie in this SO answer. Seems to be an issue related to different standards that javascript uses in different situations, and converting to UTC. That would require editing the js part of the R Shiny widget I guess, but I am not literate in javascript...

I would be grateful for any help or tip. Thanks!

Tixierae avatar Mar 24 '22 22:03 Tixierae

Please see remotes::install_github("RinteRface/[email protected]")

DivadNojnarg avatar Mar 26 '22 00:03 DivadNojnarg

Many thanks for the super quick fix, @DivadNojnarg! This is immensely helpful. @nathhenry3 could you please verify that David's latest commit fixed your issue too, and if yes, close the thread? Thanks!

Tixierae avatar Mar 26 '22 14:03 Tixierae