122

I'm using Bootstrap V4 for my new website seeing that it is in Alpha.

However I cannot see that it has datepicker.js in its build.

Does anyone know if this will be included in V4? If not can anyone recommend a good datepicker?

ottz0
  • 2,595
  • 7
  • 25
  • 45
  • 6
    For those that end up here: https://tempusdominus.github.io/bootstrap-4/ – MastaBaba Oct 22 '18 at 23:06
  • Just ensure you have cal.gif or/and cal-grey.gif file available in Project\Content\themes\base\images\media\ datepicker.js working fine for me with Bootstrap4 – raju1208 Jan 30 '19 at 15:24
  • **Bootstrap 4** - The datepicker plugin that supports Bootstrap 4 is https://codeply.com/p/kS0t1Ko61K also see: https://stackoverflow.com/questions/43046792/ – Carol Skelly Nov 19 '19 at 17:38
  • datepickers mentioned in the comments do not show the calendar when clicking on input. this one does https://gijgo.com/datepicker/example/bootstrap-4 – GorvGoyl Mar 28 '20 at 17:55

3 Answers3

60

Maybe you want to try this: https://bootstrap-datepicker.readthedocs.org/en/latest/index.html

It's a flexible datepicker widget in the Bootstrap style.

Andrey Saleba
  • 2,167
  • 4
  • 20
  • 27
  • 6
    Could you post your working CSS? The datepicker itself works with bootstrap 4 but it is unstyled. – RAC Apr 18 '17 at 23:50
  • 5
    @RAC Update, as of today it looks like there are some (unstable) releases of this that worked with Bootstrap 4 very well for me https://cdnjs.com/libraries/bootstrap-datepicker/1.7.0-RC3 – Brian Leishman Jun 07 '17 at 20:57
  • There is a "today" button, but I'm not seeing a time selector @EricMilliot-Martinez https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn – KSib Mar 27 '18 at 16:42
52

You can use this and then you can add just a class form from bootstrap. (does not matter which version)

<div class="form-group">
 <label >Begin voorverkoop periode</label>
 <input type="date" name="bday" max="3000-12-31" 
        min="1000-01-01" class="form-control">
</div>
<div class="form-group">
 <label >Einde voorverkoop periode</label>
 <input type="date" name="bday" min="1000-01-01"
        max="3000-12-31" class="form-control">
</div>
Philipp Maurer
  • 2,480
  • 6
  • 18
  • 25
sadeq alshaar
  • 673
  • 5
  • 8
  • 49
    this is not a bootstrap control but the browsers datepicker (html5 date input, it is not available in every browser! see https://caniuse.com/#feat=input-datetime) – cyptus Mar 19 '18 at 11:44
  • 4
    Will not work on safari and IE 11 or earlier – amar Jul 17 '19 at 07:24
  • The very reason I'm looking for a boostrap4 datepicker is because I have ` – Bill Naylor Nov 22 '19 at 16:57
  • I did find a maven dependency: ` org.webjars.bowergithub.pingcheng bootstrap4-datetimepicker 4.17.45 ` which I hope will do what I want, just have to find out how to use it now! – Bill Naylor Nov 22 '19 at 17:00
  • This does not bind the value from ASP.NET MVC. Do i need to pass set the value manually in JS? – Ali123 Jul 05 '20 at 10:12
8

Most of bootstrap datepickers as I write this answer are rather buggy when included in Bootstrap 4. In my view the least code adding solution is a jQuery plugin. I used this one https://plugins.jquery.com/datetimepicker/ - you can see its usage here: https://xdsoft.net/jqplugins/datetimepicker/ It sure is not as smooth as the whole BS interface, but it only requires its css and js files along with jQuery which is already included in bootstrap.

Slinky Sloth
  • 301
  • 2
  • 5