Use calculated date as end date in date field

Hi there,

I know there’s a lot of discussion and work-around solutions about extracting the end dates and times from date fields, but I’ve searched for an cannot find the opposite task - populating a date field with a start date/time and an end date/time from other fields.

Scenario:

I sell hourly packages (ie 3 hour sessions, 6 hour sessions, etc) that clients can book. I have each session as a separate item in an items table. Let’s say a client purchases a 6 hour session that begins on 12/29/2022 at 9am. I enter the start date/time and select the 6 hour session. I can get Knack to figure out the end time (12/29/2022 at 3pm) by using a date formula. But once I have my start and end date/times, I cannot figure out how to populate that onto the calendar view.

The calendar view itself only uses end times from the date/time filed with the end -time option selected, and there doesn’t appear to be a way to populate the end-time with a function or a rule.

Unless I’m missing something. Thanks in advance.

@Sunny_Singla is this something you could help with? You did something very similar for me using JavaScript once?

This is actually quite simple to do with Make/Integromat - what you need to do is to use Make to update a complex date field (one with start and end) from the inputted start and end (if input or add the time) - this is a working example from one of my client’s systems:

In this example, the Event object has two dates Start Date and Finish Date and they are populating the single Dates field which is then used in the calendar. In your case the Finish date would be based on the result of the date formula.

Hope this helps!

Hello,

We can do this using javascript easily. Currently, I have no example but will post it ASAP.

Regards,
Sunny Singla

Hello @Michelle,

Check the below page for a working example that may work for you.

https://roberts.knack.com/farmers#check-package/

Change view id and field id’s

JS
var startTime = “”;

$(“#view_149-field_349”).live(“change”, function() {
try {
startTime = $(“#view_149-field_349 option:selected”).text().split(“(”)[1].split(“)”)[0];

    $("#view_149-field_346-time").val(startTime);

    var addhrs = $("#view_149-field_345").val().split(' ')[0];
    console.log(new Date('12/12/2022 ' + startTime.replace('pm', ' pm').replace('am', ' am')).addHours(addhrs));
    var to = new Date('12/12/2022 ' + startTime.replace('pm', ' pm').replace('am', ' am')).addHours(addhrs).getHours(); //.toString();
    var ampm = "am";
    if (to >= 12)
        ampm = "pm";

    $("#view_149-field_346-time-to").val((to % 12).toString() + ":00" + ampm);
} catch (err) {}

});

$(“#view_149-field_346”).live(“change”, function() {
$(“#view_149-field_346-to”).val($(this).val());
});

$(“#view_149-field_345”).live(“change”, function() {
var addhrs = $(“#view_149-field_345”).val().split(’ ‘)[0];
console.log(new Date(‘12/12/2022 ’ + startTime.replace(‘pm’, ’ pm’).replace(‘am’, ’ am’)).addHours(addhrs));
var to = new Date(‘12/12/2022 ’ + startTime.replace(‘pm’, ’ pm’).replace(‘am’, ’ am’)).addHours(addhrs).getHours(); //.toString();
var ampm = “am”;
if (to >= 12)
ampm = “pm”;

$("#view_149-field_346-time-to").val((to % 12).toString() + ":00" + ampm);

});

Date.prototype.addHours = function(h) {
this.setTime(this.getTime() + (h * 60 * 60 * 1000));
return this;
};

CSS
#view_149-field_346-time ,

.kn-datetime__to ,

#view_149-field_346-time-to ,

#view_149-field_346-to ,

#kn-input-field_346 div label

{

visibility: hidden;

}

if you need to include minutes. then need to tweak a little.