AirDatepickerInput: Сhanging the date from the keyboard in the input does not update the calendar

[SerhEL]

I managed to come up with two ways to solve this problem using javascript. Both examples are similar to each other. Does anyone know a better way to solve the problem?
First:

library(shiny)
library(shinyWidgets)

jsDateChange <- shiny::tags$script("
  // It will work as soon as the browser loads HTML and builds a DOM tree.
  document.addEventListener('DOMContentLoaded', function(){
    
    // Changing the date at the input in 'idDate'
    $('#idDate').on('change', function() {
      
      // Check in the console
      console.log('Changed date: ' + $('#idDate').val());
        
      // Passing the new value to 'jsDateChange'
      Shiny.onInputChange('jsDateChange', $('#idDate').val());
    });

  });
")

ui <- fluidPage(
  # Adding js
  jsDateChange,
  
  airDatepickerInput(
    inputId     = 'idDate',
    label       = 'Select date:',
    clearButton = TRUE
  ),
  
  verbatimTextOutput("resDate")
  
)
  
server <- function(input, output, session) {
  # Observing the new value in jsDateChange
  observeEvent(input$jsDateChange, {
    x <- input$jsDateChange
    if (!is.null(x)) {
      updateAirDateInput(session, 'idDate', value = x)
    }
    
    output$resDate <- renderPrint(input$idDate)
  })
  
}

shinyApp(ui, server)

Second (with update_on = 'close'):

library(shiny)
library(shinyWidgets)

jsDateChange <- shiny::tags$script("
  // It will work as soon as the browser loads HTML and builds a DOM tree.
  document.addEventListener('DOMContentLoaded', function(){
    
    // Changing the date at the input in 'idDate'
    $('#idDate').on('change', function() {
      
      // Check in the console
      console.log('Changed date: ' + $('#idDate').val());
        
      // Passing the new value to 'jsDateChange'
      Shiny.onInputChange('jsDateChange', $('#idDate').val());
    });

  });
")

ui <- fluidPage(
  # Adding js
  jsDateChange,
  airDatepickerInput(
    inputId     = 'idDate',
    label       = 'Select date:',
    clearButton = TRUE,
    update_on = 'close'
  ),
  
  verbatimTextOutput("resDate")
  
)

server <- function(input, output, session) {
  
  observeEvent(input$idDate, {
    output$resDate <- renderPrint(input$idDate)
  })
  
  observeEvent(input$jsDateChange, {
    output$resDate <- renderPrint(input$jsDateChange)
  })
  
}

shinyApp(ui, server)

[Aariq]

The only way I've "solved" this is by making my own version of the function where you can't edit the date manually. I didn't come up with this, but I can't remember where I got it from.

myAirDatepickerInput <- function(...) {
  air <- airDatepickerInput(...)
  # Modify HTML tags with {htmltools}
  # more docs here: https://rstudio.github.io/htmltools/articles/tagQuery.html
  tagQ <- tagQuery(air)
  air <- tagQ$
    find("input")$
    addAttrs("readonly" = NA)$ # make the input read-only
    allTags()
  tagList(
    # Change input background color in read-only mode, otherwise it'll be grey
    tags$style(".form-control[readonly] {background-color: #fff;}"),
    air
  )
}