Saturday, 19 July 2014

Date Picker in JQuery



<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker - Animations</title>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

    <script>
        $(function () {
            $("#datepicker").datepicker({
                showButtonPanel: true,

                ////-- Dates in other months
                //showOtherMonths: true,
                //selectOtherMonths: true,

                ////-- Display multiple months
                //numberOfMonths: 3,

                ////-- Display month & year menus
                //changeMonth: true,
                //changeYear: true,

                ////-- Icon trigger
                //showOn: "button",
                //buttonImage: "images/calendar.gif",
                //buttonImageOnly: true

                ////-- Restrict date range
                //minDate: -20,
                //maxDate: "+1M +10D"

                ////-- Show week of the year
                //showWeek: true,
                //firstDay: 1
            });

            //-- Animations
            $("#anim").change(function () {
                $("#datepicker").datepicker("option", "showAnim", $(this).val());
            });


            //-- Format date
            $("#format").change(function () {
                $("#datepicker").datepicker("option", "dateFormat", $(this).val());
            });
        });
    </script>
</head>
<body>

    <p>
        Date:
        <input type="text" id="datepicker" size="30">
    </p>

    <p>
        Animations:<br>
        <select id="anim">
            <option value="show">Show (default)</option>
            <option value="slideDown">Slide down</option>
            <option value="fadeIn">Fade in</option>
            <option value="blind">Blind (UI Effect)</option>
            <option value="bounce">Bounce (UI Effect)</option>
            <option value="clip">Clip (UI Effect)</option>
            <option value="drop">Drop (UI Effect)</option>
            <option value="fold">Fold (UI Effect)</option>
            <option value="slide">Slide (UI Effect)</option>
            <option value="">None</option>
        </select>
    </p>

    <p>
        Format options:<br>
        <select id="format">
            <option value="mm/dd/yy">Default - mm/dd/yy</option>
            <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
            <option value="d M, y">Short - d M, y</option>
            <option value="d MM, y">Medium - d MM, y</option>
            <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
            <option value="&apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy">With text - 'day' d 'of' MM 'in the year' yy</option>
        </select>
    </p>


</body>
</html>






No comments:

Post a Comment