Bootstrap datepicker css is not working well

Question

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

What I got :

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')
            );
    });

@FabrizioBertoglio Sorry I was really busy, I cleared chrome cache, and I have the same problem on chrome actually, but it was working before so I really don't understand what happened — xif, Mar 15 '17 at 08:39
Thanks. Is there some way I can recreate this issue to test it? Could you give me your github for this issue? Thanks — Fabrizio Bertoglio, Mar 15 '17 at 19:32

score 2 · Answer 1 · edited May 23 '17 at 12:10

2

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

edited May 23 '17 at 12:10

Community

1
1

answered Mar 11 '17 at 11:36

Fabrizio Bertoglio

5,890
4
16
57

1

Sorry for the delay i was not avalaible, I found the solution I replace bootstra-datepicker.css link by https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css And it's working, I think my old datepicker.css wasn't the good one ! But thank you pointed out the css problem so I focused on it – xif Mar 29 '17 at 13:58
1

@xif thank you I am very happy that you solved the problem best regards – Fabrizio Bertoglio Mar 29 '17 at 14:08
2

thanks @xif. your solution did it for me too. imported the 'standalone' stylesheet i.e. `@import '~bootstrap-datepicker/dist/css/bootstrap-datepicker.standalone.css';` instead of `@import '~bootstrap-datepicker/dist/css/bootstrap-datepicker.css';`. then it worked – suo Jun 21 '18 at 12:03

Bootstrap datepicker css is not working well

1 Answers1