1.0.0 • Published 5 years ago

bootstrap-datepicker-plugin v1.0.0

Weekly downloads
4
License
MIT
Repository
github
Last release
5 years ago

Bootstrap DatePicker

Date and time picker plugin for Bootstrap framework

Installation

$ npm install bootstrap-datepicker-plugin
$ bower install bootstrap-datepicker-plugin
$ yarn add bootstrap-datepicker-plugin
$ composer require bootstrap-datepicker-plugin

Usage example

For example use the input-group:

<div class="form-group">
    <label class="control-label">Datetime:</label>
    <div id="datepicker" class="input-group">
        <input type="text" class="form-control" name="some-datetime" value="2019-01-21 22:06:54">
        <span class="input-group-btn">
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
            </button>
        </span>
    </div>
</div>

... and init from script:

<script type="text/javascript">
    $(document).ready(function () {
        $('#datepicker').datepicker({
            format: 'YYYY/MM/DD',
            ...
        });
    });
</script>

Options

NameTypeDefaultDescription
formatstring'DD/MM/YYYY'Default format of date/time.
classNamestring'.datepicker'Class name of input group.
inputstring'.form-control'Selector or jQuery object of input.
togglestring'.input-group-btn > button'Selector of datepicker popover toggle.
placementstring'auto'Default placement of popover.
templatestring<div class="popover popover-datepicker" role="tooltip"...></div>Popover template.
daysStringsarray{'short': 'Mon', 'full': 'Monday'}, ...Days of week, starting on Monday.
monthsStringsarray{'short': 'Jan', 'full': 'January'}, ...Months, starting on January.
debugbooleanfalseFlag if need debug in console log.

Support formats

Format
DD/MM/YYYY HH/mm/ss
DD/MM/YYYY HH:mm:ss
DD.MM.YYYY HH/mm/ss
DD.MM.YYYY HH:mm:ss
DD-MM-YYYY HH/mm/ss
DD-MM-YYYY HH:mm:ss
YYYY/MM/DD HH/mm/ss
YYYY/MM/DD HH:mm:ss
YYYY.MM.DD HH/mm/ss
YYYY.MM.DD HH:mm:ss
YYYY-MM-DD HH/mm/ss
YYYY-MM-DD HH:mm:ss
MM/DD/YYYY HH:mm:ss
DD/MM/YYYY
DD.MM.YYYY
DD-MM-YYYY
YYYY/MM/DD
YYYY.MM.DD
YYYY-MM-DD
MM/DD/YYYY
HH/mm/ss
HH:mm:ss

Methods

NameTypeDescription
onShowfunctionThe function that is called when the datepicker popover is ready to be displayed.
onShownfunctionThe function that is called when the datepicker popover is displayed.
onHidefunctionThe function that is called when datepicker popover to prepare for hiding.
onHiddenfunctionThe function that is called when the datepicker popover is hidden.
onGetPrevfunctionThe function that is called when you select the previous month or year.
onGetNextfunctionThe function that is called when you select the next month or year.
onSetValuefunctionThe function that is called when the date is selected. Sets new date value to input.

Status and version

  • v.1.1.0 - Plugin in progress development