Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
92 lines (69 sloc) 3.39 KB

Weekpicker widget for Bootstrap 4 & Bootstrap 3

View the demo

1. Requirements

  1. Bootstrap 4
  2. Bootstrap 4 Datetimepicker
  3. jQuery
  4. Moment.js
  5. Font Awesome

Important: When using Bootstrap 3 use Bootstrap 3 and Bootstrap 3 Datetimepicker.

2. Setup

  1. 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.

  2. 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>
  1. 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>
  1. 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>
You can’t perform that action at this time.