187 comments found.
Hello – is it possible to disable the leading/trailing dates in a month? so if looking at june-july months, it only shows June dates in June and July in July (rather than the end of may and beginning of July in the June box, etc)
Look at the previous comment.
Hello,
How to hide this: https://take.ms/6iqSa
I only want to show current month and not anything extra.
Thanks.
Add this to your styles
.calentim-not-in-month { display: none; }
This is not correct way, if you do this, the date will no longer match the day, before adding this css calendar was correct now date is 30 and day is monday which is not correct. could you provide correct solution?
ok instead of display:none, set “visibility:hidden” and “pointer-events: none” inside that class.
Hi,
Possible to know the size of JS/CSS of this library ?
Thanks in advance
minified js file is 93kb, minified css file is 93kb. and it’s dependent to moment.js library which is 214kb with all the locales included. Of course there’s also the jQuery library itself. But I suppose you already have that.
Quick question – is there a way to turn off leading zeros in the time picker? 07:30 is fine for 24-hour display, but 07:30pm looks wrong with am/pm.
I think not. But I’ll add when I finish the SCSS thing.
Pushed the new `dontPrefixHours` option.
Are there any plans to create a Dark Mode CSS? I tried editing the variables and compiling the SASS, but the main calendar and a lot of the elements are still coming out on a light background and the CSS seems to have ‘hard-coded’ colours in many places rather than using SASS variables.
I’ll try and let you know.
Pushed the dark mode CSS.
Hi Author, I have integrated the calentim in our project, currently on mobile I am facing an issue, I have auto triggered to open the calendar and auto select the date and used the property to autocloseselect to close the calendar automatically, it works good on the web version previously it was working on the mobile version too, but past one week it is not working on the mobile version. Please can you assist me to resolve this issue.
URL:http://medicalmalquote.ja.deals/
Please click the url mobile view.
Hello, it works on my android phone. What’s the problem?
i love this control well done. One question, i want to link two dates and have followed your example to do this for Linked Single Date Pickers – but what i want to know is if this could be done with only one instance of the Calentim control. The reason is, if i start to select the date range from the start date input box the calentim instance vanishes then this jumps to the second instance for me to select the end date. Ideally i want just want instance but with two input controls – one for start date and one for end date. Is this possible?
Hello, I didn’t try it before but it should be possible with changing the target on onfirstselect and onafterselect and probably onhide and onshow methods. I’ll try to create an example but don’t expect soon because I’m in middle of a house move now 
Hi tpaksu – i have had a good play and almost got a working version of this but got a couple of issues that need resolving. The main issue is that the first input box still shows the from and to dates whilst you are in the middle of selecting a range. Ive got it displaying only the start date once the range has been selected which is good news. The other issue is related i think, and that is if mid way through selecting a date range the user presses esc to cancel it – then this leaves the start and end date showing in the first input box. I am almost there but not quite
Can you fill the inputs on the ondraw event too? İt’ll fix that issue I guess. And there’s also onhide event which may help.
Hi,
First off, great library.
I originally integrated this in to a website, and it worked perfectly. Now, we are beginning to integrate Vue.js into our application with single file components.
Vue + jquery isn’t always the easiest implementation. 1) Do you know anyone that’s used this library with Vue? 2) Do you have any working examples using Vue? 3) Is there a version of this library in pure javascript?
Thanks, Adam
Hello Adam,
I don’t know any, but it should work without any problem, IMHO. I really don’t know. But it should be easy to implement, just add jQuery and calentim files where you have the and on mounted event, initialize the plugin. you should have access to ”$” inside the “mounted” event.
I am using date time range picker. User select the end time before the start time. How can I limit the user to make such selection?
Hello chwong1, you can set the minDate when the user selects the first date.
onfirstselect: function(instance, start){
instance.config.minDate = start.clone();
instance.reDrawCells();
},
onafterselect: function(instance, start, end){
instance.config.minDate = null;
instance.reDrawCells();
}I initialized calentim on 2020-03-10 13:30:00 with following options: let options = { singleDate: true, calendarCount: 1, minuteSteps: 15, hourFormat: 24, options.inline = true; options.showCalendars = false; };
So it’s a timepicker with minute steps set to 15. After initialization (on user action) I changed dateStart and minuteSteps. like that:
calentim.config.startDate = moment(‘2020-03-10 13:00:00’); calentim.config.minuteSteps = 10; // I also added limitTimeForDay from 13:00 to 14:00 calentim.reDrawCalendars();
see this picture https://tinypic.pl/do20gnzs2b7d minuteSetps is still displayed as 15 and there is no time limit drawn. However when I click on minutes arrow and change something it works correctly: https://tinypic.pl/rbzmwzciq0i4
So how to force this plugin to reDraw everything correctly right after calling reDrawCalendars ?
let options = { singleDate: true, calendarCount: 1, minuteSteps: 15, hourFormat: 24, options.inline = true; options.showCalendars = false; }; doesnt seem quite right to me.
Why? It draws eveyrything correctly. Check this fiddle
https://jsfiddle.net/sabat/7c2k1bv8/1/minuteSteps seems to work, but after redrawing limitTimeForDay option is ignored and startDate seems not to change.
1. Run fiddle.
2. Click on the ‘click me’ div. Start date didn’t change.
3. Change minutes by clicking on it’s arrow.
4. You will see that hours was limited to 13 only. Such effect should be from begining.
5. What’s more click again on ‘click me’. It redraws hours again (12, 13, 14) – there should be only 13 still.
However limitTimeForDay it’s not so important. What is more important to me: how to update the time to 13:00 after initialization?
I think I’ve fixed some bugs about the time pickers and added multiple limitTimeForDay ranges, but didn’t release it yet. I’ll check your fiddle with that code ASAP and let you know.
Ok. Thanks. You can check also one more thing. If you enter now into my fiddle again, click on ‘click me’ and try to change hour (right now from 16 to 17 – it’s important to change one hour after), you will get an error in line: return e.isAfter(t) ? n[0 a ? s - 1 : a - 1].endLimit : n[a s – 1 ? 0 : a + 1].startLimit;
TypeError: n[(intermediate value)] is undefined
I understand why it appears, but just letting you know. It basically shouldn’t allow to set time outside range defined in limitTimeForDay or any change should correct the time to upper or lower bound depend if time is set “ahead” or “before” in case of extending it.
Sorry for messages one by one, but I found a solution.
You have to call first updateTimePickerDisplay() method (which is not documented, that’s I didn’t find it at first) and then call reDrawCalendars();
There is still a little bug that reDrawCalendars() adds hours and minutes which was disabled by limitTimeForDay.
What I noticed: updateTimePickerDisplay() works fine and renders pickers correctly using limits set in “limitTimeForDay” callback, but then reDrawCalendars() resets everything.
So the final solution is to call:
calentim.updateTimePickerDisplay();
calentim.reDrawCalendars();
calentim.updateTimePickerDisplay(); // it redraws again correct time limitation
Sorry I’m delaying your answer because I’m trying to release the new version with some fixes. The time pickers will work better with this release, and I’ll try your scenario if it works as you wanted.
Hello, what happens if you don’t use reDrawCalendars and only use updateTimePickerDisplay()? Does it work as expected?
Basically my solution works fine. It requires 3 method calls instead of 1, but it’s not a problem for me. You can of course fix it this so that others don’t have a problem with it, but it’s not urgent.
If I call only updateTimePickerDisplay(), it will update all options, but without displaying changed minute steps correctly.
https://tinypic.pl/z88utxtpoctbThere is still 15 minutes step displayed. However when I click on arrow to change minutes one step ahead, you will see:
https://tinypic.pl/3mz4fq45qxhaStep option worked correctly, but the greyed minutes are quite weird.
If you call updateTimePickerDisplay() and then reDrawCalendars() you will something like that:
https://tinypic.pl/ondr5zn0grbcEverything works fine except that there are still hours and minutes drawn which were excluded by limitTimeForDay. Plugin works correctly but it only draws wrong at first that greyed numbers.
This is why you have to call again updateTimePickerDisplay() and then everything works good.
I’m preparing the new version now, can you test after I push the update?
Sure. Just let me know.
The update got approved now. You can download and test v1.3.6
I’ve checked and behaviour is same as it was. So my post ( https://codecanyon.net/comments/23835455 ) is still actual.
I have got following settings set to calentim
``` let options = { singleDate: true, calendarCount: 1, autoCloseOnSelect: true, minuteSteps: 15, hourFormat: 24, startEmpty: true }; ```
In such way timepicker (selecting hours and minutes) is blocked and user can’t select the time before selecting a date. However selecting a date causes closing the calendar because of autoclose. So to set the date and the time user has to open calendar twice, which isn’t a nice solution. For me timepicker should be enabled and it’s connected input shouldn’t be updated unless user picks a date. It’s probably due to startEmpty set to true, so there is no date selected. I saw that 2 weeks ago @egokalp also had got issue with this settings. For demo just check your own example: “Empty on initialization” and try to change hour before selecting any date.
Do you have got an idea how to fix this, to not open twice a calendar for selecting date and time with following options provided?
Hello sabat24, I couldn’t decide how to select and display a time when the calendar starts empty, because the date and time portion are connected together inside the plugin. There’s no only time selection or only date selection in reality, only the parts shown when disabling specific parts with showCalendars or showTimePickers options. Maybe you can use the inline: true option to display the calendar in a dropdown, then using the onAfterSelect event, you can close the dropdown by code. This seems to be the easiest solution. Also it will give you the chance to use it anyway you want. I probably won’t be here at the weekend, but I’ll check it on Monday.
I was thinking about using temporary “zero” date in such case. So if addTimePickerEvents is fired on empty input it will use internally startDate like “01/01/0000 00:00:00”. Changing one hour will update that internal date to “01/01/0000 01:00:00”. However in such case you shouldn’t update the “real” startDate and calendar view. I tested it in my case and it seemed to work fine. However I finally decided to remove autoCloseOnSelect:true and I added showButtons:true as the simplest and fastest solution for now.
Yes I was thinking about the zero date but I thought that it had a limit on UNIX timestamps because my code uses it extensively. Great if you figured it out.
Hey there, thanks for this fantastic and great value plugin. I’ve just had a client request a very specific feature though. It’s for a restaurant and their problem is, they are getting swamped with bookings between 6:30 and 8:30 and are wondering if I can modify the time picker, to block people from selecting those hours just on Friday and Saturday night.
I’m not the most technically able person on this stuff. Can your plugin achieve this and could I possibly trouble you for an example? I’ve been playing with the limitTimeForDay (); option, but can’t seem to get it to work.
Thanks so much for your support.
All The Best: Dave
Hello Dave, do you have a demo page that you can show? If you have, please contact me from my profile contact form, and if you don’t, you can send me the configuration you are trying to do with limitTimeForDay method via the same form too.
Have a bug in show only time
When i set start/end time 2020/2/28 & change the time They will only show on format of current day 2020/2/25 not 2020/2/28 Please check this
Hello tonamson, I couldn’t reproduce it in this example, https://rettica.com/calentim/docs/readme.html#default-range-picker if you can share your config, I can inspect and tell you what’s wrong.
var startDate = moment({ year: 25, month: 2, day: 2020, second: 0, millisecond: 0, }); var endDate = moment({ year: 25, month: 2, day: 2020, second: 0, millisecond: 0, }); // set start date calentim.config.minDate = startDate; calentim.setStart(startDate); // set end date calentim.config.maxDate = endDate; calentim.setEnd(endDate);
this is my config
You mixed day and year, did you see that? Year is set as 25 and day is set as 2020.
ah not right! My computer is day 24 I set day 25, they only receive day of 24 not 25, if calendar not show only show time it’s will have error this
I’ll look and let you know. Probably you have a confusion with time changing the days, if you click up when the datetime is 25/02/2020 00:00, the datetime will become 24/02/2020 23:59, but I’m planning to prevent that in the next version.
Look like this
I set start/end with 2020/02/29 8:30:00 but start time have set current time of computer 2020/02/26 not 2020/02/29
When i set this with code:
var calentim = $(’#candelar’).data(“calentim”); calentim.setStart(startDate); // moment calentim.setEnd(endDate); // moment
I try to use event oninit it ok but have a problem when show full format DD/MM/YYYY HH:mm:ss for LT
- If i format LT it wrong date and i change to format DD/MM/YYYY HH:mm:ss it will not wrong date
can you format time LT and print the timestamp? it’s look like true but you format time LT and print the timestamp of start and end time
try the link again
$(”#fl-item-9”).calentim({
showCalendars: false,
format: ‘LT’,
oninit: function (instance) {
var startDate = moment([2020, 1, 28]).hour(
.minute(30);
var endDate = startDate.clone();
instance.setStart(startDate);
instance.setEnd(endDate);
instance.updateInput();
},
ontimechange: function (calentim, startDate, endDate) {
console.log(startDate.format(‘LLLL’));
console.log(endDate.format(‘LLLL’));
}
});
Edit config like this and you will see i set date 28 they will show current date not 28
start date not change, only end date change to 28
Yes you are right! There’s a bug when using only date pickers, the fetchInputs method is causing the bug. It modifies the whole date after it parses (line 680-681 on the code). I’ll fix it and send you the updated code, if you can contact me on my profile contact box (I won’t release a new version with that fix yet)
Ok i have send you my email.
Hello, Nice plugin. Thanks. TimePickers does not work (unable to change) when startEmpty is set to true. Is this a bug or am i doing something wrong? Config : showCalendars: false, autoCloseOnSelect: false, startOnMonday: true, locale: LNG, singleDate: false, showHeader: false, showFooter: false, showButtons: true, showTimePickers: true, hourFormat: 24, startEmpty: true, format: ‘hh:mm’
Hello do you have a demo page?
how to disable arrow on time?
What do you mean? You can hide it with CSS, there’s no setting to hide it.
Hey,
I am using your date range plugin called calentim. I am having an issue on click of the apply button. I need an event to pass the selected time on click of the apply button to an API. Hope you can help m out with this
Thanks, Rubin Pramod
Hello Rubin, did you try onafterselect or onbeforeselect?
http://rettica.com/calentim/docs/readme.html#available-eventsThat worked thanks, Also needed help in one more issue. I need to hide the custom range selection and just use the ranges configuration (right side of the drop-down) in some particular instances in the project I am working on.
I suppose you can do it with using CSS. There isn’t a specific setting for that.
Do we have an option to type the date instead of selecting it
Like how? What does it do now and what do you want it to do instead?
So when the dropdown/ popup opens on click of a div In the calentim-header, if we have a text field in which I can just type 02/05/1994 – 07/07/2019 and this particular date gets applied. Need it inside the dropdown/ popup and not outside
If I could share a design sample I could explain better.
I also wanted to know if I can pass a parameter, and show which range has been selected. Basically I need to keep the range active even on refreshing the page after I select a range
1. No, it’s not supported, you need to code it yourself 2. Its a good question, I’ll look at the code and let you know if it is possible with the current code.
Okay do let me know, if there is anyway to show a particular range active.
Hello,
You can use this code:
oninit: function(instance){
for(var i = 0, len = instance.config.ranges.length; i < len; i++){
if(instance.config.startDate.format("DD.MM.YYYY") instance.config.ranges[i].startDate.format("DD.MM.YYYY") &&
instance.config.endDate.format("DD.MM.YYYY") instance.config.ranges[i].endDate.format("DD.MM.YYYY")){
instance.container.find(".calentim-range[data-id="i"]").click();
break;
}
}
}arkadaşım selamlar. Calentim DateTimeRangePicker ürününüzü satın aldım ve mükemmel diyorum tebrikler. sorum ise şu ki umarım örnek verme ihtimaliniz vardır. onafterselect sonrası cookie ya da session a veri yazdırabilmem için elinizde örnek var mı ? asp.net web form kullanıyorum.
Merhaba, Session’lar server side işlendiği için onu AJAX ile halledebilirsin, Cookie’lar da bir sonraki request’e kadar geçerli olmayacaktır ama şöyle bir kodla frontend’den set edebilirsin: https://stackoverflow.com/a/24103596/916000 . onafterselect içerisinde istediğinizi yapabilirsiniz. Elimde hiç örnek yok bu konu ile ilgili, kusura bakmayın.
arkadaşım anlık cevabın için çok teşekkür ederim.deneyeceğim ve umarım başarırım saygılar sayın taha.
Rica ederim, kolay gelsin
arkadaşım tekrar selam ve yönlendirmiş oldugun bilgi ile tek request olarak cookie ye set etmeyi kesinlikle başardım ve tekrar çok teşekkür ederim arkadaşım ve çalışmalarında başarılar. saygılar.
Taha bey merhaba , calendar çok iyi ve başarılı şekilde çalışıyor . Ancak ufak birkaç konuda desteğinize ihtiyacım var .
1. Geçmiş tarihleri ve 25 yıl sonrasından itibaren tarih seçimlerini disable etmek istiyorum. yani bugun 18 KASIM 2019 olduğunu varsayarsak 15 16 17….. KASIM 2019 disable olacak ve 18 Kasım 2044 Sonrası iptal olması gerekli . < 18 kasım 2019 …. xxxx …. 18 kasım 2044 >
2. (Bootstrap 4.1.3) column içerisinde inline olarak kullanıyorum ve genişliğin full-width olması gerekli yani genişliği 100% olarak tanımlamam gerekli . CSS dosyasını inceledim ancak doğru satırı bulamadım.
Yukarıda belirttiğim konular hakkında yardımlarınızı önemle rica ediyorum tekrardan emeğinize sağlık .
Merhaba,
1. minDate ve maxDate ayarlarını şöyle set edebilirsiniz:
minDate: moment(), // bugünden öncekileri iptal eder
maxDate: moment.year(2044), // bugünün tarihinin 2044 yılından sonrakileri iptal eder
hideOutOfRange: true // disable tarihlerdeki okları göstermez2. oneCalendarWidth değeri bir takvimin ne kadar yer kapladığını ayarlar, bunu ‘auto’ olarak set ederseniz bulunduğu container’i kaplayacaktır.
Son ayar:
.calentim({
minDate: moment(),
maxDate: moment().year(2044),
hideOutOfRange: true,
oneCalendarWidth: 'auto',
inline: true
});The mobile calendar is throwing errors on cancel operation. This is not an implementation issue but more of code level break on the plugin website as well. On Cancel button click – this.config.onCancel is not defined. Please validate. This is a blocking issue on mobile screens.
Yes thanks for letting me know, I should fix it ASAP. BTW, a quick fix for that is to add this to your initialization:
onCancel: function() { return true; },Whenever the picker is changing the datetime value of an input, the input field change event aren’t triggered. So if you’re trying to monitor the actual field for changes: $(”#pickerInputField”).change(function() { }); it won’t be triggered. you should call the .change() method whenever you’re changing the input value. i could use the package events to do so but they aren’t covering all the scenarios.
Yes you are correct I should add some event listeners for the changes.
i don’t think you quite got my problem
you don’t need to implement listeners. you only need to make sure to call the change() method on the actual input field anytime you change its value, this will allow us to bind external listeners to the input as well.
Also, i wanted to ask, will it be possible for this package to be available through npm? it would be way easier to upgrade and maintain it as well.
Yes, but doesn’t onafterselect event run after the time change occurs? About npm, I might need to add a licensing system to handle the plug-in downloads. As this is a paid plug-in I don’t want to make it public.
>doesn’t onafterselect event run after the time change occurs It only occur after date select, if you change the time it doesn’t. also, if i manually change the actual value of the field it won’t be triggered.
Hello YahavS, I’ve checked the code and I saw that I’ve separated the time picker event as “ontimechange(instance, start, end)”. Will it work for you?
