CODEWITHSUNDEEP
twitter-bootstrapdatepickercross-browser
xif
xif

Reputation: 343

Bootstrap datepicker css is not working well

What I should get when I select a date on my browser with bootstrap datepicker:

enter image description here

What I got :

enter image description here

If I click on the date, the selection is working (the input is well filled) but there is no highlight, and the cursor is like a texte cursor, not the little hand as it is on chrome.

<div id="datepicker2"></div>
 <div id="inputpicker2"> <input type="" id="my_hidden_input"></div>

    $('#datepicker2').datepicker();
    $('#datepicker2').on('changeDate', function() {
            $('#my_hidden_input').val(
                    $('#datepicker2').datepicker('getFormattedDate')
            );
    });

Upvotes: 1

Views: 4742

Answers (1)

fabOnReact
fabOnReact

Reputation: 5942

If the jquery function $('#my_hidden_input').val() is called when you trigger the changeDate event on the mozilla browser, then as my understanding this is not a jquery issue. It is a CSS issue. Sometimes CSS style work on chrome, but not on mozzilla. For this reason sometimes we use specific CSS styles for mozilla or webkit(chrome).

You need with the developer toolbar to compare the two divs css styles, I think you will be able to find out that on mozzilla, this div cellhighlight property or some other property is disable for some reason.

for example if you use in your css -moz-cellhighlight that css style will be applied only to mozilla

As jquery adds this style to the div dynamically, when you call the .datepicker() function on the event .on('changeDate', function(){}), you should be able easily by changing the date in Chrome or Mozzilla, to find out the name of the class added and edit this class in your datepicker css file.

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

To target with css a specific browser Targeting only Firefox with CSS

Upvotes: 2

Related Questions