ygtx
/
ygtx_oa


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
							<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Zebra_DatePicker examples</title>

        <link rel="stylesheet" href="public/css/reset.css" type="text/css">
        <link rel="stylesheet" href="../public/css/bootstrap.css" type="text/css">
        <link rel="stylesheet" href="public/css/style.css" type="text/css">

        <link type="text/css" rel="stylesheet" href="libraries/syntaxhighlighter/public/css/shCoreDefault.css">

        <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/XRegExp.js"></script>
        <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shCore.js"></script>
        <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shLegacy.js"></script>
        <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shBrushJScript.js"></script>
        <script type="text/javascript" src="libraries/syntaxhighlighter/public/javascript/shBrushXML.js"></script>

        <script type="text/javascript">
            SyntaxHighlighter.defaults['toolbar'] = false;
            SyntaxHighlighter.all();
        </script>

    </head>

    <body>

        <div class="main-wrapper">

            <h3>Zebra_DatePicker Demos (using the "Bootstrap" theme)</h3>

            <p>Click <a href="alternate.html">here</a> to use the "Metallic" theme or <a href="index.html">here</a> to use the default theme.</p><br><br>

            <strong>1.</strong> A date picker with defaults settings.

            <pre class="brush:js">
            $('#datepicker-example1').Zebra_DatePicker();
            </pre>

            <form action="javascript:void(0)" method="post">
            <div>
                <input id="datepicker-example1" type="text" data-zdp_direction="1">
            </div>
            </form>

            <p>&nbsp;</p>

            <strong>2.</strong> Dates can be selected only in the future, starting one day in the future.

            <pre class="brush:js">
            $('#datepicker-example2').Zebra_DatePicker({
                direction: 1    // boolean true would've made the date picker future only
                                // but starting from today, rather than tomorrow
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div><input id="datepicker-example2" type="text"></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>3.</strong> Dates can be selected only in the future, starting today. Also, Saturday and Sundays are always disabled.</p>

            <pre class="brush:js">
            $('#datepicker-example3').Zebra_DatePicker({
                direction: true,
                disabled_dates: ['* * * 0,6']   // all days, all monts, all years as long
                                                // as the weekday is 0 or 6 (Sunday or Saturday)
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div><input id="datepicker-example3" type="text"></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>4.</strong> The selectable dates are in the interval starting tomorrow and ending 10 days from tomorrow.</p>

            <pre class="brush:js">
            $('#datepicker-example4').Zebra_DatePicker({
                direction: [1, 10]
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div><input id="datepicker-example4" type="text"></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>5.</strong> Dates can be selected between 2 specific dates</p>

            <pre class="brush:js">
            $('#datepicker-example5').Zebra_DatePicker({
                // remember that the way you write down dates
                // depends on the value of the "format" property!
                direction: ['2012-08-01', '2012-08-12']
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div><input id="datepicker-example5" type="text"></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>6.</strong> Dates can be selected in the future, starting with a specific date</p>

            <pre class="brush:js">
            $('#datepicker-example6').Zebra_DatePicker({
                // remember that the way you write down dates
                // depends on the value of the "format" property!
                direction: ['2012-08-01', false]
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div><input id="datepicker-example6" type="text"></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>7.</strong> The second date picker's starting date is the value of the first date picker + 1</p>

            <pre class="brush:js">
            $('#datepicker-example7-start').Zebra_DatePicker({
                direction: true,
                pair: $('#datepicker-example7-end')
            });

            $('#datepicker-example7-end').Zebra_DatePicker({
                direction: 1
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div>
            <input id="datepicker-example7-start" type="text">
            <input id="datepicker-example7-end" type="text">
            </div>
            </form>

            <p>&nbsp;</p>

            <p><strong>8.</strong> Set the format of the returned date:</p>

            <pre class="brush:js">
            $('#datepicker-example8').Zebra_DatePicker({
                format: 'M d, Y'
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div><input id="datepicker-example8" type="text"></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>9.</strong> Show week number</p>

            <pre class="brush:js">
            $('#datepicker-example9').Zebra_DatePicker({
                show_week_number: 'Wk'
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div><input id="datepicker-example9" type="text"></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>10.</strong> Start with the &#8220;years&#8221; view &#8211; recommended for when users need to select their birth date. Remember that you can always switch between views by clicking in the header of the date picker between the &#8220;previous&#8221; and &#8220;next&#8221; buttons!</p>

            <pre class="brush:js">
            $('#datepicker-example10').Zebra_DatePicker({
                view: 'years'
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div><input id="datepicker-example10" type="text"></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>11.</strong> Stop after month selection</p>

            <pre class="brush:js">
            $('#datepicker-example11').Zebra_DatePicker({
                format: 'm Y'   //  note that because there's no day in the format
                                //  users will not be able to select a day!
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div><input id="datepicker-example11" type="text"></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>12.</strong> Handle the "onChange" event. If a callback function is attached to the "onChange"
            event, it will be called whenever the user changes the view (days/months/years), as well as when the user
            navigates by clicking on the "next"/"previous" icons in any of the views. The callback function called by
            this event takes two arguments - the view (days/months/years) and the "active" elements (not disabled) in
            that view, as jQuery elements allowing for easy customization and interaction with particular cells in the
            date picker's view:</p>

            <pre class="brush:js">
            $('#datepicker-example12').Zebra_DatePicker({

                // execute a function whenever the user changes the view (days/months/years),
                // as well as when the user navigates by clicking on the "next"/"previous"
                // icons in any of the views
                onChange: function(view, elements) {

                    // on the "days" view...
                    if (view == 'days') {

                        // iterate through the active elements in the view
                        elements.each(function() {

                            // to simplify searching for particular dates, each element gets a
                            // "date" data attribute which is the form of:
                            // - YYYY-MM-DD for elements in the "days" view
                            // - YYYY-MM for elements in the "months" view
                            // - YYYY for elements in the "years" view

                            // so, because we're on a "days" view,
                            // let's find the 24th day using a regular expression
                            // (notice that this will apply to every 24th day
                            // of every month of every year)
                            if ($(this).data('date').match(/\-24$/))

                                // and highlight it!
                                $(this).css({
                                    background: '#C40000',
                                    color:      '#FFF'
                                });

                        });

                    }

                }
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div><input id="datepicker-example12" type="text"></div>
            </form>

            <p>&nbsp;</p>

            <p><strong>13.</strong> Calendar is always visible. Set the "always_visible" property to point to a jQuery
            element which to contain the date picker</p>

            <pre class="brush:js">
            $('#datepicker-example13').Zebra_DatePicker({
                always_visible: $('#container')
            });
            </pre>

            <form action="javascript:void(0)" method="post">
            <div>
            <input id="datepicker-example13" type="text">
            <div id="container" style="margin: 10px 0 0 0; height: 250px"></div>
            </div>

            </form>

            <p>&nbsp;</p>

            <p><strong>14.</strong> Using data attributes</p>

            <p>Any property of the date picker can also be set via data-attributes. All you have to do is take any property
            described in the "Configuration" section and prefix it with "data-zdp_". One important thing to remember is that
            if the value of the property is an array you'll have to use <strong>double quotes</strong> inside the square
            brackets and therefore single quotes around the attribute - see the example below:</p>

            <pre class="brush:xml">
            &lt;input type="text" id="datepicker-example14" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'>
            </pre>

            <pre class="brush:js">
            $('#datepicker-example14').Zebra_DatePicker();
            </pre>

            <form action="javascript:void(0)" method="post">
            <div>
            <input id="datepicker-example14" type="text" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'>
            </div>

            </form>

            <br><br><br>

        </div>

        <script type="text/javascript" src="public/javascript/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="../public/javascript/zebra_datepicker.js"></script>
        <script type="text/javascript" src="public/javascript/core.js"></script>

    </body>

</html>