I fixed that last night but it was already too late because the update I pushed was approved so I pushed another update. I’m waiting it to be approved now. The error is in the addInitialEvents function. There is an if statement which checks for mobile and inline and binds the click event but the if should be inside the click not outside.

Please try the updated version.

Brilliant. Its working now, thanks!

Not sure if this is the best place to ask, but was wondering about the possibility of a new feature.

I have one input box that i would love to be able to select “multiple-but-not-consecutive-dates” for.

For example, a calendar pops up and I can select ALL these dates individually: 01/1/2017, 20/1/2017, 03/2/2017, 07/2/2017,

The current plugin I’m using is here: http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/ but after using your current date picker I can’t face how ugly it is anymore!! I would love to use your much better looking plugin for this input field too!

If you need to contact me for further discussion etc, just add gmail.com to my username.

Thank you!

Hi jonnywilliamson, this would be a good feature, but I guess it will get this picker out of it’s scope as it is a range picker IMHO. But this can be a seperate plugin. I’ll add it to my to do features list and check what I can do.

Fantastic. Thank you.

You’re welcome

Just checking to see if your “to-do” list is getting any smaller! Happy to pay a few bucks for a new plugin!

Hi Matt, thanks for buying and using it, you can use the startEmpty option to achieve that. And for the second issue, right now it only supports this way but I’ll code a easy solution on the next release.

Hey, thank you for the quick reply….I’ve used the startEmpty option now, however the field now requires two clicks to trigger the picker (or a tab to focus then click), anything we can do about this)....when do you think the next release will be out with the amended month changer (just roughly)

Thanks so much

Matt

It might be some other event handler interfering with the plugin. You can test it on an empty page to test it. And for the other thing, probably this Monday I’ll push the update here. And in 2-3 days it’ll be approved I guess. Maybe earlier than that. I’ll let you know if I can finish early.

Hi Bogdan,

You need two instances with { singleDate: true } enabled on both of the pickers, then you need to add this event to the start date picker:

Hi tpaksu,

I tried that, the range picker doesn’t work anymore, they both act as “singleDate:true” inputs.

Could you give a working example where 2 inputs are used with range picker ?

Please note that range picker should also work if visitor first clicks #endDate.

What do you think, is it doable ?

I guess I didn’t understand what you’ve asked. You need two date range pickers wih the same configuration, and what is the relationship between them? You can instantiate two range pickers already on the same page with different initializers. Can you explain the relationship in between the two range pickers?

so..

I have a form with 2 inputs: #date-startperiod #date-endperiod

Would like to use range-picker format (with custom ranges feature). When visitor clicks on any input (end/start) to be able to select range from date picker/custom range selector.

Once a range is selected, if visitor clicks on any inputs (start/end), the same range selection to be shown.

Each input should get single date value (start or end).

Current code looks like this:

jQuery("#date-startperiod").caleran({
    calendarCount: 3,
    autoCloseOnSelect: true,
    minDate:'<?=$startingdate?>',
    startOnMonday: true,
    singleDate: true,
    locale: '<?=ICL_LANGUAGE_CODE?>',
    onafterselect: function(caleran, start, end) {
        var caleran2 = jQuery("#date-endperiod").data("caleran");
        caleran2.config.minDate = start.clone();
   }
});
jQuery("#date-endperiod").caleran({
    calendarCount: 3,
    autoCloseOnSelect: true,
    minDate:'<?=$startingdate?>',
    startOnMonday: true,
    singleDate: true,
    locale: '<?=ICL_LANGUAGE_CODE?>'
});

Hi Austin, I’ll try and let you know.

Hi, doesn’t autocloseonselect option work?

It works only on normal view, in mobile you have to click on “cancel” or “apply”.

you can use a workaround:

onafterselect: function(caleran,start,end){ caleran.input.find(”.caleran-apply”).click(); }

This will not trigger any errors in the normal view, right ?

I guess not, just will re-trigger the input updates, but you can also call the close method caleran.hideDropdown(null) directly.

The method “onafterselect” is fired after clicking on apply, not while clicking on the date (mobile view). I need it to be fired when clicking on the selected date, not apply button.

in the cellClicked function, copy line 581 inside 583. It’ll solve your problem. Don’t forget to remove the this.config.inline check.

I tried from your guidelines this:

if ( this.globals.isMobile === false ) { if ( this.config.onbeforeselect( this, this.config.startDate, this.config.endDate ) === true && this.checkRangeContinuity() === true ) { this.globals.firstValueSelected = true; this.updateInput( true ); } else this.fetchInputs(); if ( this.config.autoCloseOnSelect && this.config.inline === false ) this.hideDropdown( e ); } else { if ( this.checkRangeContinuity() === false ) this.fetchInputs(); if ( this.config.autoCloseOnSelect ) this.hideDropdown( e ); }

and didn’t work

did you also set autocloseonselect to true? it should work.

Yes I did, but not working

do you see any error on google chrome developer console? can you debug it if it reaches your code? I’ll try here too.

Nope, Google chrome console is clean in my calendar page. Actually everything is working fine, except applying the logic of onDateClick instead of onApplyClick.

I just added

to the else block, and it worked.

I tried this, but still selecting the date and close the modal on mobile after I click Apply.

Try it while enabling the “toggle device toolbar” from google chrome console.

I tried with that. Maybe it’s something else interfering with the script? can you add an alert to the else block before hidedropdown?

It is working good in multi picker, in single picker won’t close automatically (in mobile view)..

Actually the code you just added, breaks the selected dated .. showing wrong dates in multi

Can you mail me from my profile page contact box?

Hi, can you give an example of an input of yours and the format option that you are using?

Also, if you are using moment functions externally, you might want to check these questions and answers here: https://stackoverflow.com/search?q=moment.js+deprecation

Hi,

Can you look at the changelog version below that info, what is the latest version in the changelog? That’s right, I forgot to change the line you’ve mentioned when I posted that release.

And if you see a version below “1.2.2” can you please re-download the script and use that version?

Yes, the change log has 1.2.2 version, but since hideDropdown still did not work without radnom parameter and that line was 1.2.0 u suspected that i might have wrong version.

Also I have problem with setting target:

// Caleran is date icon button. (input field is left) $(”.caleran”).each(function (index, element) { // Get date button. var targetID = $(this).data(“target”); var targetPolje = $(”#” + targetID);

// Inicijaliziraj caleran.
    $(this).caleran({
        singleDate: true,
        startOnMonday: true,
        calendarCount: 1,
        showHeader: false,
        showFooter: true,
        autoCloseOnSelect: true,
        locale: "hr",
        format: "DD.MM.YYYY",
        oninit: function (elem) { elem.config.target.val(''); },
        target: targetPolje
    });
});

I can’t get it to work, “targetPolje”” is <input> element.

Here is html.

Sorry everything gets messed up here, are there any code tags for posting code?

asp-for gets replaced with id=”...”. Also using jquery 3.2.1.

Does passing “null” as the parameter fix your problem? I forgot to add an “undefined” check inside that function. The correct way should be adding null as a parameter.

and maybe the problem is that the label and the input has both “asp-for” attribute which may be replaced with two identical id attributes and the script might be confused with it.

Yes, passing null fixes problem, but I still have problem with setting target property, can you please investigate.

did you read my last comment?

Hmm possibly, ill check that out and let you know, thank you.

asp-for for label does no get ID, here is raw html generated:

Ok, the problem is, you are initializing caleran with $(this) instead of “tarjetPolje”. try initializing with tarjetPolje.caleran(); and remove the target member on the options object.

Sorry i changed some code on the fly here is updated jsfiddle with html and javascript

How I understand it I should initialize .caleran on my calendar icon (span element) and I set target to input element where date is displayed, this is exatcly like in documentation, your button is caleran and input is caleran-target.

Can you please check one more time.

Here when i click date icon, i get calendar but on selecting it wont update input field which is set as target property

Can you send me an email from my profile contact box?

I solved the issue, I needed to add SPAN to valElements in caleran.js

valElements: [ “BUTTON”, “OPTION”, “INPUT”, “LI”, “METER”, “PROGRESS”, “PARAM”, “SPAN” (added) ].

I wonder why you would limit to these elements, cause calendar trigger could be any of many html elements, such as div, span, a, etc.

Because valElements only contain the elements which could have a “value” attribute. SPAN element is not one of them. I’ve sent you an email last night which contains the updated version. Did you have the chance to check it?

I found your email now, it was in spam folder, thank you i’ll check it now.

I tried new version, it works! Thank you

I only have one more question, whenever I open calendar it immediately sets current date to input filed, i would like nothing to get written to input filed unless user clicks on date, is there a way around this?

yes, you can use “startEmpty: true” and dismiss the init event.

I did, it does not have effect. Tried it in firefox and ms edge.

Hmm sorry, caleran doesn’t have the startEmpty option, calentim does. I’ll add that and send you the updated version.

I’ve sent you the update.

startEmpty works now! Thank you very much.

I also noticed one more thing now, when I open calendar by clicking calendar icon, and then open another calendar the previous one stays open and i can’t close it.

I didn’t notice this before because i would close first one it by cliccking somewhere else, also is it possbile to close calendar by clicking the same icon second time?

I think other calendars should close if other is opened, i mean shouldn’t only one be open at a time?

Also, autoCloseOnSelect stoped working in latest version you sent me.

I’ve sent you an update with a fix about other calendars’ closing issue.

Jsfiddle wont run, i tried latest version and calendar now closes properly (multiple issue), great!, would be possible to close when I click the same button again?, Like first click opens it, second closes it and so on..because otherwise you either have to select date or click somewhere else on screen to close it. It not a big deal but it seems like standard behaviour.

Regarding autoCloseOnSelect it still wont work, it did work yesterday i’am sure, and there was no other js code that I added to my project.

Yep, it works on chrome but not in firefox. I’ll check that.

Sent you the update.

autoCloseOnSelect works now in last version, but showing only one again now stopped working, other calendars stay open, sorry to bother this much

• v1.2.3 * —— * – fixed event duplication on document click * – fixed outside triggers closing dropdown * – fixed target element confusion when different target option is specified * – added startEmpty option * – fixed multiple instance closing issues * – added missing event parameters to hideDropdown method

Also clicking on same button does not close opened calendar.

So in short:

1. startEmpty: works. 2. autoCloseOnSelect: works. 3. Close previous instance when opening new one: stopped working. 4. Toggle calendar open/close when clicking same button (would like to have if possible).

Hi, I’m not able to reach a computer right now, I’m on vacation but I can give you a hint, did you try changing only the other input’s value? Try that and let me know.

Yes, but you need to click the same day twice, because you need to define the start day and the end day as the same day. You’ll get two same dates this way.

If you want to select with one click, I think it doesn’t provide that.

But maybe, you can use the “singleDatePicker” option for the plugin when initializing the date picker related to two radio buttons.

For example you’d have two radio boxes, “single day event”, “multi day event”, and when the user selects one, you can re-initialize the caleran plugin with single date selection / range selection option.

Thanks for the quick reply – would you be able to custom-code the functionality for us that I described on top of your existing picker? we’d also look for the time-picker to be included if possible…