modify dateInput behaviour with javascript

[micahwilhelm]

Hi everyone,
I'd like to modify the dateInput hover behaviour so that an entire week is highlighted. When a week is selected I would like it to output the date range of that week or perhaps the ISO 8601 week number and year.
The closest thing I could come up with would be to make a customised input directly from bootstrap-datepicker. So I've tried to implement these recommendations found on stackoverflow, in R. However, it results in an unresponsive field with the following console error below. Any ideas?

weeklyDatePicker.js:5
Uncaught TypeError: $(...).datepicker is not a function
at HTMLDocument. (weeklyDatePicker.js:5)
at HTMLDocument.dispatch (jquery.min.js:2)
at HTMLDocument.v.handle (jquery.min.js:2)
at Object.trigger (jquery.min.js:2)
at HTMLDocument. (jquery.min.js:2)
at Function.each (jquery.min.js:2)
at k.fn.init.each (jquery.min.js:2)
at k.fn.init.trigger (jquery.min.js:2)
at WebSocket.c.onopen (shinyapp.js:94)

app.R

library(shiny)


ui <- fluidPage(
tags$head(
    tags$script(type="text/javascript", src = "weeklyDatePicker.js"),
    tags$link(rel="stylesheet", type="text/css", href="weeklyDatePicker.css")
  ),
        HTML("<div class='container'>
               <div class='row'>
               <div class='col-sm-6 form-group'>
               <div class='input-group' id='weeklyDatePickerDiv'>
               <input type='text' id='weeklyDatePicker' placeholder='weeklyDatePicker' />
               </div>
               </div>
               </div>
               </div>")
)

server <- function(input, output, session) {}

www/weeklyDatePicker.js

// Make sure the Shiny connection is established
$(document).on('shiny:connected', function(event) {

  //Initialize the datePicker(I have taken format as mm-dd-yyyy, you can     //have your owh)
  $("#weeklyDatePicker").datepicker({
      format: 'YYYY-MM-DD'
  });

   //Get the value of Start and End of Week
  $('#weeklyDatePicker').on('dp.change', function (e) {
        Shiny.unbindAll();
      var value = $("#weeklyDatePicker").val();
      var firstDate = moment(value, "YYYY-MM-DD").day(0).format("YYYY-MM-DD");
      var lastDate =  moment(value, "YYYY-MM-DD").day(6).format("YYYY-MM-DD");
      $("#weeklyDatePicker").val(firstDate + " - " + lastDate);
            Shiny.bindAll();
  });
});

www/weeklyDatePicker.css

.bootstrap-datetimepicker-widget .datepicker-days table tbody tr:hover {
    background-color: #eee;
}

[matthista]

Micah, I found a basic solution for shiny without having to integrate javascript and/or specific tags. Please see shiny app here: https://github.com/datamat/Weekpicker

works:

• greying of weeks in datepicker
• display of week numbers on the left hand side of the calendar of datepicker
• display of week number on the right (kind of workaround)
• if you need the dates to be displayed differently, let me know
• if you need the week to be marked blue instead of the chosen date, let me know

Cheers and stay safe, Matthias