I just noticed that the datepicker doesn't load properly on mobile, is that right?
You may need to add some style rules to defeat the block display of tables on smaller screens:
Code:
<style type="text/css">
#question{QID} .bootstrap-datetimepicker-widget table {
display: table;
}
#question{QID} .bootstrap-datetimepicker-widget table thead {
display: table-header-group;
}
#question{QID} .bootstrap-datetimepicker-widget table tbody {
display: table-row-group;
}
#question{QID} .bootstrap-datetimepicker-widget table tr {
display: table-row;
}
#question{QID} .bootstrap-datetimepicker-widget table th,
#question{QID} .bootstrap-datetimepicker-widget table td {
display: table-cell;
text-align: center !important;
}
</style>
I also went to getdatepicker.com/4/ and manage to change de language of the datepicker, but I'm struggling to remove the icon, so far no luck...
You need to modify the html structure:
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var rootPath = location.pathname.split('index.php')[0];
// Identify this question
var thisQuestion = $('#question{QID}');
$('head').append('<link rel="stylesheet" href="'+rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/css/bootstrap-datetimepicker.min.css" type="text/css" />');
$.getScript(rootPath+'assets/packages/bootstrap/plugins/datetimepicker/build/js/bootstrap-datetimepicker.min.js')
.done(function(script, textStatus) {
// Insert the date-time-pickers
$('.answer-item:nth-child(2) input:text', thisQuestion).each(function(i) {
var thisID = $(this).attr('id');
$(this).addClass('date-control date datetimepicker')
.wrap('<div class="inserted-date-wrapper" style="position:relative" />');
$(this).datetimepicker({
//debug: true,
widgetParent: $(this).parent(),
useCurrent:false,
allowInputToggle: true,
format: 'DD:MM:YYYY'
});
});
})
.fail(function( jqxhr, settings, exception ) {
console.log(exception);
});
});
</script>
Sample survey attached attached: