JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div class="form-group col-md-8 col-md-offset-2" id="week-picker-wrapper">
	<label for="week" class="control-label">Select Week</label>
	<div class="input-group">
		<span class="input-group-btn">
			<button type="button" class="btn btn-rm week-prev">&laquo;</button>
		</span>
		<input type="text" class="form-control week-picker" placeholder="Select a Week">
		<span class="input-group-btn">
			<button type="button" class="btn btn-rm week-next">&raquo;</button>
		</span>
	</div>
</div>

CSS

.datepicker table tr td span.active{
    background: #04c!important;
    border-color: #04c!important;
}
.datepicker .datepicker-days tr td.active {
    background: #04c!important;
}
#week-picker-wrapper .datepicker .datepicker-days tr td.active~td, #week-picker-wrapper .datepicker .datepicker-days tr td.active {
    color: #fff;
    background-color: #04c;
    border-radius: 0;
}

#week-picker-wrapper .datepicker .datepicker-days tr:hover td, #week-picker-wrapper .datepicker table tr td.day:hover, #week-picker-wrapper .datepicker table tr td.focused {
    color: #000!important;
    background: #e5e2e3!important;
    border-radius: 0!important;
}

JavaScript

var weekpicker, start_date, end_date;

function set_week_picker(date) {
    start_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
    console.log((new Date(start_date.getTime())).getDate() - 1);
    end_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
    weekpicker.datepicker('update', start_date);
    weekpicker.val((start_date.getMonth() + 1) + '/' + start_date.getDate() + '/' + start_date.getFullYear() + ' - ' + (end_date.getMonth() + 1) + '/' + end_date.getDate() + '/' + end_date.getFullYear());
}
$(document).ready(function() {
    weekpicker = $('.week-picker');
    
    weekpicker.datepicker({
    		weekStart: 1, //주의 시작
        autoclose: true,
        forceParse: false,
        container: '#week-picker-wrapper',
    }).on("changeDate", function(e) {
        set_week_picker(e.date);
    });
    $('.week-prev').on('click', function() {
    		var prev = new Date(start_date.getTime());
        
        prev.setDate(prev.getDate() - 1);
        set_week_picker(prev);
    });
    $('.week-next').on('click', function() {
        var next = new Date(end_date.getTime());
        next.setDate(next.getDate() + 1);
        set_week_picker(next);
    });
    set_week_picker(new Date);
});