HTML5: Date and time implementions in different browsers

This entry is part 21 of 34 in the series HTML5

There are some differences in the date and time implemention between the 4 major browsers Chrome, Mozilla, Safari and IE.

Notice from the screenshots below that Date and Time is only fully supported in Safari browser but Date and Time Local is supported in both Chrome and Safari.

Here the screenshot for Chrome:

chrome_datetime

Mozilla:

moz_datetime

Safari:

safari_datetime

IE:

ie_datetime

HTML5: Calendar and time

This entry is part 20 of 34 in the series HTML5

Before HTML5, we would use jqueryUI to create a calendar widget for user to pick a date and time.

You can refer to this earlier post regarding jqueryUI datepicker.

HTML5 offers the following date and time options:

  • Date and time
  • Date and time local – set to your local time with no UTC
  • Date
  • Time
  • Month
  • Week
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Date & Time</title>
</head>
<body>
<form>
    <label for='datetime_id'>Date & Time</label>
    <input required type='datetime' id='datetime_id' name='datetime'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='datetime_local_id'>Date & Time Local</label>
    <input required type='datetime-local' id='datetime_local_id' name='datetime-local'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='date_id'>Date</label>
    <input required type='date' id='date_id' name='date'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='time_id'>Time</label>
    <input required type='time' id='time_id' name='time'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='month_id'>Month</label>
    <input required type='month' id='month_id' name='month'/>
    <input type='submit' value='Go'/>
    <br>
    <label for='week_id'>Week</label>
    <input required type='week' id='week_id' name='week'/>
    <input type='submit' value='Go'/>
</form>
</body>
</html>

HTML5: Marking up date and time with the <time> element

This entry is part 14 of 34 in the series HTML5

If we have a date and time in a web page and we want to pass this date and time to a calendar through a script, we can use the <time> element so that time is written in a way readable by human.

Also, with the <time> element, we can specify a time with a format that can be understood by the calendar script.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com - HTML 5</title>
</head>
<body>

<article>
    <p>Live performance is set at this date <time pubdate datetime='2014-06-10T20:00'>June 10, 2014</time></p>
</article>

</body>
</html>

So in the above HTML, the human will see June 10, 2014 and the machine will see 2014-06-10T20:00.

jQuery UI & Spinner: Time

This entry is part 2 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Time

A custom widget extending spinner. Use the Globalization plugin to parse and output a timestamp, with custom step and page options.

Cursor up/down spins minutes, page up/down spins hours.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Time</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/jquery.mousewheel.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.js'></script>
    <script src='http://jqueryui.com/resources/demos/external/globalize.culture.de-DE.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $.widget('ui.timespinner', $.ui.spinner, {
            options: {
                // seconds
                step: 60 * 1000,
                // hours
                page: 60
            },

            _parse: function (value) {
                if (typeof value === 'string') {
                    // already a timestamp
                    if (Number(value) == value) {
                        return Number(value);
                    }
                    return +Globalize.parseDate(value);
                }
                return value;
            },

            _format: function (value) {
                return Globalize.format(new Date(value), 't');
            }
        });

        $(function () {
            $('#spinner').timespinner();

            $('#culture').change(function () {
                var current = $('#spinner').timespinner('value');
                Globalize.culture($(this).val());
                $('#spinner').timespinner('value', current);
            });
        });
    </script>
</head>
<body>

<p>
    <label for='spinner'>Time spinner:</label>
    <input id='spinner' name='spinner' value='08:30 PM'>
</p>

<p>
    <label for='culture'>Select a culture to use for formatting:</label>
    <select id='culture'>
        <option value='en-EN' selected='selected'>English</option>
        <option value='de-DE'>German</option>
    </select>
</p>

</body>
</html>
Try The Code

jQuery: Focus event

This entry is part 8 of 33 in the series jQuery Tutorial

There are a few other events that are commonly used in jQuery.

We look at an interesting event called focus.  Once you put the mouse into the textbox, the textbox will be put into focus.

<!doctype html>
<html>
<head>
    <title>focus demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        span {
            display: none;
        }
    </style>
</head>
<body>

<p>Enter something: <input type='text'> <span>You are in focus</span></p>
<script>
    $('input').focus(function () {
        $('span').fadeIn(4000);
    });
</script>

</body>
</html>

Try The Code

We have an anonymous function in focus and after the cursor has entered the text box, the function is ran bringing the text box in focus.

Here, we also have some simple CSS code, display: none.  That means anything that is wrapped inside the <span> will not be shown when the page is loaded.

We use fadeIn(), which is an animation method in jQuery to bring out the the ‘You are in focus’ text.

The 4000 in fadeIn(4000) is the time required to show the text.  In this case, it is 4000ms.