corrade-http-templates – Rev 62

Subversion Repositories:
Rev:
<!doctype html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Spinner - Time</title>
        <link rel="stylesheet" href="../../themes/base/all.css">
        <link rel="stylesheet" href="../demos.css">
        <script src="../../external/requirejs/require.js"></script>
        <script src="../bootstrap.js" data-modules="external/globalize/globalize external/globalize/globalize.culture.de-DE external/jquery-mousewheel/jquery.mousewheel">
                $.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" );
                        }
                });

                $( "#spinner" ).timespinner();

                $( "#culture" ).on( "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>

<div class="demo-description">
<p>
        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.
</p>
</div>
</body>
</html>