Skip to content

Instantly share code, notes, and snippets.

@lopezator
Last active January 12, 2018 02:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save lopezator/e7622a0adc00a2fc561332db0275c36c to your computer and use it in GitHub Desktop.
Save lopezator/e7622a0adc00a2fc561332db0275c36c to your computer and use it in GitHub Desktop.
IMPORTANT:
The below code will break plugin functionality except for the specific inline case, if you use it
in other places you will need to improve/change this code.
1.- Add the pickadate.js plugin as usual, using an input.
<input type="text" class="datepicker" />
2.- Set your pickadate.js to use the "classic" theme (load the corresponding classic theme files).
3.- Load the plugin like this (in document.ready or whatever):
var $input = $('.datepicker').pickadate({});
var picker = $input.pickadate('picker');
//Also in the document.ready and just after
//add this tweaks to display always the calendar without having to click on the input
picker.$node.addClass('picker__input--active picker__input--target');
picker.$node.attr('aria-expanded','true');
picker.$root.addClass('picker--focused picker--opened');
picker.$root.attr('aria-hidden','false');
3.- Add this rules at bottom of your "classic.date.css" to hide the input associated with the calendar
(in order to avoid clicks, etc).
.datepicker {
visibility: hidden;
position: absolute;
}
4.- Your calendar will remain always opened, so comment all the code inside the close event in picker.js
(lines 341 ~ 392):
close: function( giveFocus ) {
/*
<All the code here>
*/
}, //close
5.- ¡Your calendar should appear now inline!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment