Calendar control is wrapping my input inside a div

Date and time pickers
1

I’m applying the calendar control to my input like so:

My HTML

<input id="displaydate" onchange="changePageDate('child')" class="displaydate" value="Jul 4, 2019">

My JQuery

$(function(){
$(‘#displaydate’).mobiscroll().calendar({
‘dateFormat’:‘yyyy-mm-dd’,
‘focusOnClose’:false,
‘setOnDayTap’:true,
‘defaultValue’:‘<?php echo $pagedate; ?>’,
‘buttons’:[‘cancel’,‘now’],
‘nowText’:‘Today’
});
});

But when I run it, mobiscroll appears to be adding a class to my input (mbsc-comp) and also wrapping it inside a div with several more classes.

<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="displaydate" onchange="changePageDate('child')" class="displaydate mbsc-comp" value="Jul 4, 2019" readonly=""></div>

This is giving me styling that I don’t want. How can I prevent this?

2

Hi Vincent,

Basically this is how the mobiscroll inputs are rendered, with a wrapper element and some classes, so you cannot initialize the calendar without them. However you can easily create your own custom styling using your displaydate class.

Please let me know if this answers your question or if we can help you with anything else!

3

But the wrapper is a parent element to my own. I don’t see how I can override the styling of a parent element using my own class. CSS cascades down, not up.

EDIT: Actually I don’t think this is a mobiscroll issue. It looks like jQuery Mobile. False alarm.