how to add a datepicker in jquery dialog form

Question

I am trying to do a jquery form and in that i need a datepicker at the start time and end time field. I am already using one id for the said fields, so can not use id="datepicker". can anybody tell me what is other ways to do it

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog - Modal form</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/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.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <style>
            body {
                font-size: 62.5%;
            }
            label, input {
                display:block;
            }
            input.text {
                margin-bottom:12px;
                width:95%;
                padding: .4em;
            }
            fieldset {
                padding:0;
                border:0;
                margin-top:25px;
            }
            h1 {
                font-size: 1.2em;
                margin: .6em 0;
            }
            div#users-contain {
                width: 350px;
                margin: 20px 0;
            }
            div#users-contain table {
                margin: 1em 0;
                border-collapse: collapse;
                width: 100%;
            }
            div#users-contain table td, div#users-contain table th {
                border: 1px solid #eee;
                padding: .6em 10px;
                text-align: left;
            }
            .ui-dialog .ui-state-error {
                padding: .3em;
            }
            .validateTips {
                border: 1px solid transparent;
                padding: 0.3em;
            }
        </style>
        <script>
            $(function() {
                var name = $("#name"),
                    StartTime = $("#StartTime"),
                    EndTime = $("#EndTime"),
                    allFields = $([]).add(name).add(StartTime).add(EndTime),
                    tips = $(".validateTips");

                function updateTips(t) {
                    tips.text(t)
                        .addClass("ui-state-highlight");
                    setTimeout(function() {
                        tips.removeClass("ui-state-highlight", 1500);
                    }, 500);
                }

                function checkLength(o, n, min, max) {
                    if (o.val().length > max || o.val().length < min) {
                        o.addClass("ui-state-error");
                        updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
                        return false;
                    } else {
                        return true;
                    }
                }

                function checkRegexp(o, regexp, n) {
                    if (!(regexp.test(o.val()))) {
                        o.addClass("ui-state-error");
                        updateTips(n);
                        return false;
                    } else {
                        return true;
                    }
                }
                $("#dialog-form").dialog({
                    autoOpen: false,
                    height: 300,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Create an account": function() {
                            var bValid = true;
                            allFields.removeClass("ui-state-error");

                            if (true) {
                                $("#users tbody").append("<tr>" +
                                    "<td>" + name.val() + "</td>" +
                                    "<td>" + StartTime.val() + "</td>" +
                                    "<td>" + EndTime.val() + "</td>" +
                                    "</tr>");
                                $(this).dialog("close");
                            }
                        },
                        Cancel: function() {
                            $(this).dialog("close");
                        }
                    },
                    close: function() {
                        allFields.val("").removeClass("ui-state-error");
                    }
                });
                $("#create-user")
                    .button()
                    .click(function() {
                    $("#dialog-form").dialog("open");
                });
            });
        </script>
    </head>

    <body>
        <div id="dialog-form" title="Create new user">
            <p class="validateTips">All form fields are required.</p>
            <form>
                <fieldset>
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
                    <label for="StartTime">Start Time</label>
                    <input type="text" name="StartTime" id="StartTime" value="" class="text ui-widget-content ui-corner-all" id="datepicker" />
                    <label for="EndTime">End Time</label>
                    <input type="password" name="EndTime" id="EndTime" value="" class="text ui-widget-content ui-corner-all" />
                </fieldset>
            </form>
        </div>
        <div id="users-contain" class="ui-widget">

<h1>Appointment Details</h1>

            <table id="users" class="ui-widget ui-widget-content">
                <thead>
                    <tr class="ui-widget-header ">
                        <th>Name</th>
                        <th>Start Time</th>
                        <th>End Time</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>John Doe</td>
                        <td>[email protected]</td>
                        <td>johndoe1</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <button id="create-user">Create Appointments</button>
    </body>

</html>

There are so many different ways to do this, but why don't you just use the StartTime & EndTime Ids you already have? e.g. $("#StartTime").datepicker(); Just because their example says "#datepicker" it doesn't mean yours has to be the same. You may want to read the API documentation for it api.jqueryui.com/datepicker — Robbie
– Robbie, Commented May 25, 2013 at 10:25

Josh Crozier · Accepted Answer · 2016-01-15 04:25:55Z

2

I see a few problems with your code, but to be strictly on the question here is what you have to fix

...
<input type="text" name="StartTime" id="StartTime" value="" class="text ui-widget-content ui-corner-all" id="datepicker"/>
<label for="EndTime">End Time</label>
<input type="password" name="EndTime" id="EndTime" value="" class="text ui-widget-content ui-corner-all" />
...

notice that your first input has 2 ids, you should get rid of the second
I see you are using jQuery UI as datepicker plugin, therefore you should know that datepicker needs to be explicitly called like

$("#StartTime, #EndTime").datepicker();

You don't have to define specific IDs for them. Check out the examples/documentation for datepicker

I see your second input is of type password. I believe it should be text

edited Jan 15, 2016 at 4:25

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

answered May 25, 2013 at 10:29

alexb

9816 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2380133 Over a year ago

i am just testing it and have not done it fully. i tried this way you said $("#StartTime, #EndTime").datepicker(); but its not working. can you give a jsfiddle

alexb Over a year ago

@Robbie Thanks, I was about to post one but yours is better :)

user2380133 Over a year ago

@alexb it is working when you have simple text field but its not working inside a dialog. I mean to say that the link you gave is simple text field but my code is inside a dialog . so its not working for me

Robbie Over a year ago

If you're using chrome, go to the Console tab when you right click and click inspect element, that'll give javascript errors for your page. You may want to edit your original question with updated code, or put all of it into a JSFiddle

user2380133 Over a year ago

@alexB from your code i have edited something and for my surprise its only working in jsfiddle but not in browser. Can you please check it.

|

Collectives™ on Stack Overflow

how to add a datepicker in jquery dialog form

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related