Jquery:在IE和FF上具有多个添加日期的日期选择器

Jquery :Date Picker with multi add date on IE and FF

本文关键字：日期 添加 选择器 IE FF Jquery      更新时间：2023-09-26

我创建了一个带有多日期选择器的表单。

我遇到了一个问题，日期选择器不适用于firefox和IE（仅适用于chrome）。

所以我用https://bootstrap-datepicker.readthedocs.org/en/latest/

它在IE和FF上运行得很好，但我有另一个问题。当我点击它时，我有一个"添加日期"按钮，新日期没有日期选择器。

这是我的代码：

        <div class="form-group">            
        <label class="col-md-4 control-label" for="dispo">Action :</label>
        <div class="row">
            <div class="col-md-4">
                <input type="button" value="Add date" onClick="addRow('dataTable')" class="btn btn-success"/> 
                <input type="button" value="Delete date" onClick="deleteRow('dataTable')" class="btn btn-danger" /> 
            </div>
        </div>
    </div>
    <!-- Dates -->
    <div class="form-group">
        <label class="col-md-4 control-label" for="table">Date :</label>
        <div class="col-md-4">
            <table id="dataTable" class="form"  border="0">
                <tbody>
                    <tr>    
                        <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
                        <td>
                            <input type="date" required="required" name="BX_DATE[]" id="test" class="form-control input-md" min="2015-10-07">
                        </td>
                        <td>
                        <!-- Heures -->
                            <label>from</label>
                        </td>
                        <td>
                            <select class="form-control input-md" name="BX_HOURBEGIN[]" id="BX_HOURBEGIN[]">
                                <option value="08:00">08:00</option><option value="09:00">09:00</option><option value="10:00">10:00</option><option value="11:00">11:00</option><option value="12:00">12:00</option><option value="13:00">13:00</option><option value="14:00">14:00</option><option value="15:00">15:00</option><option value="16:00">16:00</option><option value="17:00">17:00</option><option value="18:00">18:00</option><option value="19:00">19:00</option><option value="20:00">20:00</option><option value="21:00">21:00</option><option value="22:00">22:00</option><option value="23:00">23:00</option>    
                            </select>                               
                        </td>
                        <td>
                            <label>to</label>
                        </td>
                        <td>
                            <select class="form-control input-md" name="BX_HOUREND[]" id="BX_HOUREND[]">
                                <option value="08:00">08:00</option><option value="09:00">09:00</option><option value="10:00">10:00</option><option value="11:00">11:00</option><option value="12:00">12:00</option><option value="13:00">13:00</option><option value="14:00">14:00</option><option value="15:00">15:00</option><option value="16:00">16:00</option><option value="17:00">17:00</option><option value="18:00">18:00</option><option value="19:00">19:00</option><option value="20:00">20:00</option><option value="21:00">21:00</option><option value="22:00">22:00</option><option value="23:00">23:00</option>    
                            </select> 
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

和javascript

       <script>
       if ( $('#test')[0].type != 'date' ) $('#test').datepicker();
       </script>

这里有一个演示链接：http://lestortues.ninja/test/

在InternetExplorer/FFirefox上试试，当你添加多个日期时，日期选择器不起作用。

我试图在我的添加按钮上添加一个函数来重新加载javascript，但它不起作用。。。

你有主意吗？

谢谢！

如果它能帮助别人，我自己找到了：

`$('#cmd').click(function(){
$('#content').append('<br>a datepicker <input         class="datepicker_recurring_start"/>');
});
$('body').on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});`

http://jsfiddle.net/SJ7bJ/98/

相关文章：