More natural date & time input

[tim.young]

Something that bugs me is the very specific format you have to type in a date and time in order for the input to be validated. I would love a more natural language input. For instance, when entering a date - it must be typed as “06:30 PM” or “04:00 PM”. With a more natural input, you could just type “6:30pm” or “4pm” and the field would save as 06:30 PM and 04:00 PM.

Same thing applies to dates. Dates must be entered very specifically and when entering a date + time in field, it’s very tedious to type out.

Best comparison I could make is something like Todoist, or TickTick with natural language input.

[moe]

Tim, this is very valid point. We’ve considered adding this in the past however it ended up causing data integrity concerns so we scrapped those plans.

But I know some customers have built pretty cool stuff with some Javascript. I’ll write an article on this and post it here a bit later today.

Here’s a preview of how that looks:

Will keep you posted.

[jose-s]

nice!

I await this code too, will this only work in english?

So I know - what data integrity issues are you concerned about with this type of feature?

[moe]

@jose-s - by data integrity I mean that if we take the approach of converting natural language values to proper date/time format its very likely that at some point the time translated will not be what the user actually intended and this can cause data integrity issues. The only way to remedy that would be to add another layer of verification and that complicates it a bit too much for the time field.

This doesn’t appear to work in Spanish from my short testing, but I’m confident there are other JS libraries you can use that would accomplish the same thing.

[moe]

Sorry about the delay…

Here’s how to add this:

1. FIrst add the library to the custom header/footer code section

   <script src="https://cdnjs.cloudflare.com/ajax/libs/sugar/2.0.6/sugar.min.js"></script>

2. Find the ID of the text field you’ll use to type the natural time as well as the id of the field you wish to update.

Next paste this code into the Javascript section of the page and don’t forget to update the ID’s of the fields.

In my case #fieldlGArg9kQmR is the id of the field I’m typing in the natural time. and I had 3 fields being updated at the same time. Date, Date/time and just time.

var flag = false;
function checkFlag() {
    if(flag === false) {
        if ($('#fieldlGArg9kQmR') !== null) {
            flag = true;
        }
       window.setTimeout(checkFlag, 100);
    } else {
        var orgLimit = 140;
        $(function(){
            setTimeout(function(){
                $('#fieldlGArg9kQmR').on('keydown || keyup || focusout || change',function(){
                    
                    var naturalDate = $(this).val();
                    var date = new Sugar.Date(naturalDate);
                    
                    console.log (date.format('%H:%M').raw);
                    // document.querySelector("#field_block_field_120 > input").value = date.format('%H:%M').raw;
                    $('#field_block_field_120 input').val(date.format('%m/%d/%Y').raw);
                    $('#field_block_field_122 input').val(date.format('%m/%d/%Y %I:%M %p').raw);
                    $('#field_block_field_121 input').val(date.format('%H:%M').raw);
                    

                });  
            },900);
        });
    }
}
checkFlag();

As you can see you can also customize the output format of the date and time.

Here’s where you can see all the details about using this library.

Sugar - Home

If you have any questions please let me know.

[remedina18]

with the help of Tim im able to use this code on one field on my form, but I have the need for it to work on two fields on the same form. user needs to enter start time and end time. is this possible?

[Chem]

Good to hear from you again! @remedina18

Here’s how you can use this with a Start and End time.

Step 1: Add a CSS Class to the Start Time (start-time) and End Time (end-time) fields

Step 2: Find the Field IDs for the two Text input fields

Step 3: Add the following JavaScript to the page

remember to change “component_ID” to your component ID

var START_TIME_TEXT_FIELD = "PASTE_FIELD_ID_HERE";
var END_TIME_TEXT_FIELD = "PASTE_FIELD_ID_HERE";
TB.render('component_ID', function(data) {
    // Date: %m/%d/%Y
    // Date/Time: %m/%d/%Y %I:%M %p
    // Time: %H:%M
    $('#field'+START_TIME_TEXT_FIELD).on('keydown || keyup || focusout || change',function(){
        var naturalDate = $(this).val();
        var date = new Sugar.Date(naturalDate);
        $('.start-time input').val(date.format('%I:%M %p').raw).change();
    });
    
    $('#field'+END_TIME_TEXT_FIELD).on('keydown || keyup || focusout || change',function(){
        var naturalDate = $(this).val();
        var date = new Sugar.Date(naturalDate);
        $('.end-time input').val(date.format('%I:%M %p').raw).change();
    });
});

[Chem]

And for those who want, date fields would work the same way as above for a Start and End date.

All I did was change the classes and JavaScript.

var DATE_START_FIELD_ID = "LX6QawrZk4";
var DATE_END_FIELD_ID = "ka6jMnor75";
TB.render('component_3', function(data) {
    // Date: %m/%d/%Y
    // Date/Time: %m/%d/%Y %I:%M %p
    // Time: %H:%M
    $('#field'+DATE_START_FIELD_ID).on('keydown || keyup || focusout || change',function(){
        var naturalDate = $(this).val();
        var date = new Sugar.Date(naturalDate);
        $('.start-date input').val(date.format('%m/%d/%Y').raw);
    });
    
    $('#field'+DATE_END_FIELD_ID).on('keydown || keyup || focusout || change',function(){
        var naturalDate = $(this).val();
        var date = new Sugar.Date(naturalDate);
        $('.end-date input').val(date.format('%m/%d/%Y').raw);
    });
});

[remedina18]

Hi Chem, long time.
Thank you it works great.

[remedina18]

something is not working right. It populates the times on the form correctly but the times are not getting recorded on the table when submitted.

[Chem]

You’re right @remedina18. We have to add “.change()” to the code

I’ve updated the post above to reflect this.