geekab / picker.js Goto Github PK

The datepicker is very configurable, including buttons, disabled dates or days of week, and much much more. Framework templates may override the Default configuration to achieve specific behaviors, for example the BMD4Template uses CANCEL | OK buttons, disables/skips the months view, and disables keyboard navigation so that all keypresses go directly to the input field.

With all of the options available, it's best to look directly at the Default configuration for notes on how it works. You can also take a look at any of the tests in the config directory.

Date formats/parsing

Every single bit of date functionality is handled by the fantastic moment.js. See the moment.js documentation on formats for more information. A simple way to change the format is to pass in {format: 'valid momentjs format'} to the constructor. See the format test for more.

Popper placement

Every single bit of UI placement functionality is handled by the fantastic popper.js. See the popper.js documentation

Goal

An ES2015 base classes for use in multiple renderings for different frameworks
Variations of datepicker:
- Bootstrap 3 - completed
- Bootstrap 4 - works but could use some styling help
- bootstrap-material-design 4 picker that meets the Material Design specification - works - needs help on the animated reveal/hide
(future) add time pickers - starting with material design

Why?

The bootstrap-datepicker project had 415 open issue and 64 open pull requests (at the time of writing). Aside from popularity, one reason for this is it bit off a big chunk, including all date functionality and rendering/placement functionality.

Maintaining that much code may be too much for anyone, and we want to expand it!

How?

Use ES2015 classes (available as es, iife or umd)
Use SCSS for full variable based customization/inclusion
Use moment.js for anything date related
Use popper.js for anything UI placement related
Created presets for rendering on different frameworks (BS3, BS4, BMD4)

Developing

Basics

Install Gulp 4 - npm install -g gulpjs/gulp-cli#4.0
Install dependencies - npm install
Full build - gulp

Typical

I usually have two terminals open, just to speed up everything during development builds:

gulp js:watch or for speed without tests gulp js:dev:watch
gulp css:watch

Open the sandbox/index.html or the sandbox/test.html in a browser and you should be good to go.

Credits

If I have seen further, it is by standing on the shoulders of giants. - Sir Isaac Newton

bootstrap-datepicker - Andrew Rowls and contributors
bootstrap-datepicker original code - Stefan Petre

License

See LICENSE

picker.js's People

Contributors

Stargazers

Watchers

Forkers

fezvrasta psystorm25

picker.js's Issues

Add travis build

set popper.parent so that it is displayed in the same z-index as input

By default, it is appended to body:
http://popper.js.org/documentation.html

Appending to the parent of the input should get us where we want to be (z-index wise)

Gulp error

After npm i

If I run gulp I get:

/Users/federicozivolo/.nvm/versions/node/v5.3.0/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                  ^

TypeError: Cannot read property 'apply' of undefined
    at /Users/federicozivolo/.nvm/versions/node/v5.3.0/lib/node_modules/gulp/bin/gulp.js:129:19
    at nextTickCallbackWith0Args (node.js:433:9)
    at process._tickCallback (node.js:362:13)
    at Function.Module.runMain (module.js:432:11)
    at startup (node.js:141:18)
    at node.js:980:3

Am I missing something?

Days of the previous month should be displayed

Maybe in gray

bmd4 - show/hide needs to be an animated reveal

Not working on IE11 (Internet Explorer)

Hello,

All demo pages are not working on IE11 (Internet explorer)
http://geekab.github.io/picker.js/bmd4.html
http://geekab.github.io/picker.js/bs4.html
http://geekab.github.io/picker.js/bs3.html

It seems it is due to the usage of "Symbol" object like on line 5204
for (var _iterator2 = disabledViews[Symbol.iterator](), _step2;

Based on Microsoft documentation (look at the bottom of the page here: https://msdn.microsoft.com/en-us/library/dn919632(v=vs.94).aspx) it is only supported on Microsoft Edge.

demo site - sandbox/index options demo needs work

I'm not even sure it can handle multiple frameworks at once, it may be best to use jekyll and turn some of it into partials instead, having different pages for each framework (as they require different assets).

Anyway, if you are looking to help, this would be a very useful, beneficial mini-project for the community.

Contributing

How can I help you with this date picker project?

I can’t find any test section or anything to see an actual result to help the development process.

Thanks!

locale change is not working due to moment not being exported

Hello, as in title: How can I change language for days and months?
http://codepen.io/anon/pen/JXeqNe
It's not changing even when I add specific moment.js locale:
http://codepen.io/anon/pen/ONaYxN
or whole moment.js with locales:
http://codepen.io/anon/pen/aNQrLR

Call for maintainers/new owners

I just completed this refactoring, literally, and we decide to take on ReactJs instead of the more traditional html/js/css approach.

This library is in great shape, fully updated and reasonably well tested. It could be an asset to many, but I'm sure it will need some love as more people use it.

If you are interested in maintaining, or interested in taking it over, please let me know!

var switchToModal = function(data) {
  var width = Math.max( body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth );
  if (width < 1000) {
    this._popper.classList.add('popper--modal');
  } else {
    this._popper.classList.remove('popper--modal');
  }
  return data;
}

// usage
new Popper(a, b, { modifiers: [ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle', switchToModal ] });

geekab / picker.js Goto Github PK

picker.js's Introduction

Install

Bootstrap 3

Bootstrap 4

Bootstrap Material Design 4

Options