Search code examples
jqueryhtmlbootstrap-datepickerbootstrap-datetimepicker

Cannot Get Value Of Selected Date From Bootstrap-datetimepicker


I need to get the value displayed in my input after the calendar closes.

Below is code i have tried but never hits any of them

    $('#startDate').click(function () {
       console.log('1: ' + $('#startDate').val())
    })

    $('#startDate').change(function () {
       console.log('1.25: ' + $('#startDate').val())
    })

    $('#startDate').on("change", function() {
        alert($(this).val()); 
    });

    $('#startDate').on("change paste keyup", function() {
        alert($(this).val()); 
    });

    $("#startDate").on("input propertychange",function(){
        alert($(this).val());
    });

    $("#startDate").on("change paste keyup select", function() {
        alert($(this).val());
    });

    $("#startDate").bind('change', function(event) {
        alert( $("#startDate").attr("value") );
    });

This is my HTML

<div class="col-md-3 col-lg-2 col-sm-12 col-xs-12">
<label for="startDate">Start date (MM/YYYY)</label>
<div class="input-group datetime" id="start_picker"
    data-date-format="MM/YYYY">
    <input type="text" name="startDate" id="startDate"
        class="form-control make-datepicker" data-date-format="MM/YYYY"
        data-parsley-date="" maxlength="7" autocomplete="off">
    <span class="input-group-addon">
        <span class="fa fa-calendar"></span>
    </span>
</div>

I have also tried onchange on the input element (<input id="startDate" onchange="test()">) which should call a function call in my JQuery but still nothing.

I need the value so i can filter a table but i'm now stumped.

This line does work though when i first click in the field to display the calendar

    $('#startDate').click(function () {
        console.log('1: ' + $('#startDate').val())
    })

enter image description here


Solution

  • Please include moment js after try this code:

    $('#startDate').on('changeDate', function(ev){
    
        console.log(moment(ev.date).format('YYYY-MM-DD'));
    
    });
    

    OR

    $('#startDate').datepicker().on('changeDate', function(e) {
    
        console.log(moment(e.date).format('YYYY-MM-DD'));
    
    });