PickaDate

by Raúl Rojas

HTML

<fieldset>
  <input type="text" id="input_text">
      <br/>hhh<br/>hhh<br/>hhh
  <input type="text" id="input_date">
</fieldset>

CSS

/**
 * Housekeeping
 */
body {
  font-family: sans-serif;
  font-weight: 200;
  font-size: 18px;
  line-height: 1.5;
  max-width: 540px;
  margin: 0 auto;
  padding: 2em 0;
}
fieldset {
  margin: 1em 0;
  border: 0;
  padding: 0;
  position: relative;
}
input {
  font-size: 1em;
  font-family: sans-serif;
  font-weight: 200;
  border: 2px solid #999;
  padding: .75em 1em;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
a {
  color: #0089ec;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

#input_date {
  position: absolute;
  right: 1em;
  top: 1em;
  padding: 0;
  margin: 0;
  width: 0;
  height: 0;
  background: transparent;
  color: #333;
  border: 0;
  border-left: .66em solid transparent;
  border-right: .66em solid transparent;
  border-top: 1em solid #333;
  cursor: pointer;
}
#input_date:focus {
  border-top-color: #0089ec;
}




.picker{font-size:16px;text-align:left;line-height:1.2;color:#000;position:absolute;z-index:10000}.picker__input.picker__input--active{border-color:#0089ec}.picker__holder{width:100%;overflow-y:scroll;-webkit-overflow-scrolling:touch}.picker{width:100%}.picker__holder{position:absolute;background:#fff;border:1px solid #aaa;border-top:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;min-width:176px;max-width:466px;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;max-height:0;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;opacity:0;-webkit-transform:translateY(-1em) perspective(600px) rotateX(10deg);-moz-transform:translateY(-1em) perspective(600px) rotateX(10deg);transform:translateY(-1em) perspective(600px) rotateX(10deg);-webkit-transition:all .15s ease-out,max-height 0 .15s;-moz-transition:all .15s ease-out,max-height 0 .15s;transition:all .15s ease-out,max-height 0 .15s}.picker--opened...

JavaScript

/*!
 * pickadate.js v3.0.0-alpha, 2013-05-12
 * By Amsul, http://amsul.ca
 * Hosted on http://amsul.github.io/pickadate.js
 * Licensed under MIT
 */
window.Picker=function(e,t){function n(r,i,o,a){function s(){return n._.node("div",n._.node("div",n._.node("div",n._.node("div",h.component.nodes(u.open),d.box),d.wrap),d.frame),d.holder)}function c(){h.open(),h.$root.addClass(d.focused)}if(!r)return n;var u={id:Math.abs(~~(1e9*Math.random()))},l=o?$.extend(!0,{},o.defaults,a):a||{},d=$.extend({},n.klasses(),l.klass),m=$(r),p=function(){return this.start()},h=p.prototype={constructor:p,$node:m,start:function(){return u&&u.start?h:(u.methods={},u.start=!0,u.open=!1,u.type=r.type,r.autofocus=r==document.activeElement,r.type="text",r.readOnly=!0,h.component=new o(h,l),h.$root=$(n._.node("div",s(),d.picker)).on({focusin:function(e){h.$root.removeClass(d.focused),e.stopPropagation()},mousedown:function(e){e.target!=h.$root.children()[0]&&e.stopPropagation()},click:function(e){var t=e.target,i=$(t),o=i.data();t!=h.$root.children()[0]&&(e.stopPropagation(),h.$root.find(document.activeElement).length||r.focus(),o.nav&&!i.hasClass(d.navDisabled)?h.set("highlight",h.component.item.highlight,{nav:o.nav}):n._.isInteger(o.pick)&&!i.hasClass(d.disabled)?h.set({select:o.pick,highlight:o.pick}).close(!0):o.clear&&h.clear().close(!0))}}),h._hidden=l.formatSubmit?$("<input type=hidden name="+r.name+(l.hiddenSuffix||"_submit")+(m.data("value")?' value="'+n._.trigger(h.component.formats.toString,h.component,[l.formatSubmit,h.component.item.select]):"")+'">')[0]:t,m.addClass(d.input).on("focus.P"+u.id,c).on("click.P"+u.id,h.open).on("change.P"+u.id,function(){h._hidden&&(h._hidden.value=r.value?n._.trigger(h.component.formats.toString,h.component,[l.formatSubmit,h.component.item.select]):"")}).on("keydown.P"+u.id,function(e){var n=e.keyCode,r=/^(8|46)$/.test(n);return...