jQuery UI

Widgets

by Ryan Morris

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
<form id="my-form">
    
    <div>
        <label>Slider value:</label>
        <!-- could use html5 type "range" -->
        <input name="slider-field" id="slider-field" type="text"/>
        <div id="slider"></div>
    </div>
    
    <div>
        <label for="datepicker">Date:</label>
        <!-- 
            could make this an HTML5 "date" type; 
            but how to handle native datepickers? 
            1. Modernizr 
                if (!Modernizr.inputtypes.date) {} 
            2. Convert it to text on the fly
                 $('input[type="date"]').prop('type','text'); 
            3. CSS to hide the native datepickers per browser 
        -->
        <input type="text" id="datepicker" />
    </div>
    
    <div>
        <label for="spinner">Decimal spinner:</label>
        <!-- Could use "number" input type -->
        <input id="spinner" name="spinner" type="text" value="5.06" />
    </div>
</form>

CSS

/* To hide chrome/webkit datepickers 
input::-webkit-calendar-picker-indicator{
    display: none;
}
input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}
/**/

JavaScript

$(function () {

    /**
     * Slider Input
     */
    $("#slider").slider();

    // More options, assigning value to field
    /*$("#slider").slider({
        range: true,
        min: 0,
        max: 200,
        values: [5, 50],
        slide: function (event, ui) {
            $("#slider-field").val(ui.values[0] + "->" + ui.values[1]);
        }
    });
    
    // set default values
    $("#slider-field").val(
        $("#slider").slider('values', 0) + "->" + $("#slider").slider('values', 1)
    );
    /**/

    /**
     * Date Picker Input
     */

    $("#datepicker").datepicker();

    // format the date value
    //$("#datepicker").datepicker("option", "dateFormat", "yy-mm-dd");

    
    // With an icon
   /* $("#datepicker").datepicker({
       showOn: "button",
      buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
      buttonImageOnly: true,
      buttonText: "Select date",
      minDate: new Date("2014-01-01"),
      maxDate: new Date("2014-12-01")
    });
    /**/

    /**
     * Spinner Input
     * Note: need "mousewheel" plugin to support wheel
     * //cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js
     */

    $("#spinner").spinner({
        step: 0.01,
        numberFormat: "n"
    });


});