modify dateInput behaviour with javascript

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? :hugs:

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)



ui <- fluidPage(
    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' />

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


// 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)
      format: 'YYYY-MM-DD'

   //Get the value of Start and End of Week
  $('#weeklyDatePicker').on('dp.change', function (e) {
      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);


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

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


  • 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

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.