Member Avatar for if10066

I want to validate time format by putting time picker on my form, then i search for it in Internet and i found it here. I follow the steps, but it is did't work.

In my page i just want to receipt time (hh:mm). i need it to validate the time put by user.

Anybody please help me using that timepicker. That time picker suitable for my form.
What is the required library for that timepicker?
If I may request, could anybody give me the code, please...

I'm a new person in web development, and i'm interest.
Help me please...

  • 2 Contributors
  • 1 Reply
  • 253 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by androtheos

Dani AI

Generated

reported the picker “didn't work” while accepting simple hh:mm input; supplied a working example, but real-world failures usually come from environment issues rather than the widget itself. Common root causes are missing files, wrong load order, duplicate core libraries, selector/DOM timing mistakes, or JavaScript errors that stop execution before the picker initializes.

Checklist to diagnose the problem:

  • Verify every script and stylesheet actually loads (network/console in dev tools — look for 404s or syntax errors).
  • Ensure library files are included in the correct order and that only one copy of the core library is present.
  • Initialize the widget only after the DOM is ready and confirm the selector matches an existing input element (no duplicate IDs).
  • Include the widget’s CSS/theme so the control is visible; a hidden widget often looks like “not working.”
  • If other frameworks are present, use a no-conflict strategy so the widget’s alias isn’t overwritten.
  • Prefer a time-only initialization when only hh:mm is required (a date+time init can add unexpected behavior).

Client-side convenience is good, but format correctness must be enforced server-side. Useful validation patterns:

/^([01]\d|2[0-3]):[0-5]\d$/     // 24-hour HH:MM
/^(0?[1-9]|1[0-2]):[0-5]\d\s?(AM|PM)$/i  // 12-hour with AM/PM

Notes and cautions: confirm the picker add-on is compatible with the versions of the core libraries in use; mismatched versions frequently break addons. Combining a lightweight UI picker for user convenience with strict server-side regex validation gives the most robust result. 's example is a solid starting template; applying the checklist above resolves most “doesn't work” reports.

Member Avatar for androtheos

I have use the timepicker before and it works very well.

You will need the jQuery javascript library and the jQuery-ui javascript library. They both will come i a package from http://jqueryui.com/

Then you will need to add them to the head tag of your page.

<head>       
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
        <style type="text/css">
            /* css for timepicker */
            .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
            .ui-timepicker-div dl { text-align: left; }
            .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
            .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
            .ui-timepicker-div td { font-size: 90%; }
            .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0;}
        </style>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
        <script type="text/javascript">

            $(function(){
                //#example2 is the id of the textbox you are using for the timepicker.
                $('#example2').datetimepicker({
                    ampm: true
                });
            }
</head>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.