Saturday, 19 July 2014

Date Picker in JQuery

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

    <link rel="stylesheet" href="//">
    <script src="//"></script>
    <script src="//"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

        $(function () {
                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());

        <input type="text" id="datepicker" size="30">

        <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>

        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>


No comments:

Post a Comment