baremetrics / calendar Goto Github PK
View Code? Open in Web Editor NEWDate range picker for Baremetrics
License: MIT License
Date range picker for Baremetrics
License: MIT License
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.
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.
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
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 ;)
With moment locale DE the parseDate wont work cause of toISOString (no moment timezone)
Set moment.locale('de') and the presets dates are wrong.
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).
Please resolve this asap.I am using core jquery as well.
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!
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.
how can I change first day of week from sunday to monday ?
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?
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! π»
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
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")
//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();
}
});
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')
;
Just as an enhancement, please provide the ability to get translations, maybe via external files
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.
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.
Is there a way to disable weekends (saturday and sunday) in the calendar?
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>');
});
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
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.
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).
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.
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
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:
Cheers,
Thomas.
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.
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!
I think the feature that would allow user to select a week instead of a day will be pretty useful
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 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]"
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
`
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.
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.
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...
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?
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.
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
Hi,
I want dynamic dynamic earliest_date and latest_date.
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.
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?
When the user changes only the first date and then clicks out of the datepicker the callback function is never called
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.
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
this.earliest_date
or this.latest_date
)"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
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.