Code

Discussion on Caleran - Date Range Picker

Discussion on Caleran - Date Range Picker

By
Cart 574 sales
Recently Updated

tpaksu supports this item

Supported

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

282 comments found.

Hello. It seems there is no accessibility support for voiceover utilities with this plugin. I was able to add limited voiceover support for click events of datepicker calendar days with the patch below, but because of how the calendar is redrawn on keypresses, with the focus state staying clearly on the datepicker input, focus never reaches the calendar date elements and the voiceover cannot read the aria-label attribute of the element. Perhaps there is a better way to accomplish. Can we expect an update for voiceover support for more robust accessibility? Thank you!

For reference, this simple datepicker has perfect accessibility functionality for voiceover: https://dequeuniversity.com/library/aria/date-picker.


while (boxCount < 42) {
                var cellDate = calendarStart.middleOfDay().unix();
                var cellStyle =
                    _month.month() == calendarStart.month()
                        ? 'caleran-day'
                        : 'caleran-disabled';
                /* Patch Begin 26 JULY 2022 - ADD ARIA-LABEL FOR VOICEOVER SUPPORT */
                var cellAriaLabel = calendarStart.format('MMMM D YYYY'); // ex: 'July 26 2022'
                /* Patch END 26 JULY 2022 */
                if (boxCount % 7 === 0 && this.config.showWeekNumbers) {
                    calendarOutput +=
                        "<div class="caleran-weeknumber"><span>" +
                        calendarStart.format('ww') +
                        '</span></div>';
                }
                calendarOutput +=
                    "<div class=" " +
                    cellStyle +
                    "" data-value="" +
                    cellDate +
                    /* Patch Begin 26 JULY 2022 - ADD "aria-label" to="" support="" voiceover="" functionality="" in="" limited="" manner="" click="" only="" aria-label="" +
                    cellAriaLabel +
                    /* Patch End 26 JULY 2022 */
                    ""><span>" +
                    this.localizeNumbers(calendarStart.date()) +
                    '</span>' +
                    this.getDayText(cellDate) +
                    '</div>';
                calendarStart.add(moment.duration({ days: 1 }));
                boxCount++;
            }

Hi, I didn’t add any a11y features before, and tbh I don’t know what is needed to add that, and this looks like something you can do by adding an `ondraw` event handler to add those after draw. The keyboard support works on the days, so the focus should be deliverable to those when keyboard support is enabled. Other than those, I don’t think I’ll have time to deep dive such a wide topic like a11y now in the near future. But it definitely is a good suggestion. Thanks for that.

will you be updating the date time range picker as well?

Yes, did you encounter an error?

UCTTech

UCTTech Purchased

Whenever you use “startEmpty” on a datepicker input and select only the start date in the range, without selecting an end date, and then abandon date selection by clicking outside of the datepicker, something weird happens. When you click into the datepicker input again you find that the start date is already selected, as the first selectable date in the calendar. When you go and select any date at this point you get hit with a JS console error: “Uncaught TypeError: Cannot read properties of null (reading ‘clone’)”. This is seen even on this page you provide as documentation, for any input that starts empty: https://rettica.com/caleran/docs/readme.html. Please fix if you can, thank you.

I’ve added a fix for this, thanks for pointing that out! It’ll be on the next release, but in the meanwhile, you can add this temporary fix:

onbeforehide: function(instance) {
    if(instance.config.startEmpty && instance.globals.startSelected && !instance.globals.firstValueSelected){
        instance.globals.startSelected = false;
    }
    return true;
}

I queued the new version to be released now, it should be available once it gets approval from codecanyon. You can check the fix on the documentation you’ve linked in your question. Thanks again! Don’t forget to force refresh to bust the cached code. https://fabricdigital.co.nz/assets/How-to-hard-refresh-browser-infographic.jpg

Hi tpaksu, We are still struggling with trying to get the calendar to display the selected dates in a particular format once the user has selected their date range. We had written earlier about this but you were out of the office for a week and suggested we intercept the ondraw() event, which we tried but unsuccessfully unfortunately. What we are trying to do is to alter the the format of the date that gets displayed in the calendar header. Currently the header displays the selected dates as something like: The day “12” in the upper left, then July 2022 on one line, then on the next line it displays “Monday” in slightly smaller font. What we would like to display is all on one line: Mon, Jul 12, 2022 in the same font and location that the calendar currently displays the “July 2022” string. We hope this is possible? Thank you!

Check this:

$('#daterange').caleran({
            inline: true,
            ondraw: function (instance) {
                instance.input
                    .find('.caleran-header-start')
                    .html(
                        instance.config.startDate
                            ? instance.config.startDate.format('DD MM YYYY')
                            : ''
                    );
                instance.input
                    .find('.caleran-header-end')
                    .html(
                        instance.config.endDate
                            ? instance.config.endDate.format('DD MM YYYY')
                            : ''
                    );
            },
        });
UCTTech

UCTTech Purchased

When tabbing through a form and reaching the input that triggers the datepicker, selection of the start and end dates works well via keyboard. But when paired with the Cancel and Apply buttons, there seems to be no way to trigger the actual selection of the range or the press of the apply button by keyboard. It seems that keyboard selection of a range requires the use of the mouse for actually triggering the “Apply” button press, else the “onafterselect” method never fires. This is problematic because mouseless users on desktop have no effective way to select a date range when the buttons are shown. Am I missing something? I feel that after selection of start and end dates the TAB key should bring focus to the Cancel, then Apply buttons, with ENTER key press preventDefault of submitting the form. Right now if you press ENTER at any step of range selection via keyboard the form is submitted.

Thank you.

UCTTech

UCTTech Purchased

I temp patched my instance to the following, which is acceptable:


case 27: // esc
     this.hideDropdown(event);
     break;
case 9: // tab
     if(this.config.startDate && this.config.endDate && this.input.is(':visible')) {
          this.input.find('.caleran-apply').click();
     } else {
          this.hideDropdown(event);
     }
     break;
case 13: // enter
     if(this.config.startDate && this.config.endDate && this.input.is(':visible')) {
          this.input.find('.caleran-apply').click();
     }
     shouldPrevent = true;
     break;

Thank you for the patch! It’s been some time since I last tested the keyboard events, and looks like I’ve missed the case of the buttons are visible. I’ll check and let you know about the result.

I’ve included the code you’ve provided into the core, and will be released on the next version (1.4.19)

Hi tpaksu, We are trying to display a calendar with a date range that is already selected. The calendar displays but the dates do not show as selected. Does the following calendar code look like the correct usage of startDate and endDate to make this happen?

$("#daterange").caleran({
    dayText: dayTextsObj,
    oneCalendarWidth: g_nCalendarWidth,
    startEmpty:true,
    hideOutOfRange:true,
    showFooter:false,
    showHeader:true,
    continuous:true,
      mobileBreakpoint:g_nMobileWidthBreak,
    verticalRangeWidth:0,
    nextMonthIcon:"",
    prevMonthIcon:"",        
    minDate: moment().add(1, "days"),
            maxDate: moment().add(< =365*2 >, "days"),
        startDate: moment('06/22/2022','MM/DD/YYYY'),
        endDate: moment('06/25/2022','MM/DD/YYYY'),
    showButtons: true,
    inline: true
});

Thanks!

You’re setting `startEmpty: true` which clears the selected dates on init.

Hi tpaksu, We’re having a problem perhaps you can point us in the right direction for? We need to modify the current header start and end dates to a format such as:

Fri, Jul 01

We tried intercepting various events and the events did trigger, but we could never change the date format/text.

Could you offer any possible solutions? Many thanks! Mark Findlay

You can replace the text in the header containers on the ondraw event, I’m AFK this week and can’t prepare you an example, but that should work.

Hi tpaksu, We have a purchased copy (latest download as of 6/7/22) and have a question regarding the calendar width.

We are able to dynamically change the number of calendars from 2 to 1 after the page initially displays, but we cannot seem to set the width of that 1 calendar to 400 pixels.

Here is the javascript code we call several seconds after the page has initially drawn: function SetOne() { var instance = $(”#daterange”).data(“caleran”); instance.config.calendarCount = 1; // this works instance.config.oneCalendarWidth = 400; // this doesn’t work instance.reDrawCalendars(); }

Instead, the single calendar takes up the entire width of the container that previously contained 2 calendars.

What we would like is for the single calendar to take just 400 pixels in width. Note: When we create the calendar at the top of the page, we do set the oneCalendarWidth there as well.

Thanks for your help!

Nevermind, found the issue, you were using it right, no suffix was needed, I was setting the container width only on plugin initialization (applyConfig). Moved it to (drawUserInterface) method to get it used in all draws. If you can send me an email using my profile contact box, we can test it together.

Replied to your email.

Thanks tpaksu, your update works perfectly!

Im having some difficulty rendering an inline calendar to already have the start and end dates selected,…

https://codepen.io/aduffy/pen/YzYgPMB

Tried using

startDate:  "2022-06-14",
endDate:  "2022-06-24”,

as well as

startDate:  moment("2022-06-14"),
endDate:  moment("2022-06-21"),

I think this was working prior to the “Grid” based update.

Unrelated but is there a way to call a function if the users imputed date range is rejected because its less then the min number of days or selected date contained a disabled day? I would like to display some feed back to the user on whey the date selection was rejected…

I believe not, because these validations take place in different parts of the code, and I don’t remember adding an onerror callback to them. But it sounds like a good idea. With an enum, it can indicate the type of the rejection too. But, it’s not possible with the current code I believe.

I’ve sent you an email via wetransfer.

Hi tpaksu, We just purchased caleron and are working to implement it on our site, so please pardon if we’re missing something – but it appears that calendar is not responsive when in desktop mode. When we slide the right side of the browser inward, it just covers the calendar instead of shrinking it down as we move the border. It’s not until we bring in the right side all the way to the first of the 2 calendars that it converts to mobile mode, which is then responsive. Then, when expending the right edge of the browser back to the right, it never reverts back to the desktop view of the calendar. Is this by design? Is there is a way we can make the desktop view of the calendar responsive? Thanks!

Hi, 1) yes it’s by design, it is not flexible to resize itself when the browser resizes, but it is responsive that it detects the browser size and renders mobile and desktop versions separately. You can try setting `oneCalendarWidth: “auto”` and add your own CSS to make it expand/shrink as you want.

UCTTech

UCTTech Purchased

The documentation is not complete on how to alter the max date of the calendar after first selection. The documentation under the heading “Important Notes” has a somewhat blank example code block. Can you help me understand how to alter the max date of the calendar after first selection? Thank you!

Thanks for the heads up! I fixed the documentation, now it contains the code.

UCTTech

UCTTech Purchased

I’m not exactly seeing where in the documentation you’ve updated to include the specified code. I downloaded the package again and could not find it. Can you point me in the right direction? Thank you

I updated the online docs, not released a new version for that change. You can check it online.

I seem to be having the same issue as ‘itbankas’ with the disableDays and the hotelBooking mode. I have created a codepen here https://codepen.io/aduffy/pen/OJzdjvL

Basically i have the 27th of April disabled – that is there is a guest checking in on the 27th and departing on the morning of the 28th .

2 issues :

1) Visually the left half of the 27th is in red. One would assume that the left half of the day is the morning and the right half is the evening.. with a booking for a hotel being “nights” one would expect the right half of the 27th and the left half of the 28th to be coloured to show when a guest was actually in the room .

2) With the 27th disabled the used is able to select to create a new booking form the 27th – 29th . This is incorrect behaviour

Hello, we fixed it with itbankas communicating via email, and I’ll prepare a new release containing the fix.

Thanks tpaksu does this also address the cosmetic display changes to show how a booked day is actually a night that spans the booked day (check in ) and then morning of the next day (check out)

I hope so, you can get in touch via email (the contact box on my profile initiates it) if the new release doesn’t work in some edge case, and we can sort it out.

Hi there is there any built in functionality for getting dates to disable via an AJAX request before switching the calendar to the next month? RIght now I am thinking to use the ‘onbeforemonthchange’option to call a function to get the dates to block off and just returning ‘false’ in that function to prevent the date change.. then after data is returned in ajax i would re-render the calendar with the blocked out dates.. jsut wondering if there is a more efficient or built in way before i go down this path.

Hi, if you update the disabled dates on the onbeforemonthchange event, it’ll pick up the new disabled dates after the month change. Just return true after changing the dates on the event, and it’ll get populated automatically. There’s no inbuilt system to do that.

Hello Caleran!

I have small issue with isHotelBooking: true variable

Date 2022-03-19 should be disabled – not bookable, but now its bookable

Sample: https://nobeds.app/Calendar/Beta/2439256?calendars=2&minstay=3 Availability data: https://nobeds.app/Calendar/BetaData/2439256?calendars=2&minstay=3

2022-03-19 – is booked

But in Caleran calendar I can book 2022-03-19 :/

I think this is a bug, if I remove isHotelBooking variable everything show correct

I solved addDay problem via moment, but still not everything ok https://nobeds.app/Calendar/Beta/1 https://nobeds.app/calendar/BetaData/1

2022-03-16 yesterday (should not be bookable) 2022-03-17 not bookable (ok) 2022-03-18 bookable (ok) 2022-03-19 bookable (should not be bookable)

Dear Tpaksu, maybe you have a fix for this problem? I also would like to suggest to add rates to calendar days via JSON. We can pay you for this task. Please contact if interested: support@nobeds.com

Hello, can you tell me which dates should be not selectable on the new configuration? I opened the BetaData but it shows April’s data, not March’s.

Looking at the docs it appears that there is some support for keyboard actions. Using the keyboard I can navigate, but it doesn’t seem that I can select dates with the keyboard. Is that something that can be added?

Did you try space?

Hi, i can enable arrow for navigate months for mobile view? i love the view of mobile but some user dont know he can go next month with swipe, so is some way to add arrows in the month for navigate? regards

Ok i already foung again jajaja sorry

Glad you solved it, I was going to tell you that the arrows are already visible.

Hi, i am trying to set language for the datepicker but this still not working i already try many ways, with navigator language, put direct, with conditional but always puts me in english, i already try ‘es_MX’, ‘es-mx’, ‘es-MX’ but nothing works, can you help me please, regards

$(’.input-date-booking-form’).caleran({ locale: ‘es’, autoCloseOnSelect: true, showFooter: false, showHeader: false, format: ‘MM/DD/YYYY’, minDate: moment(), minSelectedDays: min_days_d });

Ok i already found the mistake i am loading moment.js without the locales

Hi. Thanks for great calendar picker. I have a problem with the DOB picker where I want to limit picking a year of birth after the current year. I manage to stop the YEAR at this year, but now the tool popup it has many blank white blocks? can you help. I did this.. ”..$(”#dob”).caleran({ DOBCalendar: true, startEmpty: true, hideOutOfRange: true, autoCloseOnSelect: true, format: ‘DD-MM-YYYY’, //minDate: moment().startOf(“year”), maxDate: moment().endOf(“year”), //startDate: moment(), endDate: moment() }); “

Sajeda

Sajeda Purchased

Hi, Could you please, Help.

When using the plugin in RTL Version, I gave the parent div dir=rtl attribute, and determined the locale when initializing the input, But it still displayed with wrong directions "next - prev navigations".

Did you set `isRTL: true` in the configuration?

Sajeda

Sajeda Purchased

I have added it now, The direction and navigations work fine, But there is one new problem: when determining a mindate for example this moment, the prev button displays instead of the next button. there is no next button so I can’t move to the next months. mm, I don’t know how to clarify it without a screenshot.

I understood your problem, but there isnt a fix for that actually. There’s only one thing that’ll solve your problem, disabling hideOutOfRange option, then it’ll both show..

Hi,

How can I mark more different dates to show on the calendar, but that they are clickable. So it’s like we want to show that 3 games are played in months. Eg: var selecteddate = [“2021-11-01”, “2021-11-04”, “2021-11-11”];

Hello bglavan, multiple selections are not supported in this plugin, sorry.

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