A datepicker for twitter bootstrap (@twbs)

  • By UX Solutions
  • Last update: Dec 29, 2022
  • Comments: 16

bootstrap-datepicker

Join the chat at https://gitter.im/uxsolutions/bootstrap-datepicker Build Status GitHub license npm Twitter Follow

Versions are incremented according to semver.

CDN

You can use the CloudFlare powered cdnjs.com on your website.

bootstrap-datepicker on cdnjs

Please note: It might take a few hours until a new version is available on cdnjs.

Links

Snippets

Development

Once you cloned the repo, you'll need to install grunt and the development dependencies using a package manager:

  • yarn (recommended):
$ [sudo] yarn global add grunt-cli
$ yarn install
$ [sudo] npm install --global grunt-cli
$ npm install

Github

https://github.com/uxsolutions/bootstrap-datepicker

Comments(16)

  • 1

    Support Boostrap 3.x

    Yo, thank you for this repo! I've forked and added a 3.x branch that supports the upcoming bootstrap 3.x release.

    If you'd like to create a bootstrap-3.x branch on your repo I'll submit a pull request.

    Code is here: https://github.com/ianserlin/bootstrap-datepicker/tree/3.x

  • 2

    AutoClose not working

    Hi, i use the autoclose method but this not working in Chrome: js:

            $(document).ready(function () {                                  
                $('.datepicker').datepicker({
                    format: "dd/mm/yyyy",
                    autoclose: true
                });
    
            });        
    

    html:

    <input class="datepicker valid" data-val="true" data-val-date="El campo Vencimiento debe ser una fecha." id="FirstMaturiy" name="FirstMaturiy" readonly="readonly" type="text" value="">
    

    Thanks for your help.

  • 3

    Sometimes passing the months the "weeks" just got bugged

    Hello, I seeing you showcase, and got very interested. Congratulations, its just amazing!

    But, I found a bug. With Chromium 18 (not tested in other browsers), open the first datepicker of your example and passing the months by clicking in the arrow, I randomly got this:

    Bug

    I interested in add you component to a GWT port of bootstrap, do you accept that? You can see the related issue in our project (https://github.com/gwtbootstrap/gwt-bootstrap/issues/60) and the project itself here: https://github.com/gwtbootstrap/.

    Again, nice work, congratulations!

  • 4

    Datepicker inside a modal window causes modal to close

    I've got a couple of datepicker input fields inside a form that is displayed within a Bootstrap modal window. When I select a date using the datepicker the modal window closes.

    This is happening due to the trigger that gets executed on line 146:

    https://github.com/eternicode/bootstrap-datepicker/blob/fd9eb6bb7e9a9785f960b3ff98aac105df5e3d32/js/bootstrap-datepicker.js#L146

    When I comment out that trigger the datepicker still works fine.

    Any thoughts as to what that trigger is for and how to make it work nice inside a modal window?

    Scott

  • 5

    disable toggle?

    i'm using bootstrap-datepicker and get into trouble.

    when i click a day, it works well,but when i click the same day again. the select was canceled....

    the online demo http://eternicode.github.io/bootstrap-datepicker/ works well. click again same day will keep the selection.......

    i have read the docs and can't find anyway to disable toggle......

  • 6

    DatePicker on modal not displaying

    Hello,

    I am using your datepicker with a bootstrap modal and I cannot get the calendar to display. I looked at issue #325 and applied the 2 lines that were changed. Prior to applying the lines nothing would happen in the modal for those elements i want to have datepicker displayed. After I applied the 2 line changes I am guessing the datepicker must be displaying off the modal some place as the modal applies both vertical and horizontal scrolls.

    I did download the latest version but still have the same issue. Anyone have a fix for this by chance?

    Thanks.

    prior to 2 applying the 2 lines in issue 325: image

    after applying and trying to active datepicker: image

  • 7

    Broken against jQuery 3

    Expected behaviour

    Contents of picker widget e.g. days of the month should be displayed.

    Actual behaviour

    Picker opens but contents are not displayed

    Datepicker version used

    1.6.1 Broken against jQuery 3.0.0 and 3.1.0

    Example code

    http://jsfiddle.net/4x9wfayw/

  • 8

    RFC: Date ranges

    This is a Request For Comments regarding date ranges in bootstrap-datepicker, and related discussion should preferably happen here.

    Specifically, I'm looking for ideas and opinions on how to display it, what markup to use, what options might be involved, etc.

  • 9

    Datepicker top vertical position

    I have this markup:

    <div class="col-md-7">
        <input id="date-field1" class="form-control date-picker" type="text" name="in-  place-date" value=""  placeholder="Enter Date">
        <span class="help-block">Selects some date</span>
    </div>
    

    So, when i use

    widgetPositioning: {
        vertical: 'top'
    }
    

    the datepicker is positioned not above the input but somewhere below it, after some research i found out that

    widget.css({
        top: vertical === 'top' ? 'auto' : position.top + element.outerHeight(),
        bottom: vertical === 'top' ? position.top + element.outerHeight() : 'auto',
        left: horizontal === 'left' ? parent.css('padding-left') : 'auto',
        right: horizontal === 'left' ? 'auto' : parent.width() - element.outerWidth()
    });
    

    this code could ignore help's block height.

  • 10

    date range

    me again... can i make a date_range[:finish] automagically match the start all the time?

    as it stands, if I pick a date that's after the current date, it picks a corresponding matching date. so date_range[:start] == date_range[:finish] only if i'm picking times in the future. can we make that same action happen for past dates?

  • 11

    Don't set te value on text field

    when i use de date picker it does not set the value that i pick it in the text field, the strange thing is this only hapen inside of a modal, but when i render the page normaly it does work

  • 12

    Show date, time and month in one div

    Expected behaviour

    9Us8F

    Actual behaviour

    it possible to datepicker like the attached image? show date, time and month in one div. I want make as slider

    Datepicker version used

    ex. 1.9.0.

    Example code

    Jsfiddle example to reproduce the problem.

  • 13

    Fix index of `fr-CH` and `it-CH` localizations

    | Q | A | --------------- | --- | Bug fix? | yes | New feature? | no | BC breaks? | | Related tickets | fixes #2264 | License | MIT

  • 14

    Bump qs from 6.4.0 to 6.4.1

    Bumps qs from 6.4.0 to 6.4.1.

    Changelog

    Sourced from qs's changelog.

    6.4.1

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] use safer-buffer instead of Buffer constructor
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 486aa46 v6.4.1
    • 727ef5d [Fix] parse: ignore __proto__ keys (#428)
    • cd1874e [Robustness] stringify: avoid relying on a global undefined (#427)
    • 45e987c [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 90a3bce [meta] fix README.md (#399)
    • 9566d25 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • 74227ef Clean up license text so it’s properly detected as BSD-3-Clause
    • 35dfb22 [actions] backport actions from main
    • 7d4670f [Dev Deps] backport from main
    • 0485440 [Fix] use safer-buffer instead of Buffer constructor
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 15

    warning on dependencies using composer

    I use bootstrap-datepicker in my PHP project using composer using the following command:

    composer require eternicode/bootstrap-datepicker:1.9.0
    

    It works but during installation I encountered the following warning message: Package robloach/component-installer is abandoned, you should avoid using it. Use oomphinc/composer-installers-extender instead.

    Datepicker version used

    ex. 1.9.0.

  • 16

    Update index.rst

    | Q | A | --------------- | --- | Bug fix? | no|yes | New feature? | no|yes | BC breaks? | no|yes | Related tickets | fixes #X, partially #Y, mentioned in #Z | License | MIT