Skip to content
jQuery datepicker plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
scripts
scss
static
.gitignore
LICENSE
README.md
package.json
sample.html

README.md

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.

You can’t perform that action at this time.