jQuery WBN Datepicker Examples

Simple usage

HTML
<input type="text" 
       id="simple" 
       name="simple"
       class="form-control wbn-datepicker" />
    
JavaScript
$('.wbn-datepicker').datepicker()
    
Output


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


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


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


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

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

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