JSFiddle - React, Tailwind, and code Playground

by sgterban

HTML

<script src="http://localhost/~sterban/js/mobiscroll-1.5.2.js"></script>
<link rel="stylesheet" href="http://localhost/~sterban/css/mobiscroll-1.5.2.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css">
<body>
<div data-role="page" data-theme="b" id="jqm-home">
        <div data-role="header" data-theme="a">
            <h1>Mobiscroll</h1>
        </div>

        <div data-role="content" data-theme="d">
            <form id="testform">
                <div data-role="fieldcontain">
                    <label for="theme">Theme</label>
                    <select name="theme" id="theme" data-native-menu="false">
                        <option value="default">Default</option>
                        <option value="android">Android</option>
                        <option value="sense-ui">Sense UI</option>
                        <option value="ios">iOS</option>
                    </select>
                </div>

                <div data-role="fieldcontain">
                    <label for="mode">Mode</label>
                    <select name="mode" id="mode" data-native-menu="false">
                        <option value="scroller">Scroller</option>
                        <option value="clickpick">Clickpick</option>
                    </select>
                </div>

                <div data-role="fieldcontain">
                    <label for="date1">Date</label>
                    <input type="text" name="date1" id="date1" class="mobiscroll" value="01.01.2011" />
                </div>

                <div data-role="controlgroup" data-type="horizontal">
                    <button id="disable" data-theme="a">Disable</button>
                    <button id="enable" data-theme="a">Enable</button>
                </div>
                <div...

JavaScript

$(document).ready(function() {
    // Date with external button
    $('#date1').scroller();
    // Time
    $('#date2').scroller({
        preset: 'time'
    });
    // Datetime
    $('#date3').scroller({
        preset: 'datetime'
    });

    var group = {};
    var wheels = [group];
    for (var i = 1; i < 4; i++) {
        var wheel = {};
        for (var j = 0; j < 100; j++) {
            wheel[j] = '<img src="img/fruit-' + (j % 5 + 1) + '.png" />'
        }
        group['Fruit ' + i] = wheel;
    }

    $('#custom').scroller({
        width: 90,
        wheels: wheels
    });

    $('#disable').click(function() {
        $('#date1').scroller('disable');
        return false;
    });

    $('#enable').click(function() {
        $('#date1').scroller('enable');
        return false;
    });

    $('#get').click(function() {
        alert($('#date1').scroller('getDate'));
        return false;
    });

    $('#set').click(function() {
        $('#date1').scroller('setDate', new Date(), true);
        return false;
    });

    $('#theme, #mode').change(function() {
        var t = $('#theme').val();
        var m = $('#mode').val();
        $('#date1').scroller('destroy').scroller({
            theme: t,
            mode: m
        });
        $('#date2').scroller('destroy').scroller({
            preset: 'time',
            theme: t,
            mode: m
        });
        $('#date3').scroller('destroy').scroller({
            preset: 'datetime',
            theme: t,
            mode: m
        });
        $('#custom').scroller('option', {
            theme: t,
            mode: m
        });
    });
});