Javascript: Short time notation

Question

At the moment I'm involved in making a scheduling application. In this application we want to make sure our users are able to insert times very quickly. So here is my plan (see JSfiddle link below):

I want my users to click on one of the empty table cells and a textfield will appear, the user is able to fill in 2 timemarks, one from and one untill. After the users press the enter-key the time will be saved as a div in the same place as where the textfield appeared. This part is already working as you can see in my fiddle:

https://jsfiddle.net/rhantink/jm294oLk/3/

var tableFunctions = {


"createTimeBox": function () {
    var timeBox = document.createElement("input");
    $(timeBox).addClass("timeBox");
    $(timeBox).attr('type', 'text');
    $(timeBox).keypress(function (e) {
        if (e.which == 13) {
            var timeEntry = tableFunctions.createTimeEntry($(this).val());
            $(".timeBox").replaceWith(timeEntry);

            console.log(this);
        }
    });
    return timeBox;

},

    "createTimeEntry": function (textEntry) {
    var timeEntry = document.createElement("div");
    $(timeEntry).addClass("timeEntry");
    $(timeEntry).text(textEntry);

    return timeEntry;
}

}




var scheduler = {
    "Applicatie": 'HRM2.0',

        "init": function () {
        console.log('Init');

        $(".day").click(function () {

            $('.timeBox').remove();
        var timeBox = tableFunctions.createTimeBox();
        $(this).append(timeBox);
        $(timeBox).focus();



        })
    }

}


$(document).ready(

scheduler.init()

)

However... Users need to be able to type in '12-16' or '1200-1600' and then press enter. With javascript I want to make a translation which wil make the time appear in the div as '12:00 - 16:00'. Later on I also want them to type in '9-17c' where the 'c' stands for course, meaning they used that time window for some course. My question is: Is there any javascript framework which makes this easier or is there someone who could point me in the right direction with developing something like this?

Also feel free to comment me on my coding.

Thank you,

Robert

Answer 1

You should use Regular Expressions. You can test what the user writes with a specific pattern and if it matches, you can do your translation.

For example to test '12-16' strings :

if(/([0-9]{2})-([0-9]{2})/.test($('#inputID').val()))
  //do your thing

Here is a small fiddle about regex.