Edit time portion of DateTime on a Details page

[ray]

Hello. I see how I can create separate Date Time fields on a Submission form. This is working but if I want to return to that record to edit the Time portion of the Date this method does not seem to work. Is there a way to adapt this for Updating, or is there some other way I can see my Date with Time to allow an edit? Currently the only way I am able to view the full Date and Time in a single field on a Details page is by making it Display Only and setting the formatting. I have played around with localization but it still seems that I cannot see the Date and Time together in an editable Text field on my Details page...

[MayMusic]

An easy way would be showing the entered day as a display only value and then add virtual fields same as what you have on update form to enter new date or time. These virtual fields can be hidden by default till the user checks a checkbox to change the time. 

[Alison]

Hi @ray,

Feel free to create a Footer on the Details page and put the code below there to put each part of the Data/Time field in the separate Text field:

<script>
document.addEventListener("DataPageReady", function() {

    var str = document.getElementById("EditRecordDate_Field");
    let monthField = document.getElementById("cbParamVirtual1"),
        dayField = document.getElementById("cbParamVirtual2"),
        yearField = document.getElementById("cbParamVirtual3"),
        hourField = document.getElementById("cbParamVirtual4"),
        minuteField = document.getElementById("cbParamVirtual5"),
        secondField = document.getElementById("cbParamVirtual6"),
        strArr = str.value.split(" "),
        date = strArr[0],
        time = strArr[1] || '00:00:00';

    var month = date.split("/")[0],
        day = date.split("/")[1],
        year = date.split("/")[2],
        hour = time.split(":")[0],
        minute = time.split(":")[1],
        second = time.split(":")[2];

    monthField.value = month;
    dayField.value = day;
    yearField.value = year;
    hourField.value = hour;
    minuteField.value = minute;
    secondField.value = second;

    document.addEventListener("BeforeFormSubmit", function() {
        str.value = ' ';
        str.value = monthField.value + '/' + dayField.value + '/' + yearField.value + ' ' + hourField.value + ':' + minuteField.value + ':' + secondField.value;
    });
});
</script>

where EditRecordDate_Field is an ID of the Date/Time field and cbParamVirtual1 is an ID of the virtual field for displaying a separate part of the Date/Time field.

For a better understanding of how it works, please see the attached screenshots: 

 

Search and Report Wizard - Configure Details Page Fields:

[Kurumi]

Hi everyone - Just wanted to share this solution. If you want to save and select Date and Time in (1) Text Field instead of separating them into different fields. You may use an external JS library called flatpickr: https://flatpickr.js.org/getting-started/ 

To know more, you can check the post here: 

 

[Kurumi]

Hi - Just to add, here's a new post to disable the dates in a custom calendar date picker: