I have few date and time fields in my form, when the form is loaded the date and time format would be mm/dd/yyyy and hh:mm a, after user changes the locale dropdown value other than US then time date and time format should be modified to dd/mm/yyyy and HH:mm format. I tried to detach and reinitialize datetimepicker in my callback function, but the pickers are not getting updated with the new format. I tried the following code for date fields.
$('.datepicker').each(function() {
//detach
$(this).datetimepicker('remove');
//reinitialize
$(this).datetimepicker({
useCurrent: false,
format: "DD/MM/YYYY",
pickTime: false
});
$(this).attr("placeholder", "dd/mm/yyyy");
console.log( $(this).val() );
//$(this).val(moment($(this).val(), 'DD/MM/YYYY').format('MM/DD/YYYY'));
});
I made something similar recently, I changed format as a checkbox state changes. I hope this helps.
// by default I set the inputfield format to 'DD/MM/YYYY'
$(function () {
$('#datetimepicker1').datetimepicker({
allowInputToggle: true,
format: 'DD/MM/YYYY'
});
});
// I changed format of the inputfield as the checkbox state changes
$("#interval").change(function () {
if($(this).prop("checked") == true){
$('#datetimepicker1').data("DateTimePicker").format("DD/MM/YYYY HH:mm A");
} else {
$('#datetimepicker1').data("DateTimePicker").format("DD/MM/YYYY");
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<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/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<body>
<div class="checkbox">
<label>
<input type="checkbox" id="interval" >
time:
</label>
</div>
<div class='col-sm-3'>
<div class="form-group" >
<div class='input-group date' id="datetimepicker1" >
<input type="text" class="form-control" placeholder="Select Date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar "></span>
</span>
</div>
</div>
</div>
</body>