WBN Datepicker

Simple usage

HTML

<input type="text" 
       id="simple" 
       name="simple"
       class="form-control wbn-datepicker" />
    

JavaScript

$('.wbn-datepicker').datepicker()
    

Output

Simple

---

Default value

Use the value attribute

HTML

<input type="text" 
       id="value-specified" 
       name="value_specified"
       class="form-control wbn-datepicker"
       value="2017-03-26" />
    

Output

With default value

---

Setting the value from JavaScript

Use the val() method

HTML

<input type="text" 
       id="value-specified-js" 
       name="value_specified_js"
       class="form-control" />
      

JavaScript (jQuery)

var $datepicker = $('#value-specified-js').datepicker()
$datepicker.val('2017-05-30')
      

Output

With default value

---

With min and max dates

Use the data-min and data-max attributes

HTML

<input type="text" 
       id="value-specified" 
       name="value_specified"
       class="form-control wbn-datepicker"
       data-min="2017-01-15"
       data-max="2017-04-15" />
    

Output

With min and max dates

---

Date Range

Use data-start-src="from-date-id" on end-date datepicker.

HTML

<input type="text" id="start-date"
       name="start_date" 
       class="form-control wbn-datepicker" />
<input type="text" id="end-date" 
       name="end_date"
       class="form-control wbn-datepicker"
       data-start-src="start-date" />
    

Output

Start Date

End date

---

Date range with weekly repeat

Use data-repeat="weekly" data-repeat-day="dayOfWeek" on end-date datepicker.

HTML

<input type="text" id="start-date-repeat"
       name="start_date_repeat" 
       class="form-control wbn-datepicker" />
<input type="text" id="end-date-repeat" 
       name="end_date_repeat"
       class="form-control wbn-datepicker"
       data-start-src="start-date-repeat"
       data-repeat="weekly"
       data-repeat-day="0" />
    

Output

Start Date

End date

Date range with monthly repeat

Use data-repeat="monthly" data-repeat-day="dayOfMonth" on end-date datepicker.

HTML

<input type="text" id="start-date-repeat"
       name="start_date_repeat" 
       class="form-control wbn-datepicker" />
<input type="text" id="end-date-repeat" 
       name="end_date_repeat"
       class="form-control wbn-datepicker"
       data-start-src="start-date-repeat"
       data-repeat="weekly"
       data-repeat-day="0" />
    

Output

Start Date

End date

Date range with fortnightly repeat

Use data-repeat="fortnightly" data-repeat-day="dayOfweek" on end-date datepicker.

HTML

<input type="text" id="start-date-repeat"
       name="start_date_repeat" 
       class="form-control wbn-datepicker" />
<input type="text" id="end-date-repeat" 
       name="end_date_repeat"
       class="form-control wbn-datepicker"
       data-start-src="start-date-repeat"
       data-repeat="weekly"
       data-repeat-day="0" />
    

Output

Start Date

End date