Pickadate.js - CLASSIC STYLE

Related with issue 180

by bizamajig

HTML

<input type="text" class="datepicker" readonly />
<script>

/*!
 * pickadate.js v3.5.6, 2015/04/20
 * By Amsul, http://amsul.ca
 * Hosted on http://amsul.github.io/pickadate.js
 * Licensed under MIT
 */
!function(a){"function"==typeof define&&define.amd?define("picker",["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):this.Picker=a(jQuery)}(function(a){function b(f,g,i,m){function n(){return b._.node("div",b._.node("div",b._.node("div",b._.node("div",B.component.nodes(w.open),y.box),y.wrap),y.frame),y.holder,'tabindex="-1"')}function o(){z.data(g,B).addClass(y.input).val(z.data("value")?B.get("select",x.format):f.value),x.editable||z.on("focus."+w.id+" click."+w.id,function(a){a.preventDefault(),B.open()}).on("keydown."+w.id,u),e(f,{haspopup:!0,expanded:!1,readonly:!1,owns:f.id+"_root"})}function p(){e(B.$root[0],"hidden",!0)}function q(){B.$holder.on({keydown:u,"focus.toOpen":t,blur:function(){z.removeClass(y.target)},focusin:function(a){B.$root.removeClass(y.focused),a.stopPropagation()},"mousedown click":function(b){var c=b.target;c!=B.$holder[0]&&(b.stopPropagation(),"mousedown"!=b.type||a(c).is("input, select, textarea, button, option")||(b.preventDefault(),B.$holder[0].focus()))}}).on("click","[data-pick], [data-nav], [data-clear], [data-close]",function(){var b=a(this),c=b.data(),d=b.hasClass(y.navDisabled)||b.hasClass(y.disabled),e=h();e=e&&(e.type||e.href),(d||e&&!a.contains(B.$root[0],e))&&B.$holder[0].focus(),!d&&c.nav?B.set("highlight",B.component.item.highlight,{nav:c.nav}):!d&&"pick"in c?(B.set("select",c.pick),x.closeOnSelect&&B.close(!0)):c.clear?(B.clear(),x.closeOnClear&&B.close(!0)):c.close&&B.close(!0)})}function r(){var b;x.hiddenName===!0?(b=f.name,f.name=""):(b=["string"==typeof x.hiddenPrefix?x.hiddenPrefix:"","string"==typeof x.hiddenSuffix?x.hiddenSuffix:"_submit"],b=b[0]+f.name+b[1]),B._hidden=a('<input type=hidden name="'+b+'"'+(z.data("value")||f.value?'...

CSS

.picker,.picker__holder{width:100%;position:absolute}.picker{font-size:16px;text-align:left;line-height:1.2;color:#000;z-index:10000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.picker__input{cursor:default}.picker__input.picker__input--active{border-color:#0089ec}.picker__holder{overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #aaa;border-top-width:0;border-bottom-width:0;border-radius:0 0 5px 5px;box-sizing:border-box;min-width:176px;max-width:466px;max-height:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;opacity:0;-webkit-transform:translateY(-1em)perspective(600px)rotateX(10deg);transform:translateY(-1em)perspective(600px)rotateX(10deg);transition:-webkit-transform .15s ease-out,opacity .15s ease-out,max-height 0s .15s,border-width 0s .15s;transition:transform .15s ease-out,opacity .15s ease-out,max-height 0s .15s,border-width 0s .15s}/*!
 * Classic picker styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */.picker__frame{padding:1px}.picker__wrap{margin:-1px}.picker--opened .picker__holder{max-height:25em;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;opacity:1;border-top-width:1px;border-bottom-width:1px;-webkit-transform:translateY(0)perspective(600px)rotateX(0);transform:translateY(0)perspective(600px)rotateX(0);transition:-webkit-transform .15s ease-out,opacity .15s ease-out,max-height 0s,border-width 0s;transition:transform .15s ease-out,opacity .15s ease-out,max-height 0s,border-width 0s;box-shadow:0 6px 18px 1px rgba(0,0,0,.12)}





.picker__footer,.picker__header,.picker__table{text-align:center}.picker__day--highlighted,.picker__select--month:focus,.picker__select--year:focus{border-color:#0089ec}.picker__box{padding:0...

JavaScript

$( '.datepicker' ).pickadate({
//
//			Change the text or hide a button completely by passing a false-y value: today
//
			//today: 																	'',
			clear: 																	'Clear selection',
			close: 																	'Cancel',
//
//			Display a human-friendly format and use an alternate one to submit to the server.
//
//			This is done by creating a new hidden input element with the same name attribute as the original
//			with an optional prefix/suffix:
//
// 			Escape any “rule” characters with an exclamation mark (!).
//
//			format: 																'You selecte!d: dddd, dd mmm, yyyy',
//			formatSubmit: 															'yyyy/mm/dd',
//			hiddenPrefix: 															'prefix__',
//			hiddenSuffix: 															'__suffix'
//
//			A majority of the time, the value that needs to be sent to the server is just the hidden
//			value – and not the visible one. To make this happen, use the hiddenName option.
//
//			This essentially nullifies the hiddenPrefix and hiddenSuffix, strips the name attribute from
//			the source input, and then sets it as the name of the hidden input:
//
//			hiddenName: 															true
//
//			When using a custom formatting rule for the format option or when using translations, the
//			input element should be given a data-value attribute formatted using the formatSubmit –
//			the element’s value can be left blank. This helps to parse the date from custom formats into
//			various languages:
//
//			<input data-value="2015/04/20">
//
//  
//			defaultDate:															<= NOW() %>, 
//
// 			An integer (positive/negative) sets it relative to today.
//
			min: 																	-15,
//
// 			`true` sets it to today. `false` removes any limits.
//
			max: 																	false, // true
//
//			Disable days 1, 4, 7 of 1..7
//  
//			disable: [
//				1, 4, 7
//			],

   			formatSubmit: 															'mm/dd/yyyy',

			selectMonths: 															true,
			selectYears: 															true,

			onStart: function()...