I've been able to solve my issue with text non readable by overwriting the background color of the DateTimePicker .bootstrap-datetimepicker-widget
class.
By javascript when the date picker's show event is fired then I overwrite the CSS in the onShowDatePicker()
function:
$("#myDateControl").datetimepicker({
pickTime: false,
format: "dd/MM/yyyy",
startDate: startDate,
endDate: endDate,
autoclose: true
});
$dateItem.on("changeDate", onChangeDate);
$dateItem.on("show", onShowDatePicker);
}
function onShowDatePicker(event)
{
if(event) {
//overwrite the backbground color of the date picker such as the text is readable
$(".bootstrap-datetimepicker-widget").css("background-color", "#3c3e43");
}
}