soyuka/dpicker

A framework-agnostic minimal date picker

DPicker

A framework-agnostic minimal date picker.

Quick start

<label>
  <input type="datetime">
</label>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/dpicker@latest/dist/dpicker.all.min.js"></script>
<script>
  [].slice.call(document.querySelectorAll('input[type="date"],input[type="datetime"]')).forEach(function(e){new dpicker(e);});
</script>

Read the docs

• Full Documentation (web)
• /docs

License

MIT

dpicker's Issues

todo update bel to 5.0.0

choojs/nanohtml#74

alternate css for calendar

Here's a quick alternate style for the calendar if anyone is interested...

.dpicker-container table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 3px;
    -webkit-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.5);
}

.dpicker-container button,
.dpicker-container td,
.dpicker-container th {
    font-size: 1em;  /* overall calendar size */
    height: 2em; /* tweak to add vertical spacing to calendar */
    min-width: 1em; /* tweak to add horizontal spacing to calendar */
    text-align: center; 
}

.dpicker-inactive { color: rgba(0,0,0,.2); }
select[name="dpicker-year"], select[name="dpicker-month"] { margin: 1em 2em 1em 0em; }
.dpicker-active button.dpicker-active { background-color: #FFFBCC; font-weight:bold; }
.dpicker-container, .dpicker-container button {  font-size: 100%; font: inherit; vertical-align: baseline; } 
.dpicker-container { margin:.5em; }
.dpicker-active, .dpicker-inactive {border: 1px solid rgba(0,0,0,.05); }
.dpicker-active button { border:none; width: 100%; background: none; }
.dpicker-active button:hover { background: rgba(0,0,0,.05); cursor: pointer; }
.dpicker-invisible { display: none; }
.dpicker-visible { display: block; }

first day of week

Hi.

I set momentjs to my local translations. This works fine.
But the first day of the week isn't correct in dpicker. It's always sunday.
Any way to change this?

v4.0.0

I just dropped maquettejs or any related hypescript library. It was a pain trying to be compatible with every one of them because they don't follow the same behavior.

For example:

• Maquettejs props takes classes which is an object with booleans
• Inferno uses className
• Mithril uses class

This also allows cleaner DOM update where it updates only the parts we need to update.

Tests have not been modified, every previous feature should still be available. The only thing that changed is the behavior of an invalid input. Previously it was changing the date to the closest available. We now just leave the input invalid.

For more informations about changes: https://github.com/soyuka/dpicker/blob/master/CHANGELOG.md#400

ping @florianpircher @stereonom it would be lovely if you have time to update and tell me if something broke.

time selector

Hi.

Is it possible to get the selectfor the time as one select instead of two?
When using step=30 the two selects aren't very useful.

Clicking on day doesn't update days (active button)

When I click on a day, the input field gets updated/redrawn correctly, but in the table, the old day is still active. Shouldn't the dayClick event also redraw the days?

Line 420 of src/dpicker.js:

this.redraw(['input'])

to:

this.redraw(['input', 'days'])

IE11 & 10: DPicker not loading

Something is broken in IE11 & IE10.

Edge ist fine.

datetime support?

Hi.

Any plans for adding support for <input type="datetime">?

When you give me a hint, I would try to add it myself.

Thanks!

Fallback to native pickers

Hi.
When setting type="datetime" on the inital <input> the android-browser think he's clever and prompts the user with its native controlls for datetime. (iOS does the same with type="date")

The problem with dpicker not showing up is that steps, min & max have no influence on the native-OS-pickers.

I tried to work around with type="text":

• iOS doesn't show the selects for time
• android offers me a qwertz-keyboard so I can type anything – no dpicker at all.
  So this doesn't help.

Perhaps a solution would be to get rid of this input? (the downside would be that no manual input would be possible, but that would be ok, or is a setting)

Dpicker Does Not Work on Safari 9.1.3

Hi,

Dpicker does not work on Safari. There are an error in console: http://jmp.sh/9pg9xgl

Best regards.

make days in next month selectable

Hi.
Because I can't select the days of the next month it seems that when its the last day of the month the user can't select anything else.
Is there a way to make these days of the next month clickable, so the problem disappears? :-)

Thanks!

concat months and years

Hi.

Is it possible to add a option to concat months and years?

Here's why:
In my picker setup I have two instances of dpicker for picking a timerange.
There is a max for both pickers. You cannot pick any further than 6 months in advance.
So in the months select field there are a maximum of 6 entries.
Adding a year select field would add extra complexity for the user as I want the picker to be as simple to use as possible.

I imagine the concat field to display something like October 2017, November 2017, December 2017, January 2018 or October '17, November '17, December '17, January '18

iOS: can't change time or month

Hi.

When I try to change the time or the month and tab on these select fields the main input-element gets focused and the normal qwertz-keyboard shows up.

I tried to make this input readonly, than no keyboard appears – doesn't help.

Any chance you can fix this?

(This happens under iOS10)

[WIP] Move datetime from core

Add month navigation with directional arrows

A picker without a year field (e.g. order: ['time', 'months', 'days']) would profit from an arrow navigation for selecting the next/previous month. This would allow pickers used for short-term selections (e.g. max next 3 months), which don’t need a year field, to still jump to the next year.

I made a quick mockup:

hideOnDayClick = false doesn't work anymore

it always closes after clicking the day.

problem with min and steps

Hi.

First of all: THANKS!

I think there is a little bug:

Let's say it's 14:58right now and I start the picker with picker.min = moment()
Than the select field for the hour is 14and the minute select is empty, because there is no step left for the hour 14.
This happens just for sameDay

I think you need something like this (modified for individual steps of course, mine is for step = 15):

function roundValue(val) {
    var m = (parseInt((val.minutes() + 7.5)/15) * 15) % 60;
    var h = val.minutes() > 52 ? (val.hours() === 23 ? 0 : val.add(1, 'hour').hours()) : val.hours();
    return val.hours(h).minutes(m);
}

Another problem:
When it's 15:05 and that's also the min. Than the minutes-select has the options 15, 30and 45. Changing the hour to 16 doesn't enable the option 00.

Rounding with steps

I think you're rounding wrong with steps:
Example 1: min=03/08/2016 14:37, min=03/08/2016 14:37, step=15
Value in the Picker: 03/08/2016 14:30, but in the minute selector the only option is 45.

Example 2: min=03/08/2016 14:38, min=03/08/2016 14:38, step=15
Value in the Picker: 03/08/2016 14:45. correct.

Safari: No redraw of select field on month change

Only on safari and Mobile Safari (iOS). When the user picks a day that is part of the next month, the ui of the picker changes correcly to the next month, but the select field doesn’t. Funnily, the DOM tree is correct, but the redraw of the browser itself is not in sync. See screenshot:

Funnily, when you change the browser size, Safari does the redraw correctly.

steps not correct in v5

Hi.
I tried this in your demo:
When u set min to "May 23, 2017 1:59:00 PM" , step=30 and now want to select the "May 23, 2017 2:00:00 PM" the options for the day include 13:00 and 13:30.
When you trie to select them strange things happen.
14:00 gets the only option afterwards, and in my own case only :30 times are in the select-field. (step still 30)

Can you have a look?

Add t docs "why dpicker?"

Especially for a plugins as ubiquitous as a date picker every new contender should have some notes on why people should use it over other date pickers and what sets it apart from the most popular ones

allow moment.weekDaysMin() for "Su Mo Tu We Th Fr" headers

You're currently using weekDaysShort(), but for smaller calendars it might be nice to have the option to render shorter day headings too.

Input[type=date] polyfill support

https://www.w3.org/TR/html-markup/input.date.html

min and selectable dates

Hi.

When min is set the days before that day still get the class dpicker-active.

Day in month table no marked as active, when using moment.timezone

Hi!

The problem is this line
let currentDayModel = new Date(currentYear, dayMonth - 1, day)

dpicker/src/dpicker.js

Line 507 in ce8d2aa

let currentDayModel = new Date(currentYear, dayMonth - 1, day)

Because after that u are using the moment-adapter to compare currentDayModel with min and max using isSameOrAfter / isSameOrBefore

When moments timezone is set to another timezone, the day u are comparing is not on the day currentDayModel is.

5.0.0 - Breaking things :D (not released yet)

Recently I was thinking in how I could speed up the rendering of DPicker. I ended up feeling that the whole vdom part I initially implemented (first through maquette, then by adding an improvised h function) was too much. I also happen to discover bel and nanomorph which are both really fast and well-optimized.

Therefore, I implemented them in the development branch to see how it goes, and it goes well :D. Thanks to the yo-yoify package, the DOM elements are bundled and we even don't need bel as a dependency in the dist files (it basically transforms bel<foo> in document.createElement('foo')).
The drawback of this is that it will slightly increase dpicker size (because of the yo-yoify process). IMO the size increase is irrelevant compared to the performance improvement.

For now I'm waiting for choojs/nanomorph#54 to be merged or this is a no-go :|. Currently the development branch uses my fork and tests are all green. The only breaking thing is that DPicker.h has been removed, therefore old DPicker modules will break.

@florianpircher please let me know if you still use #19! It'll totally break if you wanted to upgrade and I'm considering adding it to the dpicker modules :).

ping @stereonom @thcolin

References:

• nanomorph
• bel

Cant get ngModel value on observing the field.

Cant get ngModel value on observing the field.
attrs.$observe('ngModel', function(value) {
//here value returns variable name instead of value of the variable.
}

Touch friendly behavior

DPicker can be closed by clicking outside of the picker. This doesn’t work when touching outside of the picker. I tried implementing this by adding

document.addEventListener('touchend', this._events.hide);

after line 144 in dpicker.js. This does work, the only problem is, that the date/datetime input field is still focused after closing the picker, so all mobile OS are still showing the virtual keyboard.

flickering select field in chrome and opera. browser bug?

When I open the select-field it disappears for a short moment.
This happens in Chrome 52 and Opera 38.
It's not happening in Safari 9.1.1 and FireFox 47, so perhaps just a browser-bug?

Problem with steps

When it's 15:46 and step=15 you get 16:00 as start value. correct.
But in the hour selector 15 is still an option.

Customizable DOM ordering

For internationalizations sake, making the order of input elements customizable would be a great feature. Some cultures notate the year before the month, some the month before the year. Sometimes selecting a time is more important than selecting the date, so the time-input-fields should appear on top of the picker. One possible way of implementing this feature is by specifying the order at creation time, like:

var dp = new DPicker(container, {
  model: moment(),
  order: ['time', 'month', 'year'], // or ['H', 'i', 'm', 'Y']
  // ...

drop maquette

let users decide which lib to use

24hour mode: selecting 12 returns 00.

Using the unmodified 3.0.1

When selecting 12as hour the picker takes 00 as the value.

undefined state when changing year

Hi.

I used your demo to reproduce this bug:
set 'min' to '1. August 2017'
set 'max' to '1. February 2018'

(It works with everything smaller than a year in advance)

Now try to set year to 2018.
The displayed date is now 1. August 2018 which is incorrect, as it is forbidden by max
The month I can choose dates from is January, but I can't select anything.

min and sameDay

I set min = moment() and let's say it’s 15:40 I get these options for hour: 15, 16, 17… 23.
But when I choose 16and reopen the select the option 15 disappeared. Selecting 17disables 15and 16…

Add aria-invalid

5.1.0: dpicker gone.

Hi.

My Picker is gone.
I set display: true while initialising dpicker, but nothing get rendered (only the input)

DPicker removes attributes from <input>

On interaction (opening/closing the picker, selecting a date, …), DPicker removes many attributes (such as class or data-*). I want to use classes to style the field of the DPicker for my current project, but the classes are removed on every change.

ReferenceError: Can't find variable: assert

Using dpicker.min.js at version 5.0.8, the picker can not be opened. Instead, when clicking on the input field the following error is displayed in the JavaScript console:

ReferenceError: Can't find variable: assert

I managed to bypass this error be defining a global assert object:

window.assert = { equal: () => {} }