datetimepicker jumps back to 1899 on focus, how can I fix it?

datetimepicker jumps back to 1899 on focus, how can I fix it?

I am using date time picker
http://trentrichardson.com/examples/timepicker/ to select date and time.
However, there is something weird is happening when I click on the input
field to select the data. the input field will show a value dated back to
1899. I am not sure why it is doing this.
Please note that I am creating these inputs "on the fly" using ajax
request. The following is how I created those inputs
var new_code = returnMeetingDuration('newCall_onCalendar',
'onCalendar[]', 0, min_val, max_val, min_val);
$('#listNextCallDates').append('<input type="text" value=""
name="triggerOn[]" class="triggerOnPicker" readonly="readonly"
style="width: 175px;">' +
'<input type="hidden"
name="engine_ids[]"
value="outbound" />' +
'<div style="display:block;
margin: 5px;">'+
'<input type="checkbox"
id="isAppointment"
name="isAppointment[]"
value="outbound" /> Make an
appointment</div>'+
'<div style="display:block;
margin: 5px;">' +
'<input type="checkbox"
id="calendarAddBox"
name="calendarAdd[]"
value="outbound" />Add to my
Calendar</div>' + new_code);
Then I generate the dattimepicker using the following codes
$('.triggerOnPicker').datetimepicker({
timeFormat: "hh:mm TT",
changeMonth: true,
changeYear: true,
stepMinute: 5,
beforeShowDay: $.datepicker.noWeekends,
HourMin: 5,
HourMax: 17,
minDate: 0
});
I have tried this code but it is not working.
$('.triggerOnPicker').datetimepicker({
timeFormat: "hh:mm TT",
changeMonth: true,
changeYear: true,
stepMinute: 5,
beforeShowDay: $.datepicker.noWeekends,
HourMin: 5,
HourMax: 17,
minDate: 0
}).on('focus', function(){
$(this).not('.hasDatePicker').datepicker();
});
The weird thing is that it works correctly and sometimes it does not. Can
someone help me with this please? Thanks