如何使用与Firefox兼容的JS生成新的输入类型日期？(How to generate a new input type date with JS which are compatible with

如何使用与Firefox兼容的JS生成新的输入类型日期？(How to generate a new input type date with JS which are compatible with Firefox?)

我使用此代码编写了与Firefox兼容的代码

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

但是我添加了下面的代码，每当用户点击按钮时添加新的输入类型=“日期”。

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

当用户点击该按钮时，浏览器会生成新类型为“Date”的盒子，这些盒子与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> 
  
 
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> 
  
 

                
最满意答案
                
                    
                        
 Firefox 目前还不支持HTML5 。 
 
 你应该调用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> 
  
 
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>