jquery datepicker fallback

Question

I'm trying to create a fallback to jquery for all those users with browsers that does not support html5 input type=date. I have my input type set as "text" as default, and I'm changing it to type='date' via js when you focus, so I can keep the placeholder when the input field is not focused. Now, I run into a problem when using IE, it happens that IE throws an error at the first line of command (setting input type to 'date') and I'm afraid that it does not read the following code.

I want to: A) If the input type can be set to 'date', then not enabling the jquery datepicker, and instead use the native browser's datepicker. B) If this can not be possible, then enable the jquery datepicker.

I was surfing the forum and other sites for answers, but i can't get them to work.

As I'm a newbie to this, I ask from you all details in explanations possible and patience.

As probably a codepen would be probably better than just pasting the code, I'll provide a codepen with my code:

http://codepen.io/Sourcerer/pen/NGbKXv

And the code, here:

var date = new Date();
var dd = date.getDate();
var year = date.getFullYear();
var mm = date.getMonth() + 1;

if (mm == 12 && dd == 31) mmt = 1, yeart = year + 1;
else if (((mm == 4 || mm == 6 || mm == 9 || mm == 11) && dd == 30) || dd == 31 || mm == 2 && year % 4 == !0 && dd == 28 || mm == 2 && dd == 29)
  ddt = 1, mmt = mm + 1;
else(ddt = dd + 1, mmt = mm, yeart = year);
if (mm < 10)
  month = '0' + mm;
else(month = mm)

if (dd < 10)
  day = '0' + dd;
else(day = dd);

if (mmt < 10)
  montht = '0' + mmt;
else(montht = mmt)

if (ddt < 10)
  dayt = '0' + ddt;
else(dayt = ddt);

var today = year + "-" + month + "-" + day;
var tomorrow = yeart + "-" + montht + "-" + dayt;

function changeInputTypeEn() {
  document.getElementById('entrada').type = 'date';
  document.getElementById('entrada').min = today;
}

function changeInputTypeBackEn() {
  if (document.getElementById('entrada').value == '')
    document.getElementById('entrada').type = 'text';
  else
    document.getElementById('entrada').type = 'date';
  var t = document.getElementById('entrada').value;
  var ed = Number(+t.slice(8, 10));
  var em = Number(+t.slice(5, 7));
  var ey = Number(+t.slice(0, 4));

  if (em == 12 && ed == 31) lm = 1, leavingYear = ey + 1;
  else if (((em == 4 || em == 6 || em == 9 || em == 11) && ed == 30) || ed == 31 || em == 2 && ey % 4 == !0 && ed == 28 || em == 2 && ed == 29)
    ld = 1, lm = em + 1;
  else(ld = ed + 1, lm = em, leavingYear = ey);

  if (ld < 10)
    leavingDay = '0' + ld;
  else(leavingDay = ld);

  if (lm < 10)
    leavingMonth = '0' + lm;
  else(leavingMonth = lm);

  leavingDate = leavingYear + "-" + leavingMonth + "-" + leavingDay;
}

function changeInputTypeSa() {
  document.getElementById('salida').type = 'date';
  if (document.getElementById('entrada').value !== '')
    document.getElementById('salida').min = leavingDate;
  else(document.getElementById('salida').min = tomorrow);
}

function changeInputTypeBackSa() {
  if (document.getElementById('salida').value == '')
    document.getElementById('salida').type = 'text';
  else
    document.getElementById('salida').type = 'date';
}

table#form {
  width: 100%;
  position: absolute;
  top: 0px;
}
tr {
  width: 100%;
  height: 75px;
}
tr#text {
  height: 100px;
}
form#consultas input.input-text {
  font-size: 16px;
  padding: 4px 5px;
  background-color: rgb(246, 247, 240);
  z-index: 1;
  border: solid 1px rgb(204, 204, 204);
  -webkit-border-radius: 0px 5px 5px 0px;
  width: 180px;
  position: absolute;
  left: 42px;
  height: 30px;
}
label.inside {
  position: absolute;
  left: 5px;
  width: 200px;
  color: rgb(94, 94, 94);
  -webkit-transition: all ease-out 400ms;
  -ms-transition: all ease-out 400ms;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Roboto, Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
}
label.en {
  top: 32px;
  opacity: 0;
}
label.s {
  top: 32px;
  left: 687px;
  opacity: 0;
}
input#entrada:focus + label.en {
  opacity: 1;
  -webkit-transform: translate3d(0px, -25px, 0px);
  -ms-transform: translate3d(0px, -25px, 0px);
}
input#salida:focus + label.s {
  opacity: 1;
  -webkit-transform: translate3d(0px, -25px, 0px);
  -ms-transform: translate3d(0px, -25px, 0px);
}

<table id=form>
  <tr>
    <td>
      <input class="input-text" name="entrada" id="entrada" type="text" placeholder="Arrive (DD/MM/AAAA)" onfocus="changeInputTypeEn();" onblur="changeInputTypeBackEn();" required="" />
      <label for="entrada" class="inside en">Arriving date</label>
    </td>
    <td>
      <input class="salida" name="salida" id="salida" type="text" placeholder="Leave (DD/MM/AAAA)" onfocus="changeInputTypeSa();" onblur="changeInputTypeBackSa();" required="" />
      <label for="salida" class="inside s">Leaving date</label>
    </td>
  </tr>
</table>

You'll also find a piece of code regarding to selecting mindate = today for arriving and mindate=tomorrow for leaving. Please ignore that, as it was easier to simply paste the whole code.

EDIT: I realised that the code was not clear.. Maybe i should start telling what i have tried before:

function changeInputTypeEn() {
    document.getElementById('entrada').type = 'date';
  if (document.getElementById('entrada').type =='date')
    document.getElementById('entrada').min = today;
  else ($('entrada').datepicker())
}

As the idea was to ask the browser if could change the type to date, and if it not, launch the datepicker.

After that not working, i tried to use modernizr, (which i downloaded and called for in a in the head section, and this piece of code:

function changeInputTypeEn() {
    if (!Modernizr.touch || !Modernizr.inputtypes.date) {
        $('input[type=text]')
            .attr('type', 'text')
            .datepicker({
                // Consistent format with the HTML5 picker
                dateFormat: 'yy-mm-dd'
            });
    }
    document.getElementById('entrada').type = 'date';
    document.getElementById('entrada').min = today;
}

Which works, but problem is that triggers both the native and the jquery datepicker in supporting browsers. Is there any ideas on how to launch the jquery some milliseconds after the focus has happened, so browsers that has already changed the input type to "date" does not trigger the jquery?

I apologise for my english in advance.. i wanted to ask politely to as many details as possible as i'm not solid at all in javascript.. Thanks again!

Answer 1

I want to: A) If the input type can be set to 'date', then not enabling the jquery datepicker, and instead use the native browser's datepicker. B) If this can not be possible, then enable the jquery datepicker.

Maybe i should start telling what i have tried before..

You are on the right track. Just check if the type of the input is text, only then attach the datepicker. Otherwise, it means the browser supports the HTML5 date type and automatically becomes a fallback.

Here is a quick and dirty example (explanation in code comments):

var dtType, $inputs = $('input');

$inputs.each(function() {
    /*
    We check the type of each element.
    If the browser supports html5 date type, then it will return "date".
    If browser doesn't support, it will default to "text" type.
    */
    dtType = this.type;
    if (dtType == "text") {
        $(this).datepicker(); // Attach datepicker only if type is "text"
    }    
});

Fiddle: http://jsfiddle.net/abhitalks/tmxxembf/2/