Back to Top
The nuts and bolts for
Creative web development

DMXzone Timepicker

“Keep your site on the clock with an amazing timepicker”

Do you want to keep your website on the clock? Here comes the DMXzone Timepicker - this Dreamweaver extension allows you to add great looking and well validated time fields on your web forms and improve their usability and user experience. No matter from where your customers are you can pick up from different time formats to suits you best.

Choose from 24 designs which are CSS based and fully customizable to fit your page. You can add all kinds of animations, customize the timepicker appearance, select time ranges to limit the selectable time, use alternative fields for saving the time value and more.


The DMXzone Timepicker can be used as a standalone extension or like an add-on for the DMXzone Calendar 2. It has built-in server formats for easy time conversion in ASP and PHP. The extension is also optimized for touch devices so you can drag it when you use steps and grids. The behavior connector allows the DMXzone Timepicker to control other extensions such as (DMXzone Lightbox, Advanced HTML Editor 3, Ajax Event Calendar and others.

Overview

Features Highlights:

  • Extension and Add-on - The DMXzone Timepicker works as a standalone Dreamweaver extension and also as an Add-on for the DMXzone Calendar 2.
  • 24 designs - There are 24 different designs to choose from so the timepicker fits your website design. You can also create your own custom design by editing the CSS.
  • Browser inline timepicker or with field - To suit you website you can choose between an inline timepicker or with field.
  • Optimized for Touch devices - Now you can drag the timepicker slider on touch devices like iPad and iPhone and it will respond directly!
  • Initial Timezone - Set initial timezone that will be selected when the timepicker is displayed.
  • All international and custom time formats - Visitors from varying locals respond to different time formats so we added all to use the best one for your website.
  • Animation effects - Add awesome animation effects to your timepicker when opens or closes.
  • Custom appearance - You can customize the way your timepicker will be navigated and what drop-downs will be available for your users.

* For complete Features overview press the Features in Detail  

Features

  • Extension and Add-on - The DMXzone Timepicker works as a standalone Dreamweaver extension and also as an Add-on for the DMXzone Calendar 2.

  • 29 supported languages - You can choose between 29 different languages for the timepicker interface.

  • 24 designs - There are 24 different designs to choose from so the timepicker fits your website design. You can also create your own custom design by editing the CSS.

 
 
 
 
 
 
 
  • Style picker in GUI and the property inspector - Now you can see a preview of the design directly in Dreamweaver.

  • Browser inline timepicker or with field - To suit your website you can choose between an inline timepicker or with field.

  • Optimized for Touch devices - Now you can drag the timepicker slider on touch devices like iPad and iPhone and it will respond directly! 
  • Initial Timezone - Set initial timezone that will be selected when the timepicker is displayed.

  • All international and custom time formats - Visitors from varying locals respond to different time formats so we added all to use the best one for your website.

  • Animation effects - Add awesome animation effects to your timepicker when opens or closes.

  • Timepicker appearance - Set the timepicker to open on focus, on icon click, or both.

  • Custom appearance - You can customize the way your timepicker will be navigated and what drop-downs will be available for your users.

  • Restrict time range - Limit the range of selectable time in the timepicker by setting a beginning and end time.

  • Alternative fields - Set initial time that will be selected when the timepicker is displayed.

  • Step of sliders - Set intervals on your timepicker for your users to choose from.
  • Show grids - Add hour, minutes or seconds labels.

  • Built-in Server Formats for easy time conversion in ASP and PHP

  • Great Dreamweaver integration - Interactive dialog in Dreamweaver with all the options you'll need.
 
  • Inline timepicker - Rich inline timepicker within Dreamweaver for easy time pickup.
  • An inline property inspector - The property inspector enables you to change several options after you've created the timepicker.


  • Fully controllable by behavior - Full control of the timepicker with the Control Timepicker behavior.

Showcases


  • Event Manager App Showcase

    For this showcase we build a dynamic event manager application with the HTML5 Data Bindings, where you can edit the date and time of an event with a click of a button. In order to do that we used ...

  • Veterinary Hospital Showcase

    For this showcase we used DMXzone Calendar 2 for the date picker and DMXzone Timepicker for the hour of appointment.

  • Appointment Form Notification Showcase

    For this showcase we used a few DMXzone extensions in order to design an appointment form with awesome notification upon submission. For the form we used the DMXzone Ajax Form which is connected to ...

  • Online Flowershop Showcase

    For this flower delivery service we used the HTML5 3D Flipping Gallery to present the images of the different bouquets that flip on click with some additional information on the back. The date and ...

  • Music Lessons Showcase

    For this landing page showcase we used the DMXzone Accordion in order to save space for our content and the DMXzone Calendar 2 with a Timepicker for the lessons reservation.

  • Reservation Form Admin Panel Showcase

    For this showcase we gather 3 different Dreamweaver extensions. For the date and time pickup we used DMXzone Calendar 2 where we set dependent dates (pickup and return calendars) that can be chosen ...

  • Japanese Restaurant Showcase

    In this reservation form we added two fields for time & date pickup which are greatly validated.

  • Hairdresser Salon Showcase

    In this showcase you can see how we used DMXzone Timepicker as a standalone extension along with DMXzone Calendar 2 in a form with two fields.

  • Dentist Appointment Showcase

    For this showcase we combined DMXzone Calendar 2 with DMXzone Timepicker, which is working as an Add-on. We set the time range to be selectable in 15 min steps and also by the hour.

  • DMXzone Calendar 2 & Ajax Event Calendar Showcase

    In this showcase you can see how easily you can bind the DMXzone Calendar 2 and Ajax Event Calendar through the Behavior Connector. Simply click on a date in the DMXzone Calendar 2, that is colored ...

  • Holiday Reservation System

    In this showcase website you can see how we implemented our DMXzone Calendar 2 into a reservation system for a hotel/villa. We added non selectable for pick up date with a CSS class that colors ...

  • Hotel Reservation Form Showcase

    In this showcase we will show you how easy it is to use DMXzone Calendar 2 on a reservation form. Simply click on the desired dates and they'll be filled in in the field automatically. The ...

Videos


Requirements

Type: Behavior
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CC
Platform: Win XP/2000/2003/2008/7, Mac OS 8.6 or higher, Mac OS X, Mac OS X 10.4+
Browser: Opera 9.5, Chrome 9+, Safari 4+, iPad, Safari 5+, Firefox 4+, Chrome 10+
Used Technologies: jQuery UI, CSS
Screen Shot: External link
Tags: timepicker, calendar, jQueryUI, css, extension, Dreamweaver

The DMXzone Timepicker runs on Dreamweaver 8 but we do not support it officially.

History

Version 1.2.0

Version 1.1.2

  • Support for more 24 hours time formats
  • Full Dreamweaver CC and Extension Manager CC support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility
  • Included new Behavior Connector with restyled UI and better Mac OSX Support 

Version 1.1.1

  • Improved support for new addition styling themes, like the DMXzone Metro UI Theme Pack
  • Improved style picker dialog to pick up automatically new available styles

Version 1.1.0

  • Included updated jQuery UI to 1.10.1 for more speed, power and greater user experience
  • Included updated jQuery to 1.8.3 that includes the unbelievable 13 versions
  • Included updated jQuery UI Time Picker Widget to version 1.2
  • 5 New Languages: Afrikaans, Basque, Hellenic, Ukrainian and Thai
  • Updated jQuery UI Themes

Version 1.0.1

  • New Afrikaans translation added 
  • Timepicker jQuery code updated
  • Fixed dmxCalendarFormat function attributes when setting dynamic values for initial time, minimum time, maximum time and alternative field initial time
  • Added Time select dialog and dynamic select dialog to AltField Initial value

 

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article