Datetimepicker not changin with mouse javascript

<div class="input-group">
    <asp:textbox id="datePEC" runat="server" cssclass="form-control" width="250px" height="30px">
    <asp:button runat="server" id="btnSample" clientidmode="Static" style="display:none;" onclick="changerHeureDEP">
    <asp:hiddenfield runat="server" id="datesel">
</div>

$(document).ready(function () {
               
    $('input[name="ctl00$MainContent$datePEC"]').daterangepicker({
       

        singleDatePicker: true,
        timePicker: true,
        timePicker24Hour: true,
        scrollMonth: false,
        changeDay: true,
        changeMonth: true,
        changeYear:true,

        "locale": {
            "format": "DD/MM/YYYY HH:mm",
            "separator": " - ",
            "applyLabel": "Valider",
            "cancelLabel": "Annuler",
            "fromLabel": "Du",
            "toLabel": "Au",
            "customRangeLabel": "Custom",
            "weekLabel": "S",
            "daysOfWeek": [
                "Di",
                "Lu",
                "Ma",
                "Me",
                "Je",
                "Ve",
                "Sa"
            ],
            "monthNames": [
                "Janvier",
                "Février",
                "Mars",
                "Avril",
                "Mai",
                "Juin",
                "Juillet",
                "Aout",
                "Septembre",
                "Octobre",
                "Novembre",
                "Decembre"
            ],
            "firstDay": 1
        },
        opens: 'left' 
    },
       
        function (start, end, label) {
            console.log("Une nouvelle selection a ete faite: " + start.format('DD-MM-YYYY HH:mm'));
    //        change_heure(start.format('DD-MM-YYYY HH:mm'));
            
    });