Pickadate.js - DEFAULT STYLE
Related with issue 180
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{font-size:16px;text-align:left;line-height:1.2;color:#000;position:absolute;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{width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;position:fixed;transition:background .15s ease-out,-webkit-transform 0s .15s;transition:background .15s ease-out,transform 0s .15s;-webkit-backface-visibility:hidden}/*!
* Default mobile-first, responsive styling for pickadate.js
* Demo: http://amsul.github.io/pickadate.js
*/.picker__frame,.picker__holder{top:0;bottom:0;left:0;right:0;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.picker__frame{position:absolute;margin:0 auto;min-width:256px;max-width:666px;width:100%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;opacity:0;transition:all .15s ease-out}.picker__wrap{display:table;width:100%;height:100%}@media (min-height:33.875em){.picker__frame{overflow:visible;top:auto;bottom:-100%;max-height:80%}.picker__wrap{display:block}}.picker__box{background:#fff;display:table-cell;vertical-align:middle}@media (min-height:26.5em){.picker__box{font-size:1.25em}}@media (min-height:33.875em){.picker__box{display:block;font-size:1.33em;border:1px solid #777;border-top-color:#898989;border-bottom-width:0;border-radius:5px 5px 0 0;box-shadow:0 12px 36px 16px rgba(0,0,0,.24)}}@media (min-height:40.125em){.picker__frame{margin-bottom:7.5%}.picker__box{font-size:1.5em;border-bottom-width:1px;border-radius:5px}}.picker--opened .picker__holder{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);zoom:1;background:rgba(0,0,0,.32);transition:background .15s ease-out}.picker--opened...
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()...