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

Question

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

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.

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

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

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

Answer 2

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

 $('.dateRangePicker')...