Datepicker not working in html

Question

This code is not working. I don't know what resource I need to add. I am following a link for Datepicker here: http://jsfiddle.net/rMhVz/1030/ And my code is down below. I really need to get it to work. I appreciate any help. Thanks in Advance.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css"></link>
<link rel="stylesheet" href="/resources/demos/style.css"></link>
<style type="text/css">
.event > a { 
    background-color: gray !important;
    background-image:none !important;
}
</style>
<script>
// hookup jquery ready function
$(document).ready(function () {
    var Event = function(text, desc) {
        this.text = text;
        this.desc = desc;
    };

    var events = {};
    events[new Date("07/06/2014")] = new Event("hello world test 1");
    events[new Date("08/8/2014")] = new Event("hello world test 2");
    events[new Date("09/26/2014")] = new Event("hello world test 3");

    $("#dates").datepicker({
        beforeShowDay: function(date) {
            var event = events[date];
            if (event) {
                return [true, 'event', event.text];
            }
            else {
                return [true, '', ''];
            }
        },
        onSelect: function(dateText) {
            var event = events[new Date(dateText)];
            if (event) {
                alert(event.text + "\n" + event.desc);
            }
        }
    });
});
</script>
</head>

<body>
    <div id="dates"></div>
</body>
</html>

You need to include jQuery, and include it before jQuery UI. You also need to move your code to the end of your document or wrap it in a document ready call. — j08691, Jun 13 '14 at 19:01
Include a reference to **[jQuery](http://jquery.com/download/)** before jQuery UI. — Shaunak D, Jun 13 '14 at 19:02
Thanks for the response .Can you edit the code above to include that change.I dont know how to do that.I really appreciate your help.Thanks for your time. — jason, Jun 13 '14 at 19:06
@j08691 can you copy/paste the abovr code and let me know whats wrong now ? — jason, Jun 13 '14 at 19:12
You still haven't moved your jQuery to the end of the document or wrapped it in a document ready. — j08691, Jun 13 '14 at 19:20
$(document).ready(function(){ and there you put your function this goes inside the — MickyScion, Jun 13 '14 at 20:03
@MickyScion Please Sir can You rewrite the code above .I tried many times but unable to see anything other than the blank page. — jason, Jun 13 '14 at 20:05
All your script goes inside the {} of $(document).ready(function(){ } so it going to see like this — MickyScion, Jun 13 '14 at 20:13
CAn yo look at the code above and rewrite it.I am unable to make the code above work. — jason, Jun 13 '14 at 20:21

score 2 · Accepted Answer · edited May 23 '17 at 10:33

2

Actually, I don't believe the script load order was the only problem. You're using incompatible versions of jQuery and jQuery UI. Your code breaks on a call to $.browser.msie. $.browser was removed in jQuery 1.9.

Source of error in jquery.ui:

html += buttonPanel + ($.browser.msie && parseInt($.browser.version,10) < 7 && !inst.inline ? '<iframe src="javascript:false;" class="ui-datepicker-cover" frameborder="0"></iframe>' : '');

Try using a more recent version of jQuery UI that is compatible with jQuery 1.9+.

See Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools.

EDIT: For clarification, your script includes should be

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.1/themes/black-tie/jquery-ui.‌css"></link>

Consider using jQuery 1.9.1, but it appears to work fine with 1.9.0.

edited May 23 '17 at 10:33

Community

1
1

answered Jun 13 '14 at 20:28

Cole Kettler

481
4
11

How do I fix the code above now .I am lost.Please help. – jason Jun 13 '14 at 20:34
Well, start off by including jQuery UI 1.9.1 or later. That is when $.browser was removed. It should just work, as in this JSFiddle. http://jsfiddle.net/5peJH/6/ – Cole Kettler Jun 13 '14 at 20:42
See edit for more detailed instructions. – Cole Kettler Jun 13 '14 at 20:51
You're more than welcome. Dependencies can be a pain. Props to other contributors for pointing out the load order errors, too. – Cole Kettler Jun 13 '14 at 20:57

score 1 · Answer 2 · answered Jun 13 '14 at 19:05

1

You didn't include jQuery. Include it before any other js or jquery file and you should be good.

answered Jun 13 '14 at 19:05

LisaW

171
2
3
11

I have updated the code above please have a look.Thanks – jason Jun 13 '14 at 19:10

mhu · Answer 3 · 2014-06-14T12:04:08.623

1

Just add jQuery before jQuery UI, use <link> instead of <script> for the css and use jQuery function from document.ready:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css"></link>
<link rel="stylesheet" href="/resources/demos/style.css"></link>
<style type="text/css">
.event > a { 
    background-color: gray !important;
    background-image:none !important;
}
</style>
<script>
// hookup jquery ready function
$(document).ready(function () {
    var Event = function(text, desc) {
        this.text = text;
        this.desc = desc;
    };

    var events = {};
    events[new Date("07/06/2014")] = new Event("hello world test 1");
    events[new Date("08/8/2014")] = new Event("hello world test 2");
    events[new Date("09/26/2014")] = new Event("hello world test 3");

    $("#dates").datepicker({
        beforeShowDay: function(date) {
            var event = events[date];
            if (event) {
                return [true, 'event', event.text];
            }
            else {
                return [true, '', ''];
            }
        },
        onSelect: function(dateText) {
            var event = events[new Date(dateText)];
            if (event) {
                alert(event.text + "\n" + event.desc);
            }
        }
    });
});
</script>
</head>

<body>
    <div id="dates"></div>
</body>
</html>

edited Jun 14 '14 at 12:04

answered Jun 13 '14 at 19:06

mhu

17,720
10
62
93

I added that still not working. – jason Jun 13 '14 at 19:09
I have updated the code above please have a look.THanks – jason Jun 13 '14 at 19:10
Now you have a duplicate entry for jquery.ui. And is your server connected to the internet, does it have access to the Microsoft CDN? – mhu Jun 13 '14 at 19:20
sorry.Even then after removing.Check the code above it still does not work .Can you copy paste the code and execute and let me know where I am going wrong?Appreciate your help and time.Thanks – jason Jun 13 '14 at 19:21
yes the script is on the server and is connected to internet – jason Jun 13 '14 at 19:24
The jquery.ui style sheet needs to be included using `` – mhu Jun 13 '14 at 19:24
I tried the code above but I still get blank page.?? – jason Jun 13 '14 at 19:34
still not working?? any ideas? – jason Jun 13 '14 at 19:44

score 1 · Answer 4 · answered Jun 13 '14 at 19:29

Include jQuery in the following order : jQuery - jQueryUI - jQueryUIcss.

Include css files using <link>.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">  </link>

Use $(document).ready(..) for your JS - so that all the execution happens after all the DOM elements are loaded.

<script>

$(document).ready(function(){
    var Event = function(text, desc) {
        this.text = text;
        this.desc = desc;
    };

    var events = {};
    events[new Date("07/06/2014")] = new Event("hello world test 1");
    events[new Date("08/8/2014")] = new Event("hello world test 2");
    events[new Date("09/26/2014")] = new Event("hello world test 3");

    $("#dates").datepicker({
        beforeShowDay: function(date) {
            var event = events[date];
            if (event) {
                return [true, 'event', event.text];
            }
            else {
                return [true, '', ''];
            }
        },
        onSelect: function(dateText) {
            var event = events[new Date(dateText)];
            if (event) {
                alert(event.text + "\n" + event.desc);
            }
        }
    });

});
</script>

no errors .PLease check it on your system too.I really appreciate your help. — jason, Jun 13 '14 at 19:58

Datepicker not working in html

4 Answers4