jQuery UI

Form Components

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>
        <input name="slider-field" id="slider-field" type="text"/>
        <div id="slider"></div>
    </div>
    
    <div>
        <label for="datepicker">Date:</label>       
        <input type="text" id="datepicker" />
    </div>
    
    <div>
        <label for="spinner">Decimal spinner:</label>
        <input id="spinner" name="spinner" type="text" value="5.06" />
    </div>
    
    <div>
        <label for "autocompleter">Select something and we'll auto complete it:</label>
        <input id="autocompleter" name="autocompleter" type="text" />
    </div>
</form>

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"
    });
    
    /**
     * Auto Complete
     *
     * Can select a local or remote source
     * When remote source
     * Request will search with query param "term"
     */
    
     var source1 = [
         "Google",
         "Yahoo",
         "Bing"
     ];
    
     var source2 = [
        {
            label: "Google", value: "1"
        },
        {
            label: "Yahoo", value: "2"
        },
        {
            label: "Bing", value: "3"
        }
    ];
        
    $("#autocompleter").autocomplete({
        source: source1,
        minLength: 1,
        delay: 0 // ms
    });
    
});