How to implement a calendar in HTML?

Question

I have a web application that uses HTML and Javascript. I want to create a textbox that allows to user to enter in a keyword and submit it. I also want a little calendar icon next to the textbox so the user can click on it to popup a calendar to select a date as the keyword, and then submit that.

I have tried to implement Jcalendar and DatePicker but couldn't get either one working.

Is there something that I can use that will meet my needs? Thank you!

Solution 1

The easiest way is jQuery's Date Picker. One line of code....done.

<script type="text/javascript">
$( "#datepicker" ).datepicker();
</script>

Solution 2

Have a look at jQuery UI's calendar with an icon-trigger.

To have an icon trigger the calender, it would be something like this:

<script type="text/javascript">
    $(function() {
        $( "#idOfYourInput" ).datepicker({
            showOn: "button",
            buttonImage: "images/calendar.gif",
            buttonImageOnly: true
        });
    });
</script>

Solution 3

Check out the jQueryUI datepicker: http://jqueryui.com/demos/datepicker/

Solution 4

Try the jquery ui datepicker

http://jqueryui.com/demos/datepicker/

Solution 5

Something a bit like this?

http://jqueryui.com/demos/datepicker/

View more solutions