jQuery UI Basics: How to use date picker widget?

Question

This is the first time I am using html and JS so please be gentle.

I want to use the Datepicker widget from jQuery UI as shown here in the Getting Started page.

I think I am making some mistake in linking my html and JS files. This is what I have:

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="jquery-ui.min.css">
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <input type="text" name="date" id="date">
</body>
</html>

(I have downloaded the jquery files locally as instructed.)

and

index.js

$( "#date" ).datepicker();

But when I open index.html in a web browser and click on the textbox, I don't see the calendar date picker popout as shown on the Getting Started page.

Please tell me what I'm doing wrong. This is the first time I'm attempting Html/JS stuff and I'm really frustrated.

Assuming you have referenced the files correctly (they must be in the **same** folder as your index, according to your reference), your above code is sound. Are you getting any errors in the [**F12 Developer Console**](https://msdn.microsoft.com/en-us/library/gg589507(v=vs.85).aspx)? Note that you may need to wrap your code in a `$(document).ready()` function. — Obsidian Age, Sep 18 '17 at 20:52
@ObsidianAge and niladri, I am not seeing any error on the webpage and the F12 Console is empty. I see a textbox on the webpage, I can type in it just fine, just no calendar. — Martin Miggs, Sep 18 '17 at 20:56
@MartinMiggs great, I posted this as a solution, would you accept it if it works for you so that others can benefit. — Niladri, Sep 18 '17 at 21:12

score 0 · Accepted Answer · answered Sep 18 '17 at 21:10

your datepicker code should be like below

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

you have to put this code inside index.js file. If your other file locations are correct then it should work.It's always recommended to put all jquery related code which uses the DOM elements to put inside $(document).ready() such that the code executes once the DOM is ready and all the elements are available.

jQuery UI Basics: How to use date picker widget?

1 Answers1