Weekpicker widget for Bootstrap 4 & Bootstrap 3
1. Requirements
Important: When using Bootstrap 3 use Bootstrap 3 and Bootstrap 3 Datetimepicker.
2. Setup
-
Load the required .css and .js files from CDNs in your HTML document or download all the files and reference them from your project folder.
-
Load the bootstrap-weekpicker.js from src folder of this repository at the end of the HTML document.
Important: When using Bootstrap 3 load related Bootstrap 3 .css and .js files.
<!-- Stylesheets --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/pingcheng/bootstrap4-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- JavaScript --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/pingcheng/bootstrap4-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script> <!-- bootstrap-weekpicker JavaScript --> <script type="text/javascript" src="https://cdn.rawgit.com/trco/bootstrap-weekpicker/master/src/bootstrap-weekpicker.min.js"></script>- Create a container element where you want to generate the week picker.
Bootstrap 4 version
<div class="input-group align-items-center"> <div id="weekpicker1"></div> </div>Bootstrap 3 version
<div> <div id="weekpicker1" style="display: inline-block; padding-left: 8px; padding-right: 8px;"></div> </div>- Initialize the week picker in separate <script> tag after other .js files.
<script type="text/javascript"> $(function() { var weekpicker = $("#weekpicker1").weekpicker(); }); </script>3. Functions
getWeek()
Returns the selected week. Function should be called on weekpicker instance. Example bellow also shows how getWeek() can be tied to change event fired when week is selected.
getYear()
Returns the selected year. Function should be called on weekpicker instance. Example bellow also shows how getYear() can be tied to change event fired when week is selected.
<script type="text/javascript"> $(function() { var weekpicker = $("#weekpicker1").weekpicker(); console.log(weekpicker.getWeek()); console.log(weekpicker.getYear()); var inputField = weekpicker.find("input"); inputField.datetimepicker().on("dp.change", function() { console.log(weekpicker.getWeek()); console.log(weekpicker.getYear()); }) }); </script>
