fredag den 21. september 2012

jquery calendar appointment time picker

I was in need of a time picker with a corresponding duration-selector; and as I couldn't find anything which suited the requirements, I decided to make it myself. So here it is for you to grab if you like. This is what i looks like:

The requirement was to select a specific time on a time ruler, so I'm drawing a ruler on a html5 canvas element and, beneath it, a ruler to select the duration. With both rulers I overlay a 'ruler-marker' div, of course absolutely positioned, and those are decorated with the jquery UI 'draggable' attribute - limited in as much as you can only move the marker within the ruler. A 'onDrag'-handler makes sure the size of the ruler-marker of the time-ruler expands or contracts with the change in duration.

It's important to incorporate the touch-punch - - js support for the jquery ui, if you expect the draggable-functionality to work on IOS devices.

So that's a day's work for me, hopefully it'll save you one. Here's the source:

Oh, there's a 'Helperfunctions.js' involved which I don't link to, but it incorporates a 'GetAbsolutePosition()'-function that I nicked from here:

1 kommentar:

  1. I need this, thanks for sharing

    Please do it on jsfiddle

    missing link for: