WBN Datepicker

Simple usage

HTML

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

JavaScript

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

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

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

Date range

Use the data-start-src="from-date-id" on end-date picker

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

Date range with weekly repeat

Use the 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" /> 

Date range with fortnightly repeat

Use data-repeat="fortnightly" data-repeat-day="dayOfMonth" data-repeat-start="date" on end-date picker

HTML

<input type="text"              id="start-date-fortnightly-repeat"              name="start_date_fortnightly_repeat"              class="form-control wbn-datepicker" /> <input type="text"              id="end-date-fortnightly-repeat"              name="end_date_fortnightly_repeat"              class="form-control wbn-datepicker"              data-start-src="start-date-fortnightly-repeat"              data-repeat="fortnightly"              data-repeat-day="0"              data-repeat-start="2017-04-04" /> 

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

See the sample.html file for interactive examples.