CODEWITHSUNDEEP
jquerybootstrap-datetimepicker
troggy69
troggy69

Reputation: 121

DateTimePicker wont update the value field onChange or onSelect

I am trying to update the value of an input when i change the selected date. This is my html code for the input. 

<input type="text" name="completed_date" id="completed_date" size="12" class="completed_date fielddate" value="<?php echo date("d/m/Y",strtotime("now"))?>" readonly />

This is my jquery onSelect function

 $(document).ready(function() {
  $('.completed_date').datetimepicker({
   timepicker: false,
   format: 'd/m/Y',
    onSelect: function() {
     var date = $(this).val();
     $('#completed_date').val(date);
    }
  });
 });

This code has no effect on my input field but if i change the last line to 

$('#completed_date').text(date);

then it adds the new selected date to the end of the html line.

<input type="text" name="completed_date" id="completed_date" size="12" class="completed_date fielddate" value="<?php echo date("d/m/Y",strtotime("now"))?>" readonly /> Adds the date here

The code in the value field currently shows today's date by default but should be updated onSelect.

I have read the documentation but cant seem to find what im missing. Any help will be greatly appreciated.

It updates visually in the field but the actual value in the input doesn't change so when i click save it always sends today's date instead of the selected date

Upvotes: 0

Views: 7058

Answers (2)

troggy69
troggy69

Reputation: 121

Firstly thank you for all your help.

I have just used your code and edited it slightly and i have managed to get your solution to work with the DateTimePicker. I have included the code below. Once again many thanks.

 $(document).ready(function() {
  $('.completed_date').datetimepicker({
    timepicker:false,
    format:'d/m/Y',
 });
 $('.completed_date').change(function() {
    var date = $(this).val();
    $('.completed_date').attr('value', date);
 });

});

This will update the value field on an input linked to the DateTimePicker.

Upvotes: 1

SilentTremor
SilentTremor

Reputation: 4902

bootstrap-datepicker use .datepicker method to load the picker.

$('.completed_date').datepicker({
    timepicker:false,
    format:'d/m/yy'      
  })
.on("changeDate", function(e) {
 
  $('#completed_date').attr('value', e.format());
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>

<input type="text" name="completed_date" id="completed_date" size="12" class="completed_date fielddate" value="12/12/2016" />

Upvotes: 1

Related Questions