CODEWITHSUNDEEP
htmltwitter-bootstrapdatepicker
Panayiotis Spanos
Panayiotis Spanos

Reputation: 155

bootstrap input type="date" not loading datepicker

I'm trying to use bootstrap input type 'date' to create an input field with a date picker but while the formatting for the input field appears to have been set by bootstrap's styling, it doesn't appear that the date picker is being implemented in that field. when clicking into the field noting comes up and my typing is unrestricted. Does this input type of date not natively create an input field with a type of date and make the input field a date picker? JSBIN Code Here My console shows no errors.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>JS Bin</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <form>
      <div class="form-group">
        <div class="row">
          <div class="col-md-4 box">
            <label>Date</label>
            <input type="date" class="form-control" placeholder="Date">
          </div>
        </div>
      </div>
    </form>

if someone could explain why it's not working I would appreciate it.

Upvotes: 3

Views: 13271

Answers (2)

m0g
m0g

Reputation: 969

Firefox and IE at the moment do no support date type.

I found an easy fix for this thanks to the webshim library. I simply had to add the following line of code and everything worked fine. Note: webshim library depends on JQuery.

<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
    webshims.setOptions('forms-ext', {types: 'date'});
    webshims.polyfill('forms forms-ext');
</script>

Upvotes: 0

davidelrizzo
davidelrizzo

Reputation: 733

The native <input type="date"> only works in a few browsers. IE is not one of them, although it does now work in Edge. See the support table here: http://caniuse.com/#feat=input-datetime

You will need to use a polyfill library or datepicker JS plugin to get it to work everywhere. I recommend checking out Webshim: https://afarkas.github.io/webshim/demos/#Forms-forms-ext

Upvotes: 2

Related Questions