Is there a way to disable weekends (saturday and sunday) in the calendar?

I am unable to find where to change the moment locale of the calendar.

Where do we call moment.locale to change the calendar language? My attempts have failed and the calendar stays in English.

Thanks!

How cool would it be to be able to enter dates like today or 3 months ago for quick entry of dates based on sentence logic! Not sure how easy or feasible this would actually be though.. could be a real can of worms with all the possible ways folks may want to enter those dates. Something worth looking into though.

Wow - this date picker is vurr' nice. You guys are amazing.

I was thinking maybe one thing that would be nice is when the keybord cursor is over the day of the month, let's say, and if you press up/down on the keyboard if that could nudge the number down/up that might be cool.

Samesies for month/year too.

When preset dates are not overridden the dates provided are wrong.

Last 3 Months - gets 3 months prior to selected end date not today's date as would expect.
Last 6 Months - gets 6 months prior to selected end date not today's date as would expect.
Last Year - gets 1 year prior to selected end date not today's date as would expect.

Hi there,

package.json should have more information, one of them that I believe that it's essential is the license.

Could you add the most basic information on it?

Thanks

Problem

When using locales with the calendar we get some weird quirks & UI weirdness.
For example if we set the momentjs locale to en-gb then click the second date in the date range and you will see no dates being shown.

Additionally if you page through the calendar months into the past, some months will load & others will display the same problem of no dates for that month.

If you need further details or any steps to replicate further then please let me know.

Thanks,
Warren

JavaScript Console Stack Trace Log

Uncaught RangeError: Invalid array length
Calendar.range @ calendar.js?umb__rnd=7.4.3.564337076:802
Calendar.calendarArray @ calendar.js?umb__rnd=7.4.3.564337076:666
Calendar.calendarCreate @ calendar.js?umb__rnd=7.4.3.564337076:614
Calendar.calendarOpen @ calendar.js?umb__rnd=7.4.3.564337076:439
Calendar.$.on.click @ calendar.js?umb__rnd=7.4.3.564337076:81
x.event.dispatch @ jquery.min.js?cdv=564337076:5
y.handle @ jquery.min.js?cdv=564337076:5

I get the following error when using the Calendar DateRange Picker when the user's moment locale is set to en-gb with moment.locale("en-gb")

Current code

//Breaks if set to en-gb (this comes from an API, that fetches the current users locale)
moment.locale("en-gb");

var dd = new Calendar({
    element: $(".daterange--double"),
    earliest_date: 'January 1, 2000',
    latest_date: moment(),
    start_date: moment().subtract(29, 'days'),
    end_date: moment(),
    same_day_range: true,
    callback: function () {

        //Date update/changed

        //Parse the dates from this component to Moment dates
        var start = moment(this.start_date);
        var end = moment(this.end_date);

        //If the item passed to this directive is an object (not string or array)
        if(angular.isObject(scope.ngModel)){
            //Set the properties on the model passed in
            scope.ngModel.startDate = start.format('YYYY-MM-DD');
            scope.ngModel.endDate = end.format('YYYY-MM-DD');
        }
        else
        {
            //If we do not have an object perhaps yet
            //We can set the dates on the filter model
            var dateFilter = {};
            dateFilter.startDate = start.format('YYYY-MM-DD');
            dateFilter.endDate = end.format('YYYY-MM-DD');
            scope.ngModel = dateFilter;
        }

        //Update scope - so anything watching it can change as needed
        scope.$apply();
    }
});

Hi @tyvdh,
We would like to add you library to cdnjs hosting
Which files we should host?
Thanks

Now callback event is being fired only when value is set for single calendar.
How to catch change event when value is deleted?
Thank you.

I'm trying to use turbolinks in our application and I can't figure out how to make it so I don't get multiple calendar objects. Is there a way to destroy the calendar? I've tried doing like

if window.calendar == undefined
      window.calendar = new Calendar(
        element: $('.daterange--double')
        earliest_date: moment(createdAt)
        latest_date: loadEndDate
        start_date: loadStartDate
        end_date: loadEndDate
        callback: ->
          updateCharts(@start_date, @end_date)
        )

The issue is the Calendar no longer works after I do that...

"This month" is added to custom presets when the month is older than a few days.

This functionality should probably be limited to the default presets, not for custom presets

The whole point of moment is that it normalizes new Date() calls. Instead replace the calls with moment(). All operations should be moment operations.

For example new Date('January 1, 1900') becomes moment( [1900, 1, 1] ) or moment( '1900-01-01', 'YYYY-MM-DD');

how can I change first day of week from sunday to monday ?

In a Double Calendar if you change the start date it is correctly updated and the calendar then expects you to select the end date. The issue appears when you don't want to change the end date and you just click outside the calendar: the callback function is not called and thus your code doesn't do it's business.

In Firefox(60) clicking outside the calendar gives following error in console and does not close it:
f.path is undefined
error on this line (Calendar.js line 189)
var contains = self.element.find(f.path[0]);

event.path is non-standard; standard seems to be event.composedPath()
Fixed it locally with:
var path = f.path || (f.composedPath && f.composedPath()) || [f.target.parentNode,];
var contains = self.element.find(path[0]);
Edge does not support either so faked a path with event.target.

Could you publish this to npm? I think the only thing that might be needed in package.json is a "main" entry pointing to your Calendar.js file.

Hi,

I want dynamic dynamic earliest_date and latest_date.

In my use case I am doing date range reporting, with month to date being the default option. When the system sets date for start and end date as the same day on the first day of the month, we get an invalid date range error when trying to select a new date. I would expect that even on a date range, you ought to be able to select start and end date to match sometimes, e.g. I only want to see one day of data, rather than build something to switch to single calendar if you want to do that.

Hey, the library is awesome, thank you for sharing!

This maybe is more a question than an issue, but have you considered registering the package in Bower?

Hi!

Thanks for sharing this awesome tool!

The preset range, like last month, are a really great idea.
It would be great if we could set:

• Future range: for event, travel or hostel website, past dates does'nt matter
• Customizable: for some activities 1 month is already big

Cheers,
Thomas.

Ran into a strange issue today when testing i18n changes in French. Might be related to #73.

The issue is that calendarCheckDate is erroneously creating a valid moment in some non-English locales (at least when using the default date format of MMMM D, YYYY). In my case, that meant all my preset dates were turning into Jan 20th. Seems like it could be a bug in moment (didn't see any after a cursory check).

Here are some examples (using moment) of the behavior I'm seeing.

Can the preset click handler just directly create moments instead of calling calendarCheckDate? Seems like the presets will always produce ISO 8601 date strings. This seemed to have fixed it in my fork.

Thanks.

Any particular reason you used contenteditable divs instead of traditional form input elements to hold the actual dates?

Doing it this way makes it harder to submit the dates through a regular form submit. Right now I'm doing it by syncing up the selected dates with hidden inputs within the form. Not super hard but I was wondering the advantages/disadvantages of not using inputs?

I'm having a hard time getting the open source calendar working in my application. It says moment and Calendar is undefined. I installed moment via npm install moment --save and I copied and pasted Calendar.js into my Rails project. Anything pop up recently about the calendar not working?

I think the feature that would allow user to select a week instead of a day will be pretty useful

Please resolve this asap.I am using core jquery as well.

Right now there is a reset file (/dev/sass/vendor/_reset.scss) which overrides browser styling defaults. A custom font-family is also being set on the global body and html elements. This prevents us from easily using the date picker on our site, as we would have to manually override all these changes to the global environment.

Instead of modifying globals like this, could the font family instead be applied to the date picker classes, and the global CSS reset be removed in favor of only resetting styles on date picker specific classes? This would greatly improve the reusability value of this component.

The default presets are relative to the latest-date, but the names relate to the current date ("this month").

Proposed solution:
Define the presets relative to the current date, then limit them to the allowed range, and then include them if they have "enough length"

(or do not specify default presets at all).

I like your plugin. Nice Work.

Just Noticed when you scroll to the previous year using the back arrow for the month.
The arrow to go back forward to 2016 disappears.
Using Firefox 40.0.3 OS X Yosemite

Does not seem like expected behavior.

Thanks for making your plugin available.

Just as an enhancement, please provide the ability to get translations, maybe via external files

Right now if you click the second date, don't change anything, and then click out, the callback fires. The callback should only ever fire if there is something to change.

Hey guys, amazing work on this! I just pulled it into my app and needed to fidget with the css a little bit in order to remove some of the non-daterange styles (body, h1, etc.). Would it make sense to break some of those things out of the css file?

Let me know if you'd like me to PR the CSS file that I scrubbed.

Thanks again!

`
new Calendar({
element: $('.daterange--double'),
earliest_date: '2000-01-1',
latest_date: moment(),
start_date: '2015-05-01',
end_date: '2015-05-31',
callback: function() {
var start = moment(this.start_date).format('ll'),
end = moment(this.end_date).format('ll');

console.debug('Start Date: '+ start +'\nEnd Date: '+ end);

}
});
`

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

The current check for "ago" and "ahead" in the date input will match "Agosto" which is the italian translation for August.
Since the month is not the 3rd word in the date, this means that dates picked in august will revert back to the current date.

I suggest you use regexp with word boundaries instead of simply searching the date string.

Note also that you try to use a "lookbehind" regexp to strip the "st|nd|rd|th" from the day. However lookbehind is not supported in javascript, and this results in any match of "st" including the "st" in Agosto.
A better regexp may be /(?:\d)((?:st|nd|rd|th)?,?/ (it also gets rid of a possible comma after the day when someone enters august 2nd, 2016) For even more accuracy you might also add a word boundary somewhere.

in v.1.0.10, https://github.com/Baremetrics/calendar/blob/master/dev/js/Calendar.js#L189 uses MouseEvent.path(), which appears to be only supported by Chrome. Ran into problems in our test suite with phantom.

Thanks for the calendar picker, love it.

The recent commits that remove the demo app styling from the component styling aren't in the latest tag (1.0.6). A quick update to the bower version and a git tag v1.0.7 && git push --tags would be much appreciated! 🍻

Not meaning to add more params than necessary, but it would be great to choose if the preset menu button is left or right aligned. I've done this in my own fork, if you want to take a look: https://github.com/danieljacobarcher/calendar

For example a string of August would load August 1, [current year] - August 31, [current year]
August 2013 would load the same preset range but for 2013
2014 would load January 1, 2014 - December 31, 2014

Caveats

• Only within preset limits.. otherwise confine to bounds (i.e. this.earliest_date or this.latest_date)

Hi there,

I've realised that it depends at least of three dependencies https://github.com/Baremetrics/calendar/blob/master/public/index.html#L11L13

however the README doesn't mention anything and package.json doesn't have dependencies attribute so it drove me confused to think that it doesn't have any.

Could specify them in README and/or package.json to help people to know about it?

Thanks

When the user changes only the first date and then clicks out of the datepicker the callback function is never called

I tried to select a range of just one day, but I can't seem to. Is this the expected behavior?

When I pass in a value for current_date but also set required to be false I'm ending up with a date picker that has the initial value set to '', which lets the placeholder show up. I think it should set the initial value to be the formatted version of current_date.

I think this line is the culprit.

https://github.com/Baremetrics/calendar/blob/master/dev/js/Calendar.js#L776

It's not available in all fonts.

Rather use an – in the first place and annotate the two dates in separate elements. Also removes the need to translate the dash using css.

With moment locale DE the parseDate wont work cause of toISOString (no moment timezone)

Set moment.locale('de') and the presets dates are wrong.

Right now the first day of the week is set to Sunday as it is used in en_US. But lots of languages, spanish for example, use other day, usually Monday, as first day of the week. We already have text and dates translations/localization which is great but this new feature I think should be a must.

I've tried myself coding this feature but failed. The only thing I've managed to change is the order of the days array (S, M, T, ...) based on moment().localeData().firstDayOfWeek() replacing this code in Calendar.prototype.calendarHTML:

$.each(this.days_array || moment.weekdaysMin(), function(i, elem) {
  ul_days_of_the_week.append('<li class="dr-day-of-week">' + elem + '</li>'); 
});

With this code:

var days = this.days_array || moment.weekdaysMin();
days = days.splice(moment().localeData().firstDayOfWeek()).concat(days.splice(0, moment().localeData().firstDayOfWeek()));
$.each(days, function(i, elem) {
  ul_days_of_the_week.append('<li class="dr-day-of-week">' + elem + '</li>'); 
});

Hello there,

Firstly, thanks for sharing an awesome calendar picker!

I've noticed that if I set the earliest_date to something like 1st Dec 2014 it isn't respected by the 1 Year preset (and others), which sets the start_date to 27 July 2014, for example.

Ciao ;)

i.e. If you format the input dates to just show months (not sure why you'd want to do that but still) the switcher buttons will show "Invalid Date" because they look at the html of the inputs when they really should be looking at actual date objects or strings independant of what's being displayed to the end user.

In Australia, calendars normally start the week on a Monday instead of Sunday. I'd guess this is a problem in other countries.

It would be mildly helpful if there was an option in the settings for the picker to "Start week on… [pick a day]"

Looks like the start date and end date are compared based on their html text value, which is formatted as Month Day, Year. It would be beneficial if it were based on actual Moment(), whether in unix or date. The main reason is that it causes complications when the start date and end date are both the same day (but may want that to be hours/min etc).

Thanks for the great date picker!

Just one nit-pick.

The placeholder text for single dates serves little purpose for the lay-user who is most likely to use the GUI instead of typing in a date.

Also, placeholder text such as Do MMMM YYYY looks a little ugly (and possibly confusing) - it would be nice to be able to overwrite this value, for example, to match other inputs' placeholder values.

Cheers