JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment-with-locales.min.js"></script>
<div class="btn-group">
  <div class="btn"><i class="fa fa-arrow-left"></i></div>
  <div class="btn dpick dropdown-toggle" data-toggle="dropdown"><span>Week </span><span class="search-week-number">27</span></div>
  <div class="btn"><i class="fa fa-arrow-right"></i></div>
  <div class="dropdown-menu dropdown-menu-right">
    <div class="search-week-selection" id="dp-drop">
      <div>

      </div>
    </div>
  </div>
</div>

CSS

.datepicker td, .datepicker th{
  border:0;
  border-radius:0;
}
.datepicker .cw,
.datepicker .dow{
  font-size:0.5rem;
  color:#b7bec6
}

.datepicker-days tr:hover{
  background-color:#cdfcd0;
}

JavaScript 1.7

$(function() {
    var $weekPicker = $("#dp-drop");
    $weekPicker.datepicker({
        calendarWeeks: true,
        maxViewMode: 0,
        weekStart: 1
    }).on('changeDate', function (e) {
    
        if ($weekPicker.data('updating') === true) {
            return;
        }
        $weekPicker.data('updating', true);

        var monday = moment(e.date).startOf('isoWeek');
			  var weeknumber = moment(monday).isoWeek();
        var weekDates = [
            monday.clone().toDate(),
            monday.clone().add(1, "days").toDate(),
            monday.clone().add(2, "days").toDate(),
            monday.clone().add(3, "days").toDate(),
            monday.clone().add(4, "days").toDate(),
            monday.clone().add(5, "days").toDate(),
            monday.clone().add(6, "days").toDate()
        ];

        $(this).datepicker('clearDate').datepicker('setDates', weekDates);
        $('.search-week-number').text(weeknumber);

        $weekPicker.data('updating', false);
    });


});





/* =========================================================
 * bootstrap-datepicker.js
 * Repo: https://github.com/uxsolutions/bootstrap-datepicker/
 * Demo: https://uxsolutions.github.io/bootstrap-datepicker/
 * Docs: https://bootstrap-datepicker.readthedocs.org/
 * =========================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================= */

(function(factory){
    if (typeof define ===...