187 comments found.
Is there a way that the time is blank and the user has to select the hour and minutes? right now comes with the “current time”, but I want to force the user to pick an hour and minutes manually.
It doesn’t support that but instead you can set the initial time to 00:00 to mimic that.
Hi, is there a way to set default time without setting default date? We would like to set the default times to office hours but let the website visitor to select their dates. Thanks.
Hmm, I didn’t think about this scenario before, I assume there’s no way we can store a time without a date in moment.js library, which this plugin is based on, so how about using two inputs, one for the date with startEmpty, and one with only the time picker?
I’ll try and let you know, thanks for the advice!
Hello, when I use “singleDate:true”, can we display “Today”? Thanks
Hey! Sorry, the ranges are only for range selection, but you can add a button on draw event that selects today when clicked. But I don’t have an example for that.
I need to block days on the calendar, so that they are not clickable. Is this possible? I can’t find a property to do this.
I found what I needed which is ‘disableDays’
The result for this is always false, so it doesn’t disable the day.
disableDays: function (day) { console.log(day); var result = day.isSame(moment(‘2022-10-15’)); console.log(‘result is ’ + result); }
The reason why it’s returning false is that using the isSame() method will compare date and time. When I examined the day object, it shows a start time of 12:00.
day moment is 2022-10-15T12:00:00-04:00
compare moment is 2022-10-15T00:00:00-04:00
To compare on date only the syntax is:
return day.isSame(moment(‘2022-10-15’, ‘day’));
You may want to update the doc page to include comparing on date only.
I think you missed returning the value in the code on your third comment, and yes, this requires a moment object, because isSame check is a moment.js function. Thanks for letting me know that it works though!
Hi, I am using this Calentim date/time picker for selecting a single date/time value and I have used the codes shown below,
For calentime input control: <input type=”text” id=”CalendarL1” name=”CalendarL1” value=”14 Oct 2022 06:07” onkeydown=”return false”/>
For script:
$("#CalendarL1").calentim({format: "DD MMM YYYY hh:mm A",
singleDate: true,
calendarCount: 1,
showHeader: false,
showFooter: false,
autoCloseOnSelect: true,});The date/time value “14 Oct 2022 06:07” comes from back-end database.
If I use the code shown above, Calentim control shows the date/time “14 Oct 2022 06:07” selected correctly, but, initially, the calentim control shows September calendar instead of October calendar because todays date is 15 Sep 2022.
So, what should I do, in order to make Calentim control to initially show October calendar (instead of September calendar) if the value of the calentim input control has October date/time – “14 Oct 2022 06:07” ?
Thank you,
Ah,,, The problem has been fixed by installing the newer version of this Calentim control. I was using the very first version of the Calentim control which I purchased years ago. Thank you.
ontimechange event is not fired when “showButtons: true”
Even after you click “Apply” button?
not fire when i click to Apply.
When I comment out the second line below (in Calentim source), then ontimechange event is working.
if (this.config.showButtons) {
//this.globals.delayInputUpdate = true;
this.config.autoCloseOnSelect = false;
}
showButtons : false
OR
onbeforeshow : function(instance){
if(instance.globals.isMobile){
$.extend(true, instance.config, {
showButtons : false
});
}
}
The buttons are needed to select a time in the mobile view. You can use CSS to hide the footer, and don’t forget to use autoCloseOnSelect: true to select the dates without using the buttons. But I’m not sure if it’ll cause bugs on somewhere else.
Hi, is it possible to deactivate just a hour in a certain date? for exemple using a timestamp?
You can define available times per day like on the example here: https://rettica.com/calentim/docs/readme.html#limiting-time-based-on-day-multiple-time-ranges-
thanks for your reply. I mean on a certain date. for exemple deactivate on the 27-05-2022 10AM, so all other hours are available but some not
I guess you’ve read the example, it shows how you do what you want. You can check for the day parameter if it equals 27-05-2022 and return a range definition that excludes 10AM.
yes I read it but cant anderstand how to exclude a date and hour
There’s a day parameter which delivers the day inside the callback function. If it’s equal to the date you want, you’ll return a time range to enable the time range. It accepts multiple ranges, so you can return 00:00-09:00 and 11:00-23:59 to disable 10am.
Hello, is it possible to use .ics files to update the disabled dates? Thank you.
Hi, if you can code that part, sure, it’s not something included in the calendar.
I have an empty textbox with following options:
$(”#readingTimestamp”).calentim({ showButtons: true, singleDate: true, calendarCount: 1, autoCloseOnSelect: true, reverseTimepickerArrows: true, hideOutOfRange: true, startDate: new Date(), hourFormat: 24, enableYearSwitcher: true, startOnMonday: true, showOn: “right”, startEmpty: true }).data(“calentim”);
When I click to the textbox, then the minute and second always zero.
https://ibb.co/475nLRJYou have “startEmpty” in your config, if you don’t select a date, the time pickers won’t work.
When I use this option, then the calendar display at wrong position onbeforeshow: function (calentim) { calentim.config.startDate = new Date(); }
$(”#readingTimestamp”).calentim({ showButtons: true, singleDate: true, calendarCount: 1, autoCloseOnSelect: true, reverseTimepickerArrows: true, hideOutOfRange: true, maxDate: new Date(), startDate: new Date(), format: “YYYY.MM.DD HH:mm”, hourFormat: 24, enableYearSwitcher: true, startOnMonday: true, showOn: “right”, startEmpty: true, onbeforeshow: function (calentim) { calentim.config.startDate = new Date(); } }).data(“calentim”);
You need to use this:
onbeforeshow: function (calentim) {
calentim.config.startDate = moment();
return true;
}Hi, is there an ability to remove specific hours from time picker and adjust the minutes? I’m interested in this scenario: Hours: 9am – 5pm, Minutes: 00 | 15 | 30 | 45
Hi, you can see examples of the feature you are asking in the documentation. You can access it by clicking the preview link on the product page.
Hi, I use the script at the beginning with startEmpty: true but if I have already saved a date, is there a button or a function to empty/clear the input field?
Have the input field with readonly so that you can only select the date and not make any manual inputs.
There’s instance.clearInput(); method.
Is there a way where I can select a time range within one date?
You can select the same days as start and end dates and then you can use the time pickers? There’s week select mode example on the documentation, you can modify it to select same day instead of the week.
Please note that in calentim.min.css, there is a line width: calc((100% / 7) ÔÇô 2px) !important;
which will fail if you npm run prod. Please make sure to change it to ”-”
Thank you, I thought I’ve fixed that, but probably it was in another plugin. I’ll fix that in the next release.
Hi, i need to dinamycally set limitTimeForDay as per use as agenda. So when user change for date in onafterselect function, i need to go to database and check the limitTimeForDay.
Can i overwrite a function, how can i update time per each day dinamycally
thanks a lot
In theory you should be able to do that with updating
instance.config.limitTimeForDay = [your new function]; instance.validateDates();
but I didn’t try it before.
I want to disable the calentim datepicker, when the user selects a backdate option, as in this case user is not allowed to select the date, as the date automatically starts from the first day of year eg (01/01/2021). Is there any option to disable the datepicker?
You can set the mindate option instead to prevent selection of unwanted days.
Hi tspaksi great plugin!! I going to use it as a booking calendar for my project, is there a way to add prices or generally labels under each day?
Hi, you can use the ondraw event to customize the calendar once it’s drawn. I don’t have an example of it right now, but you can figure it out if you know javascript or jQuery.
