0

I am trying to use jQuery datepicker tool but it's not working. I am new to jQuery so I don't know much about it. Can someone spot where I have gone wrong? Are my links in the header correct?

html:

<html>
    <head>  
        <title>CodeProject</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <script type='text/javascript' src='javascript.js'></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    </head>
<body><h2>Date Picker</h2>
        <p>I will be making a simple date picker tool using jQuery. You have have seen it in some</br> travel websites where when you move your cursor on a date field, you see a little pop-up which allows you to pick a date.</p></br>
        <p>Departure date:<input type="text" id="departure"></p>
        <p>Returning date:<input type="text" id="returning"></p>
        <button>Submit</button>
</body>

jQuery file:

$(document).ready(function() {
$("#departure").datepicker();
$("#returning").datepicker();
});

CSS file:

    #header {
    background-color: white; /**#212121**/
    margin-bottom: 0px;
    margin-left: 0;
    margin-top: 0px;
    z-index: 1px;
    width: 99.2%;
    border-bottom: 2px solid #212121;

}

h1 {
    text-align: left;
    font-family: times, Times New Roman, times-roman, georgia, serif;
    color: #444;
    padding: 0px 0px 6px 0px;
    font-size: 51px;
    line-height: 44px;
    letter-spacing: -2px;
    font-weight: bold;
    padding-left: 10px;
}

span {
    color: #7EAEDE;
    font-size: 20px;
    letter-spacing: 4px;

}

h2 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:30px;
    margin-top: 0px; margin-bottom: 10px;
    text-align: left;
    font-weight: normal;
    color: #222;
}

h4 {
    font-family: "Lucida Grande", Tahoma;
    font-size: 10px;
    font-weight: lighter;
    font-variant: normal;
    text-transform: uppercase;
    color: #666666;
    margin-top: 10px;
    text-align: left!important;
    letter-spacing: 0.3em;
    margin-left: 2px;
}

#p1 {
    font-family:  'Hoefler Text', Georgia, 'Times New Roman', serif;
    font-weight: normal;
    font-size: 1.75em;
    letter-spacing: .2em;
    line-height: 1.1em;
    margin:0px;
    text-align: center;
    text-transform: uppercase;
    color: #1BA8E0;
}

body {
    background-color: grey;
    margin: 0; /**body has margin by default so we 0 to get rid of it **/
}

#wrapper {
    width:700px; /**Get everything in the wrapper to be within this width of 700px**/
    margin: 0 auto; /**centre everything**/
    background-color: white;
    margin-top: 0px;
    border: 2px solid #444;
    border-top: 0px;
}

.border { /**Separated by a dotted line**/
    border-bottom: 1px dotted black;    
    border-top: 1px dotted black;
}
Improve this question
11
  • it's working here jsfiddle.net/qcdUE
    – Sachin
    Commented Mar 23, 2013 at 21:14
  • Really stupid question... you do have <script> tags around your JS right? This looks ok to me...
    – Adam Plocher
    Commented Mar 23, 2013 at 21:17
  • are there any errors in the console?
    – CodePB
    Commented Mar 23, 2013 at 21:17
  • 1
    make sure you include the css file too
    – Mike C.
    Commented Mar 23, 2013 at 21:17
  • Change your script source to have a http://
    – Adam Plocher
    Commented Mar 23, 2013 at 21:18

3 Answers 3

Reset to default
2

You are calling the JS file you want to perform actions from

<script type='text/javascript' src='javascript.js'></script>

Before you ever invoke jQuery and the jQueryUI components.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Change your order of operation here and put javascript.js after those two files.

Improve this answer
1
  • That didn't work either. Btw I am using sublime text 2 editor. It's not done differently to any other editor is it?
    – user123
    Commented Mar 23, 2013 at 21:37
0

Here is the info you requested, note the order, this is taken directly from the JQuery API page for the datepicker, so you should follow it:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

What I've found is JQuery plugins tend not to work if you forget to include their .css file. Since you were already referencing the online version of the file, I just included that reference for you. If this continues to not work for you, make sure you have no issues with accessing these file by browsing to these links directly.

If it continues to fail, watch your console while loading the page and check for any errors. This is always a good place to start figuring things out.

Improve this answer
2
  • Thanks a lot mike. It's working now :). So i have to refer to the JQuery API page everytime when I want to insert a new jquery tool? or will this jquery-ui.css link reference would work for every other tool?
    – user123
    Commented Mar 23, 2013 at 21:58
  • That will work with all of the jquery-ui tools api.jqueryui.com/category/widgets If you download a custom jquery plugin, they usually have their own .css file.
    – Mike C.
    Commented Mar 23, 2013 at 22:00
0

Try doing this you missed http: here:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Markup:

<html>
        <head>  
            <title>CodeProject</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
            <script type='text/javascript' src='javascript.js'></script>
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
        </head>
    <body><h2>Date Picker</h2>
            <p>I will be making a simple date picker tool using jQuery. You have have seen it in some</br> travel websites where when you move your cursor on a date field, you see a little pop-up which allows you to pick a date.</p></br>
            <p>Departure date:<input type="text" id="departure"></p>
            <p>Returning date:<input type="text" id="returning"></p>
            <button>Submit</button>
    </body>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.