qodesmith / datepicker Goto Github PK

Hello again!
Been using your datepicker's in our app for a bit now, and I absolutely love them. The only thing I'm asked consistently is if there is a way to change the overlay behavior so that once you type in a year, you are next shown the months, click your month, now shown the dates for that month. This would solve users that are in December having to click the arrow 12 times to get to December. Is something like that feasible?

Maybe this is actually a feature and I just don't understand the point of it, but why is manual typing of the date prevented? More specifically, why is the manual input limited to 4 numbers?

I can see this making sense in the custom "Year" input, but why not have the ability to let the user enter a custom date in the field?

Hello. Thank you for this plugin.

Is it possible to disable multiple days of a week with disabler? For example, a location is only open on Mondays and Thursdays so cannot accept payment on other days, therefore disable (noWeekends:true and disabler: multiple days). I think I must be reading the docs wrong.
Thank you
Edit: Yes I was reading the documents wrong. I should have kept looking. thank you.

Hi,

I think overlayButton and overlaySubmit got mixed up!

Dion

Nothing broken, but the class names are so common ['controls', 'datepicker'] they really need to be namespaced to fit in universally w/other peoples' work while not breaking visually.

Recommend: 'qds-datepicker', 'qds-controls', etc.

Hi, in 4.0.10 you have removed babel preset-env from your webpack config claiming that it's no longer used. In fact it was - compare your minified builds from dist between 4.0.9 and 4.0.10. The latter doesn't work on IE because arrow functions appeared in the compiled code (that should be ES5-compatible). I think you should bring it back (and by the way switch to a different building tool such as rollup - webpack seems to be an overkill there).

With reference to #19, #43, we've found out that Array.find is not supported. MDN includes a simple polyfill, which could be used, or the code could be adapted to use .indexOf instead.

The code that uses .find: https://github.com/qodesmith/datepicker/search?q=.find&unscoped_q=.find

I can prepare a PR if you'd like.

I used in React, when set a State to true

ReferenceError: Cannot access 'datepicker' before initialization

My code:
const datepicker = datepicker('#birthDay');

here is my codes

var options = {
minDate: new Date(),
position: 'c',
customMonths: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
customDays: ['周天','周一','周二','周三','周四','周五','周六'],
disabledDates: [new Date('27/6/2018'), new Date('28/5/2018')],
onSelect: function(instance) {
// Show which date was selected.
console.log(instance.dateSelected.toLocaleString());
}
}
var picker = datepicker('.date',options);

Right now it's not possible to set custom labels for month or days.

Let's get datepicker to also be a date range picker!

Currently it's a really hacky process to make two datepicker instances function as a single date range picker. Within the two-calendars branch I'm currently working on adding date range functionality. You'll be able to tie 2 pickers together to form a range picker.

Stay tuned!

I'm trying to use the plugin with webpack. The datepicker is loading in vendors.js and in app.js I call the datepicker but i'm getting this error datepicker is not defined. Any help?

I don't understand why don't create reset button date after user selected date? How reset date. If user want delete all dates on calendar?

I've just implemented datepicker on a form, but it appears to be highlighting August 23 as today's date, as opposed to July 23 as it should. An off-by-one error?

Hi! Thanks for the great plugin!

I can't seem to find a way to set Monday as the first day of the week. Is it possible?

On Android it works perfectly, but on any ios devices, it doesn't work at all... Was inspecting in browserstuck but there is no error or anything it just not trigger or instanciated datepicker I guess. Any ideas?

Guys hi,

As the title says i am wondering if i can achieve vertical scroll with this lib

Something like this.

I don't see a license listed anywhere, is that on purpose?

When using the input to try to trigger the picker on iOS (Safari and Chrome) the input is simply focused instead of displaying the picker.

I have tried adding readonly as well.

Possibly related #13

I'm using the class .fancyDatePicker (as I prefer yours over the one included in Materialize-CSS, and theirs already uses datepicker), and when you make multiple instances on a page only the first one works. The rest perform no action on being clicked. I realise I could make multiple invocation for each instance, but it'd be nice if they'd all work with the single invocation.

Context

I'm making an app with express/node that's largely around CMA's (Comparative Market Analysis), so it's really common to have stuff like Sale Date, Date Listed, etc. Currently looking at a form with 8 instances of .fancyDatePicker.

Your Environment

• Version used: Most Recent
• Browser Name and version: Chrome, Most Recent
• Operating System: Windows 7

https://github.com/qodesmith/datepicker/blob/master/datepicker.js#L661

const addRemove = badDate ? 'qs-add' : 'qs-remove';

Should be:

const addRemove = badDate ? 'add' : 'remove';

After updating to the new 5.0.0, after the datepicker component is created first time on init it opens automatically.

datepicker.hide() is not working for the first time on init, then works normally

I'm trying to use the date picker with etch and its not firing the onSelect event.

My code looks like this:

    datePicker(this.refs.input, {
      dateSelected: new Date(this.value),
      onSelect: function(){
        console.dir('selected')
      },
      onShow: function(){
        console.log('show')
      },
      onHide: function(){
        console.log('hide')
      }
    })

If I watch the console show and hide get logged but onSelect does not. It also doesn't update the input with new value.

Hi,

I really love your datepicker. I tried a lot of them and either they are to bloated or they don't fit in my garbage css styles. This one is great, fits in real nice without hassle.

Though I have an issue, when I enter the year and press return it dismisses the dialog and submits the form. Tried to do a event.preventdefault onHide. But that didn't help.

Regards,
Dion

I have some IE9/10 users and the datepicker doesn't seem to work - works fine on Chrome. Is this a known issue?

Would be a great feature if you could disable the year overlay using a simple boolean in options.
Great work on the picker btw, its really lightweight and can be used in other frameworks :)

Please add change log with your releases

Thank you

The minimal example does not work. It requires a dateSelected.
The minimal example is:
var picker = datepicker('#dp', {dateSelected: new Date()});

This is how I do it, but it would be handy as an option.

var startDate = document.querySelector('#start-date');
var endDate = document.querySelector('#end-date');
var onEv = (type, el, handler) => el.addEventListener(type, handler, false);

if('ontouchstart' in window) {
    // Device is touch-enabled so change the input type to "date" in order to get the date keyboard
    [startDate, endDate].forEach(function(el) {
        onEv('touchstart', el, (ev) => ev.target.type = 'date');
        onEv('focusout', el, (ev) => ev.target.value || (ev.target.type = 'text'));
    });
}
else {
    // Device is not touch-enabled so we load the datepicker
    var dateStart = startDate && datepicker('#start-date');
    var dateEnd = endDate && datepicker('#end-date');
}

Here we are using the native date keyboard instead of the datepicker on a touch-enabled device:

The following issues presented themselves when running this through an accessibility tool:

Is it possible to get aria-labels applied to these elements?

It doesnt appear to work with <input type="date">

I'm using the class .fancyDatePicker (as I prefer yours over the one included in Materialize-CSS, and theirs already uses datepicker), and when you make multiple instances on a page only the first one works. The rest perform no action on being clicked. I realise I could make multiple invocation for each instance, but it'd be nice if they'd all work with the single invocation.

Context

I'm making an app with express/node that's largely around CMA's (Comparative Market Analysis), so it's really common to have stuff like Sale Date, Date Listed, etc. Currently looking at a form with 8 instances of .fancyDatePicker.

Your Environment

• Version used: Most Recent
• Browser Name and version: Chrome, Most Recent
• Operating System: Windows 7

Is it possible to have a year option that shows all of the year base on the max date?

Is it possible to translate the '4-digit year' placeholder and Submit text in the year overlay?

It appears that some devices do not support the use of includes for looking for a dom element.

In the debug version on line 644

const onCal = path.includes(calendar);  

will not work on some devices.

A simple fix is

var onCal = calendar.contains(target);  

which seems to work on all devices I have tested.

The datepicker is working great for me everywhere except on iOS (safari and chrome). Whenever I try to click on a date it does not register and will not dismiss once open on the input.

When using this library with another require style library such as dojo, i know.. forgive me, defining the library after or following the dojo library causes a multiple define error to be thrown.

In your typical index.html file:
src="dojo"
src="js-datepicker"

ERROR

Reversing the order so that the datepicker is first resolves the issues.

This is a great datepicker, ideal for what I needed. However I had a problem positioning the calendar on a small device such as a mobile phone in portrait mode where all of the current options often end up with part of the calendar off screen.

I have modified the code to include a 'fixed' positioning option that positions the calendar in the middle of the view port. I have attached the
datepicker.zip
modified version in case you are interested in including the option in the base (you may be able to improve on my method as well).

Cheers.

Not an issue, rather a suggestion: by default, when displaying the days within a month, there are empty spaces on top and on bottom on the location where the days of the previous and next month should be. Could there be a way to display those days (in a different markup, like how weekends can be given a different markup) through a setting? Sometimes, design-wise, one could want to enable this.
In that case, an additional suggestion is to also be able to click on a day in a previous/next month and navigate to that previous/next month.

I did look for the doc about this but it does not seem to be possible,
still I'm asking: is it possible to programatically show the calendar?
Something like

let cal = datepicker(".myclass");
cal.show();

The goal is to include the calendar in a more complex user flow than a simple click on an element...
Meanwhile I may just simulate a click to the bound class but it is not optimal.

Thank you for your great job!

We have a following problem: set a input as disabled does accessibility ignores the field. To avoid this, I set input field as readonly, but click event still open datepicker.
That's a way to remove a click listener by demand, without remove datepickers instance?

In the below image i have selected 1st dec 2018 date

then i de-selected it

and again when i select 5 april 2019
it is changing only day not month and year

please look into this issue

This would be similar to the already existing disableMobile, but it would disable the plugin if the browser natively supports the type="date" field of an input.

Basically, the plugin will become just a fallback in case the browser doesn't have a native date picker solution.

Possible code for checking if the browser supports type="date":

var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}

if (!isDateInputSupported())  // or.. !Modernizr.inputtypes.date
  $('input[type="date"]').datepicker();

Source: https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

Would you consider a PR for this?

Hello. Thanks for your package.

But, I click 'qs-arrow' selector and this code don't work

onMonthChange: function(instance) { console.log(instance.currentMonthName); }

Besides, I think you need to create a property 'disableOutMonth'. This property prevents you from changing the date range that is declared 'minDate' and 'maxDate'.

Example:

{ minDate: new Date(2018, 5, 14), maxDate: new Date(2018, 6, 15), disableOutMonth: true }

When user click 'qs-arrow' selector user has access only June and Jule month.

I'm useing datepicker with the following settings;

datepicker('input#datum', {
	minDate:   new Date(),
	startDate: new Date(),
	startDay: 1,
	noWeekends: true,
	formatter: function (a, b) {
		var day = (b.getDate().toString().length === 1) ? "0" + b.getDate() : b.getDate();
		var month = (b.getMonth().toString().length === 1) ? "0" + b.getMonth() : b.getMonth();

		a.value = day + "-" + month + "-" + b.getFullYear();
	}
});

Because the first day is monday, now the monday and sunday are disabled (https://www.dropbox.com/s/1039sp29xscnddc/Schermafdruk%202018-07-18%2014.15.58.png?dl=0)

Am I blind? I dont see where to set the date format.

Hello. Thanks for your package.

But, I can't send date array, which disable this date. For example I want to exclude 11 April and 13 June. If I will can to use options
dateDisabled: [ new Date(2018, 3, 11), new Date(2018, 5, 13) ] and this date switch to qs-disabled, I will enjoy 👍 )

IE doesn't support this method. Any workarounds?

Thanks!