How to generate a new input type date with JS which are compatible with Firefox?

Question

I wrote a code that are compatible with Firefox by using this code

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>


<div class="col-sm-6 dailydate" id="daily">
    <p class="contact-form-daily">
        <label for="typeofservice-dailydate" class="sr-only">daily<span>*</span></label>
        <input type="date"  aria-required="false" size="30" value="" name="daily-date-#1" id="typeofservice-dailydate" class="form-control" placeholder="daily date">
    </p>
</div>

but I’ve added the code below to add new input type="date" each time the users click on the button.

<span id="responce"></span>

<button class="col-sm-6 btn btn-primary theme_button margin_0 color1" id="add-
button"  onclick="addDate()">Add another Date</button>

<script>
    var countBox =2;
    var boxName = 0;
    function addDate()
    {
        var boxName=countBox; 
        document.getElementById('responce').innerHTML+='<div class="col-sm-6"><p class="contact-form-daily"><label for="typeofservice-dailydate-'+boxName+'" class="sr-only">daily<span>*</span></label><input type="date" class="form-control" aria-required="false" size="30" id="typeofservice-dailydate-'+boxName+'"  value="" name="daily-date-#'+boxName+'" placeholder="Type another date"    /> ';
        countBox += 1;

    }
</script>

The problem when the user click on that button, the browser generates new boxes that are type of ‘Date’ which are non-compliant with Firefox. How can I solve this issue???

webshims.setOptions('waitReady', false);
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');

var countBox =2;
  var boxName = 0;
  function addDate() {
    var boxName=countBox; 
    document.getElementById('responce').innerHTML+='<div class="col-sm-6"><p class="contact-form-daily"><label for="typeofservice-dailydate-'+boxName+'" class="sr-only">daily<span>*</span></label><input type="date" class="form-control" aria-required="false" size="30" id="typeofservice-dailydate-'+boxName+'"  value="" name="daily-date-#'+boxName+'" placeholder="Type another date"    /> ';
    countBox += 1;
                                        
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>

<div class="col-sm-6 dailydate" id="daily">
  <p class="contact-form-daily">
    <label for="typeofservice-dailydate" class="sr-only">daily<span>*</span></label>
    <input type="date"  aria-required="false" size="30" value="" name="daily-date-#1" id="typeofservice-dailydate" class="form-control" placeholder="daily date">
   </p>
</div>

<span id="responce"></span>

<button class="col-sm-6 btn btn-primary theme_button margin_0 color1" id="add-button"  onclick="addDate()">Add another Date</button>

http://stackoverflow.com/questions/37308953/date-input-not-working-in-firefox — Gerard, May 11 '17 at 11:42
@Gerard sorry my friend that is not my question i asked how can i write input type="date" when the user click on the button you can try my code on firefox to understand what i meant exactly — Molham Al Nasr, May 11 '17 at 11:46
@Gerard the new boxes that the browser generate them are non-compliant Knowing that the first input is compliant — Molham Al Nasr, May 11 '17 at 11:48

score 0 · Accepted Answer · edited May 23 '17 at 11:47

Firefox doesn't support HTML5's yet.

you should call appendPolyfill

webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');

  var countBox = 1;
  function addDate() {
    //$('#responce').appendPolyfill('<fieldset><input type="date" /></fieldset>');
   $('#responce').appendPolyfill('<div class="col-sm-6 dailydate" id="daily"><p class="contact-form-daily"><label for="typeofservice-dailydate'+countBox+'"  class="sr-only">daily<span>*</span></label><input type="date"  aria-required="false" size="30" value="" name="daily-date-#'+countBox+'" id="typeofservice-dailydate'+countBox+'" class="form-control" placeholder="daily date"></p></div>');
    countBox += 1;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- cdn for modernizr, if you haven't included it already -->
<script src="https://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="https://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>

<div class="col-sm-6 dailydate" id="daily">
  <p class="contact-form-daily">
    <label for="typeofservice-dailydate" class="sr-only">daily<span>*</span></label>
    <input type="date"  aria-required="false" size="30" value="" name="daily-date-#1" id="typeofservice-dailydate" class="form-control" placeholder="daily date">
   </p>
</div>

<span id="responce"></span>

<button class="col-sm-6 btn btn-primary theme_button margin_0 color1" id="add-button"  onclick="addDate()">Add another Date</button>

How to generate a new input type date with JS which are compatible with Firefox?

1 Answers1