Code

Discussion on Caleran - Date Range Picker

Discussion on Caleran - Date Range Picker

By
Cart 627 sales

tpaksu supports this item

Supported

This author's response time can be up to 5 business days.

287 comments found.

There seems to be a bug with the isDisabled function when it uses the for…in loop.

When Caleran does an isBetween check when range.start and range.end are undefined, it returns true, which is wrong, since the disabledRanges are undefined. It also causes the clearInput function to fire and clear the related input text box.

It also happens when one of the dates in the date range is either 1) Today or 2)’10/10/2017’, I have not managed to determine which is the case. All other dates doesn’t seem to have a problem.

By amending the function to use forEach, it seems to resolve the issue:

isDisabled: function (day) { if (this.config.disableDays(moment(day).startOf(“day”)) === true) return true; this.config.disabledRanges.forEach(function(range) { console.log(range, ‘range’); if (moment(day).isBetween(range.start, range.end, “day”, “[]”)) return true; }); return false; },

Hope this fix can be applied to next release soon!

Hi redairship,

I looked here : https://jsperf.com/for-vs-foreach/37 and decided to convert it to standard incremental for loop. Can you test it with standard for loop instead of forEach?

yep looks like it works nicely with a standard for loop – since it doesn’t try to enter the empty array hence avoiding running isBetween on the undefined range (which is probably the root cause of the bug over at moment.js as it seems to be processing undefined ranges wrongly)

I changed all the for..in loops to for loops. Thanks for letting me know again.

Is possible to set calendar to display always at the bottom of an input ? Currently calendar position changes depending on the viewport size. We tested it on various resolutions and viewport sizes on the desktop, results differ. Sometimes it displayed at the top, sometimes at the bottom.

Hi Volkan,

It automatically sets it’s direction to stay visible on the screen. You need to remove some code from “setViewport” function to achieve that. I’ll add an option to prevent that on the next release.

Hi Volkan,

In the last update I added autoAlign parameter to enable/disable the auto alignment feature. You can now disable that. And also I added left/right positioning options.

When Caleran is in a DOM with other html input elements, it prevents the input elements from being ‘checked’ (won’t add attribute ‘checked’ onto input element). Can you please look into this issue? This is crucial as my DOM relies on many forms and work-arounds using Jquery to manually add attributes are troublesome.

Hi samjeon, I found the bug causing that, If you are using version 1.3.3, on line 1190 there is:

this.stopBubbling(event);

remove that line.

I am wondering how to submit a form when the user selects a date range. I am using this for mobile and I am getting the cancel and apply buttons. Anyway, to get the form to submit when the users clicks apply?

Hi gemckay, do you want this only on mobile or all environments?

You can use something like this:

$("#caleran").caleran({ onafterselect: function(caleran, start, end){ if(caleran.globals.isMobile){ // you can remove this to make it work on all environments. caleran.$elem.parents("form").first().submit(); } } });

Hey tpaksu, thank you for the new release and the fixes which come with it! I have some questions,/wishes :) :

I need to change the start- and the end-date separately after clicking on a button ( which is part of the form or maybe part of the plugin itself). For example: After i select a daterange, i want to only change the startdate, so i click on a button “Change startdate” and then i can select only the startdate, without the need to select the entire daterange. The same functionality I would like to apply on the enddate.

Also, i would like to change options after the initialisation of the plugin. In my case, I want to disable dates, which come before my selected startdate after selecting the first date of the daterange, so it is only possible to select dates in the future of the first selected day.

If theres a way to do this, i would be very grateful, if you could show me how. If its not possible so I would like to suggest this two functionalities as improvements. :)

I hope my “questions” are understandable for you! :)

Thanks in advance for your reply!

Yes, I prepared that for you. You’re welcome. Can you rate the plugin btw?

Sure! Done!

Thanks very much :)

Hi,

GREAT plugin! Implemented in a project and it’s working brilliantly.

We have had an accessibility test run on the project and the report has flagged up one particular problem with the calendar – the fact that the calendar days are not selectable when using the keyboard. They say it would be prudent to give less able users the ability to tab through the calendar controls.

What do you think? Do you think this would be achievable? Is this something you would consider looking into as part of an update to the plugin?

Many thanks

Hi golinldn,

Keyboard navigation is already implemented in this plugin? Can you try this:

1. navigate to http://rettica.com/caleran/docs/readme.html

2. click anywhere on the first inline calendar there on the header (to gain focus on the control)

3. press:

a. the direction keys  (day navigation)
b. page up/page down (month navigation)
c. shift+page up, shift + page down (year navigation)

And tell me if it’s working. Maybe your version is older than the implemented one?

Hey, i find the caleran is a really great plugin!

I would like to report a bug: If you use the option “container” and use a container which is in a html-form, the buttons “apply” and “cancel” will trigger the submitting of the form, even if another button is set as type=”submit”. I think the buttons “apply” and “cancel” should contain the type=”button”. This would solve the problem :)

Hey tpaksu. Thx for your quick answer and the fast solution! I have to report another bug, I discovered: On Ipad and Ipad Pro the click outside of the opened dropdown does not close the dropdown, or closes it very inconsistently. On Desktop-Browsers it works without problems!

Hi trick17media, I don’t have an apple environment to test it upon them, I use virtual machines or chrome developer tools’ responsive view to test them. I’ll find one and check. Thanks again.

Thank you, tpaksu!

Hi,

I would like to get advise on how do I change the date picker settings after it’s called? Example: $(”.caleran”).caleran({inline: true, startOnMonday: true});

I would like to achieve the following: If a “change” button is clicked, it will change the date picker’s settings. I tried the following, but it couldn’t work.

Example, change settings to singleDate: $(document).ready(function() { $(“change-button”).click(function () { var caleran = $(”#my-date-range”).caleran; caleran.config.singleDate = true; caleran.reDrawCalendars(); }); });

Please advise… Thank you!

Hi there is an example in the documentation which demonstrates something like what you want:

http://rettica.com/caleran/docs/readme.html#range-single-switch

Thank you! Yes, that’s what I’m looking for… Appreciate your advise.

You’re welcome

Hi tpaksu,

Amazing package, so much better than the other daterange pickers I've used.

One question, is there a method to reset the calendar? Use case is when one toggles a reset button, it should reset the value and the interface on the Caleran calendar.

Thanks.

Try setting caleran.globals.firstValueSelected to false when resetting.

Thanks! Works!

Hi samjeon705, caleran has a clearInput method now with the last update, which you can use to clear the selection.

asking abut caleran , possible to add multiple date disable , lets say , 2017-09-14 , 2017-09-15 , and weekend disabled , the reason i had data json for public holidays

Hi, you can use the method demonstrated in this section:

http://rettica.com/caleran/docs/readme.html#custom-disabled-ranges-with-array-

i mean , days disabled not range , because some of day need be disable with multiple value provided

You can also use this to achieve what you want. If you define the end dates equal to the end dates, you would have a day-disabling system.

using disabledDays, how would I return multiple values?

so if I wanted to disable all Mondays and Tuesdays, I’d need to return day.day() 2 and day.day() 3

Super sorry to bother you. I actually had it right, but of course was missing a comma .

Please ignore this question

Glad you solved it, have a good day.

hey there, this is a great feature. Do you by chance have code around to integrate it in angular2 ? would be much appreciated. If not, I would try and can report back. best

Hi quorak,

I didn’t try it before to integrate with Angular2. But I suppose you can follow the “jQuery plugin usage in Angular” tutorials and achieve what you want.

An example: https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular

or this:

https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular/42295505#42295505

Hi the error of 14 october is happening, please check using an iphone or if you dont have it a mac os emulator or safari web browser using responsive check the image this is in your website https://i.imgur.com/qcCotMg.jpg

I tested it again on an iPhone 7 with iOS 10.3.3 firmware but also couldn’t reproduce it..

hi edrdesigner, I found the reason of that bug, it’s happening because the daylight saving time. (on DST, current day -> add 1 days -> go to start of the day = current day and it goes on). I’ll fix that and you won’t have an issue in next february ;)

Thanks :D

Hello Tpaksu, I have a minor issue,

I have this issue in your example “Linked Single Date Pickers”

The issue is when you select any date starting from the next year 2018, the second calendar starts with the selected month but in current “year” (2017).

I tried to investigate into this, and found that when you apply the param “format”, it breaks the second calendar and when removed, it works fine.

$("#caleran-ex-6-5-start").caleran({
  format: "DD MMM", // This is the flag which make it breaks
  singleDate: true,
  onafterselect: function(caleran, start){
    var end = $("#caleran-ex-6-5-end").data("caleran");
    end.config.startDate = moment(start);
    end.config.minDate = moment(start);
    end.updateInput();
    end.$elem.click();
  }
});
$("#caleran-ex-6-5-end").caleran({
  singleDate: true
});

Any suggestion or fast fix for this ?

Hi jinkazama, I’m on vacation now and I won’t have access to a computer until next Tuesday. I’m answering this on my phone and I don’t have a dev environment on my phone. :(

Hi jinkazama_m, can you try adding this line to showDropdown function just before the redrawCalendars call (line 1143)?

this.globals.currentDate = moment( this.config.startDate );

Try it again and let me know.

How could I add enabledMonths function or there is some way to do this ?

Hi, there is a bug when the month is october, it gets to day 14 and repeat the day

Use mozila or safari to test in chrome it is ok

I couldn’t reproduce this. Can you confirm that it is still present?

Hey there.

I just started using Caleran, and I have to say, I am very impressed. I’d normally just code things like this myself, but the amount of work and thought you’ve put into Caleran is obvious.

The only thing Caleran is missing that I need is the ability to have a custom data attribute on individual dates.

The purpose would be to store custom prices in a booking calendar.

Is this something Caleran can do, and if not, what would be the best practice to add a custom function similar to disabledRanges to add this attribute?

Thanks in advance, Dylan

Hi tpasksu

thank you for such a speedy response.

It’s been a long few days; I never even considered doing it that way and I think it would work.

The way I was thinking is that if each date had a custom data attribute then I could use that to calculate a total price or any other manipulation before selections even occur.

example: $(".caleran").caleran({ customAttributes: [{ start: moment("2017-08-14", "YYYY-MM-DD"), end: moment("2017-08-17", "YYYY-MM-DD"), data: "150" } ], onafterselect(caleran, start, end){ // function goes here to check each of the selected days and get its custom data attribute });

One benefit of a way like above would be doing things like showing the data attribute value on date hover and stuff like that.

Just some food for thought, thanks again for your response!

Yes that would be nice to have but currently it doesn’t have this option. But you can extend the drawCalendarOfMonth method to achieve that easily.

Cool, thanks!

Hi, first of all it is a great plugin, thanks

i would like to ask can i change disable range color multiply like this http://prntscr.com/g7a2b6

Thank you

Hi faython,

You can style the `.caleran-disabled-range` class to achieve that.

Hey…For some reason the arrows aren’t showing for me when I use the latest script in the latest version….I’m referring to the arrows when you click on the year number (to help you navigate through years), I can see it on your demo though

Do you have a live url? I couldn’t understand what might be wrong..

just messaged you :-)

and I just replied :)

Hi!

I can’t initialize the datepicker with an empty starting value. If i set the option “startDate” to null, false or an empty string, it always initialize with predefined value of todays date.

How can i solve this?

Greetings

http://rettica.com/caleran/docs/readme.html#empty-on-initialization can you check this example? Do you have anything different from it?

Nice, it works! The option “startEmpty” doesn’t exists in my version. I updated the datepicker and not it works! Thx!

Glad you made it work. Have a nice day.

How to do that in the mobile version does not close automatically when selecting a range?

You can use oninit event to check that:

$("#elem").caleran({ oninit: function(caleran){ caleran.config.autoCloseOnSelect = (caleran.globals.isMobile) ? false : true; } });
by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey