HTML5: Color picker

This entry is part 24 of 34 in the series HTML5

HTML5 provides a native color picker but currently, only Chrome browser supports this feature.

<input type='color' id='color_id' name='color'/>

To use color picker, we use input type=’color’.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Color picker</title>
</head>
<body>
<form>
    <label for='color_id'>Pick A Color</label>
    <input type='color' id='color_id' name='color'/>
    <input type='submit' value='Go'/>
</form>
</body>
</html>

jQuery UI & Slider: Colorpicker

This entry is part 5 of 11 in the series jQuery UI Slider

jQuery UI Slider – Colorpicker

Combine three sliders to create a simple RGB colorpicker.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Slider - Colorpicker</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='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        #red, #green, #blue {
            float: left;
            clear: left;
            width: 300px;
            margin: 15px;
        }

        #swatch {
            width: 120px;
            height: 100px;
            margin-top: 18px;
            margin-left: 350px;
            background-image: none;
        }

        #red .ui-slider-range {
            background: #ef2929;
        }

        #red .ui-slider-handle {
            border-color: #ef2929;
        }

        #green .ui-slider-range {
            background: #8ae234;
        }

        #green .ui-slider-handle {
            border-color: #8ae234;
        }

        #blue .ui-slider-range {
            background: #729fcf;
        }

        #blue .ui-slider-handle {
            border-color: #729fcf;
        }
    </style>
    <script>
        function hexFromRGB(r, g, b) {
            var hex = [
                r.toString(16),
                g.toString(16),
                b.toString(16)
            ];
            $.each(hex, function (nr, val) {
                if (val.length === 1) {
                    hex[ nr ] = '0' + val;
                }
            });
            return hex.join('').toUpperCase();
        }
        function refreshSwatch() {
            var red = $('#red').slider('value'),
                    green = $('#green').slider('value'),
                    blue = $('#blue').slider('value'),
                    hex = hexFromRGB(red, green, blue);
            $('#swatch').css('background-color', '#' + hex);
        }
        $(function () {
            $('#red, #green, #blue').slider({
                orientation: 'horizontal',
                range: 'min',
                max: 255,
                value: 127,
                slide: refreshSwatch,
                change: refreshSwatch
            });
            $('#red').slider('value', 255);
            $('#green').slider('value', 140);
            $('#blue').slider('value', 60);
        });
    </script>
</head>
<body class='ui-widget-content' style='border:0;'>

<p class='ui-state-default ui-corner-all ui-helper-clearfix' style='padding:4px;'>
    <span class='ui-icon ui-icon-pencil' style='float:left; margin:-2px 5px 0 0;'></span>
    Simple Colorpicker
</p>

<div id='red'></div>
<div id='green'></div>
<div id='blue'></div>

<div id='swatch' class='ui-widget-content ui-corner-all'></div>


</body>
</html>
Try The Code Slider Widgets API Doc

jQuery UI & Datepicker: Dates in other months

This entry is part 5 of 14 in the series jQuery UI Datepicker

jQuery UI Datepicker – Dates in other months

The datepicker can show dates that come from other than the main month being displayed. These other dates can also be made selectable.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Datepicker - Dates in other months</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='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#datepicker').datepicker({
                showOtherMonths: true,
                selectOtherMonths: true
            });
        });
    </script>
</head>
<body>

<p>Date: <input type='text' id='datepicker'></p>

</body>
</html>
Try The Code Datepicker Widgets API Doc