0

I tried to get the Date value in javascript function after I select date in bootstrap datepicker, but I can't do this.

The date picker work and show the date in input field, but I can't use this value. (for example I want when I choose a date I get popup alert with the selected date)

This is datepicker:

<div class="form-group">
    <label class="control-label" for="date">THE Date</label>
    <div class="form-group">
        <div class='input-group date' >
            <input class="form-control " id="date_id" name="date" placeholder="DD/MM/YYYY" type="text" onchange="DateFunction()"  />
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-th"></span>
            </div>
        </div>
    </div>
</div>

JavaScript:

$(document).ready(function () {
    var date_input = $('input[name="date"]'); 

    var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
    var options = {
        format: 'dd/mm/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
    };
    date_input.datepicker(options);
})

function DateFunction() {

    var x = document.getElementById("date_id");
    alert(x.Value);

}

-------------edit:--------------------

i change to this function. how and where i need to add line to get my date value? the date is work and show in input

html:

<div class="container">
  <div class="col-xs-12">
    <input name="datetimepicker" id="Date_id" />
  </div>
</div>

js:

  $(function () {
    $('input[name="datetimepicker"]').datetimepicker({
        format: 'DD/MM/YYYY',

    });

});

1 Answers1

0

See https://bootstrap-datepicker.readthedocs.io/en/latest/events.html for the documentation of the datepicker events.

in short

date_input.datepicker(options);
date_input.on('changeDate', function(e){
   // e.date holds the new date (e.dates if it is multidate picker)
   console.log(e.date); // log actual Date object to handle as you want
   console.log(this.value); // log the formatted value of the input
});

Example at https://codepen.io/anon/pen/KoZzpw

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • @alex1121 what does not work ? what is logged in the console ? – Gabriele Petrioli Mar 27 '18 at 13:58
  • @gabi aka G.Petrioli .nothing. Where exactly am I supposed to put it? Inside my function DateFunction or after the row " date_input.datepicker(options)"? –  Mar 27 '18 at 15:34
  • @alex1121 right after the `date_input.datepicker(options)`. Then when you change the date it should log the selected date in the console. – Gabriele Petrioli Mar 27 '18 at 15:35
  • stil dont work. i replace the code to something easier and also here i have problem. i edit my question above if you can look and help me:) –  Mar 27 '18 at 17:18
  • 1
    sorry, the event is `changeDate` and not `change`. See https://codepen.io/anon/pen/KoZzpw – Gabriele Petrioli Mar 27 '18 at 20:52
  • now its work!! thx but its show all the date with time although the format is DD/MM/YYYY. how i make new format after on('changeDate', function(e)? –  Mar 27 '18 at 22:10
  • this what i get: Thu Mar 29 2018 00:00:00 GMT+0300 and this what i expected: 29/03/2018 (dd/mm/yyyy) –  Mar 27 '18 at 22:23
  • 1
    @alex1121 e.date is an actual date object. if you want the formatted date according to the options you pass just use `this.value` (*i have updated the codepen*) – Gabriele Petrioli Mar 27 '18 at 23:28
  • Thx I appreciate.. edit your first comment to codepen and then i mark your answer –  Mar 28 '18 at 10:23