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 - http://touchpunch.furf.com/ - 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:

https://docs.google.com/open?id=0B8b-I3PiuN9lMlg2UnoxQnQ5MkU

Oh, there's a 'Helperfunctions.js' involved which I don't link to, but it incorporates a 'GetAbsolutePosition()'-function that I nicked from here: http://blogs.korzh.com/progtips/2008/05/28/absolute-coordinates-of-dom-element-within-document.html




1 kommentar:

  1. I need this, thanks for sharing

    Please do it on jsfiddle

    missing link for:
    images/timeRulerMarkerBck.png
    images/durationRulerMarkerBck.png

    SvarSlet