Bootstrap Datetimepicker issue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css">
<div class="row">
    <div class="col-md-12">
         <h6>datetimepicker1</h6>
        <div class="form-group">
            <div class="input-group date" id="scheduleDate">
                <input type="text" class="form-control" value="08/11/2017 4:25 PM" />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>
        </div>
        <h6>datetimepicker2</h6>
        <div class="form-group">
            <div class="input-group date" id="scheduleDate2">
                <input type="text" class="form-control" value="08/11/2017 4:25 PM" />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>
        </div>
    </div>
</div>

JavaScript

$('#scheduleDate').datetimepicker({
            
        useCurrent: false,
       
        minDate: new Date(),

        
        format:'DD/MM/YYYY hh:mm A',
        showTodayButton: true,
        sideBySide: true,

        showClose: true,
        showClear: true,
        toolbarPlacement: 'top'
       
    });
    
     $('#scheduleDate2').datetimepicker({
            
        useCurrent: false,
       
        minDate: new Date(),

        
        locale: "fr",
        showTodayButton: true,
        sideBySide: true,

        showClose: true,
        showClear: true,
        toolbarPlacement: 'top'
       
    });