Firefoxと互換性のあるJSで新しい入力タイプの日付を生成するには？

Question

私はこのコード

<!-- 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> 

を使用して、Firefoxで互換性のあるコードを書いたが、私は新しい入力タイプ=「日付」を、ユーザーがボタンをクリックするたびに追加するには、以下のコードを追加しました。

<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> 

問題は、ユーザーがそのボタンをクリックすると、Firefoxに準拠していない「日付」タイプの新しいボックスを生成することです。 この問題を解決するにはどうすればよいですか？まだ

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>

Answer 1

Firefoxのdoesn't support HTML5's。

あなたがいることを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>