如何在2個不同的輸入字段上調用相同的日期選擇器

Question

我正在使用Bootstrap Datepicker ，但我需要在輸入字段中調用datepicker 2次或更多次，但問題是，datepicker在第一個輸入的字段上打開，但在其余輸入上則不會打開。 我嘗試更改輸入的ID和datepicker腳本，但仍然無法正常工作。 請幫忙。 提前Thx

碼：

<div class='form-group'>                                    
    <div class='row'>
        <div class="col-xs-12 date">
            <label>Label1</label>
            <div class="input-group input-append date" id="dateRangePicker">
                    <input id='input' type="text" value=' <?php echo $var; ?>' 
                    class="form-control" name="dateRangePicker" required />
                    <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
            </div><!-- end input group -->
        </div><!-- end col-xs-12 date --> 
    </div><!-- end row -->  

        <input type='checkbox'>
        <label>Data not available</label>
        </div><!-- end form-group -->

        <div class='form-group'>
            <label>Label2</label>
            <input id='input' type='text' class='form-control' value=' <?php echo $var;  ?>' name="dateRangePicker2" id="dateRangePicker2">


</div><!-- end form-group -->

腳本
注意：我復制了下面的代碼，同時將id從dateRangePicker更改為dateRangePicker2，但仍然無法使用。

$(document).ready(function() {

    $('#dateRangePicker')
        .datepicker({
            format: 'dd.mm.yyyy',
            startDate: '01.01.2000',
            endDate: '31.12.2020'
        })
        .on('changeDate', function(e) {
            // Revalidate the date field
            $('#dateRangeForm').formValidation('revalidateField', 'date');
        });

    $('#dateRangeForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            date: {
                validators: {
                    notEmpty: {
                        message: 'Message1'
                    },
                    date: {
                        format: 'dd.mm.yyyy',
                        min: '01.01.2000',
                        max: '31.12.2020',
                        message: 'Message2'
                    }
                }
            }
        }
    });


}); 

Answer 1

HTML中有兩個問題。 您正在使用屬性ID兩次。 id =“ input”和另外一個id。 在下面

  <input id='input' type='text' class='form-control' value=' <?php echo $var; ?>' name="dateRangePicker2" id="dateRangePicker2"> 

嘗試以下代碼

 $(document).ready(function() { $('#inputOne,#inputTwo') .datepicker({ format: 'dd.mm.yyyy', startDate: '01.01.2000', endDate: '31.12.2020', orientation: "top auto" }) .on('changeDate', function(e) { // Revalidate the date field $('#dateRangeForm').formValidation('revalidateField', 'date'); }); }); 

 <div class='row'> <div class="col-xs-12 date"> <label>Label1</label> <div class="input-group input-append date" id="dateRangePicker"> <input id='inputOne' type="text" class="form-control dateRangePicker2" name="dateRangePicker" required /> <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> </div><!-- end input group --> </div><!-- end col-xs-12 date --> </div><!-- end row --> <div class='row'> <div class="col-xs-12 date"> <label>Label1</label> <div class="input-group input-append date" id="dateRangePicker"> <input id='inputTwo' type="text" class="form-control dateRangePicker2" name="dateRangePicker" required /> <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> </div><!-- end input group --> </div><!-- end col-xs-12 date --> </div><!-- end row --> 

工作小提琴http://jsfiddle.net/anandgh/ajjLyd57/

Answer 2

您可以使用如下class而非ID類：

 $('.dateRangePicker')...