datepicker not working on FF and chrome but it works on IE

Question

I am stuck in weird problem.
I have used datepicker like this:

<h6>From:</h6>
<input type="text" name="from" data-behaviour='datepicker' data-date-format="yyyy-mm-dd">

<script type="text/javascript">
     $('[data-behaviour~=datepicker]').datepicker();
</script>

locally datepicker is working fine, but after uploading this to heroku calendar is not opening. I tried the answer as in this link, after that it started working on IE 8. i am unable to figure out what the problem is. please guide me to right direction. Thanks

Accept if it will work for you – Darshan Dec 31 '13 at 13:25 — Darshan, Dec 31 '13 at 13:25

score 1 · Answer 1 · answered Dec 31 '13 at 13:24

This code uses Modernizr to detect whether the 'date' input type is supported. If it isn't supported, then it fails back to JQueryUI datepicker.

Note: You will need to download JQueryUI and possibly change the paths to the CSS and JS files in your own code.

    <!DOCTYPE html>
<html>
    <head>
        <title>Modernizer Detect 'date' input type</title>
        <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css"/>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
    $(function(){
        if(!Modernizr.inputtypes.date) {
            console.log("The 'date' input type is not supported, so using JQueryUI datepicker instead.");
            $("#theDate").datepicker();
        }
    });
</script>

<body>
        <form>
            <input id="theDate" type="date"/>
        </form>
    </body>
</html>

i downloaded and changed all css and js paths. but it even failed on IE too(perviously it was working on IE only). i had to rollback all changes :s — Saghir A. Khatri, Jan 01 '14 at 11:04

score 0 · Answer 2 · answered Dec 31 '13 at 13:21

0

if ( $('input')[0].type != 'date' ) 
    $('input').datepicker();

http://jsfiddle.net/2AaFk/1/

answered Dec 31 '13 at 13:21

Darshan

2,272
3
31
43

score 0 · Accepted Answer · answered Jan 07 '14 at 07:36

well i discovered that i ahve to run 'rake assets:precompile' anyway. i pushed my public/assets to git and heroku. i launched firebug and found that the error is related to mixed secure layers. I changed my jquery and jquery-ui links to https previously it was http because heroku uses https. this solved my issue with calendar.

datepicker not working on FF and chrome but it works on IE

3 Answers3