如何在2个不同的输入字段上调用相同的日期选择器

I'm using Bootstrap Datepicker and I have a situation where I need to call the datepicker in the input field 2 or more times,but the problem is that,the datepicker opens on the first input filed,but on the rest it won't. I tried changing the ID of the input and the datepicker script,still won't work. Please help. Thx in advance

我正在使用Bootstrap Datepicker,我有一种情况需要在输入字段中调用datepicker 2次或更多次,但问题是,datepicker在第一个输入字段上打开,但在其余部分它不会。我尝试更改输入的ID和datepicker脚本,仍然无法正常工作。请帮忙。 Thx提前

Code:

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

SCRIPT
Note:I duplicated the code below,while i changed the id from dateRangePicker to dateRangePicker2,and it still wouldn't work.

脚本注意:我复制了下面的代码,而我将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'
                    }
                }
            }
        }
    });


}); 

2 个解决方案

#1

There are two issues in your HTML. You are using attribute ID for two times. id="input" and one more id . Here below

您的HTML中有两个问题。您正在使用属性ID两次。 id =“input”还有一个id。在下面

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

Try Below code

尝试以下代码

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

Working fiddle http://jsfiddle.net/anandgh/ajjLyd57/

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

#2

You can use class not ID like below:

您可以使用类ID,如下所示:

 $('.dateRangePicker')...