ClockPick is a timepicker plugin, enabling users to enter a time value into a form field.
jQuery ClockPick Plugin -A Time Picker

Using a unique popup div UI, ClockPick gets the job done in about 1/5 the time it takes to enter a time value using a traditional select menu UI.
jQuery ClockPick Plugin -A Time Picker Web Site
jQuery ClockPick Plugin -A Time Picker Demo
jQuery ClockPick Plugin -A Time Picker Download

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

2 Responses to “jQuery ClockPick Plugin -A Time Picker”

  1. renso says:

    The new version – upgraded from 1.2.5 to 1.2.8 – does not work after I upgraded from jQuery 1.4.2 up to jQuery 1.4.4. The issue is that the placement of the clock is offset against the left hand side of the window in stead of being placed relative to the clicked object/tag. So I changed the code on lines 203-204 to replace the css LEFT and TOP positioning by $obs to that of the $self object as follows and it works just fine:
    var ph = document.documentElement.clientHeight
    ? document.documentElement.clientHeight
    : document.body.clientHeight;
    var pw = document.documentElement.clientWidth
    ? document.documentElement.clientWidth
    : document.body.clientWidth;
    var t = parseInt($self[0].offsetTop);//changed this
    var l = parseInt($self[0].offsetLeft);//changed this
    var st = document.documentElement.scrollTop
    ? document.documentElement.scrollTop
    : document.body.scrollTop;

    Let me know what you think. I also updated the style css a little to work with mozilla and webkit:
    #CP_hourcont {
    padding: 0px;
    position:absolute;
    border:1px dashed #bbbbbb;
    background-color:#dddddd;
    display:none;
    z-index:996;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:3px 3px 4px #696969;
    box-shadow:3px 3px 4px #696969;
    }

    #CP_minutecont {
    background-color:#dddddd;
    padding: 0px;
    position:absolute;
    width:45px;
    border: 1px dashed #cccccc;
    display:none;
    z-index:997;
    }

    .CP_floatleft {
    float:left;
    }

    .CP_hour {
    padding:1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:9px;
    white-space:nowrap;
    cursor:pointer;
    width:35px;
    margin:1px;
    background-color:#eeeeee;
    z-index:998;
    }

    .CP_minute {
    padding:1px;
    background-color:#eeeeee;
    font-family: Arial, Helvetica, sans-serif;
    font-size:9px;
    white-space:nowrap;
    cursor:pointer;
    width:auto;
    margin:1px;
    z-index:999;
    }

    .CP_over {
    background-color:#ffffff;
    }

  2. Sara says:

    hey

    i am still having problem running this script. im working on asp.net website, when run this code alone in a form (without master page) it works fine but when i place it in content page of a master page it doesnt work.. my other scripts are running fine i.e js 1.4.4 but this isnt… i really need it.. please help out

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>