آموزش ساخت TimePicker

آموزش ساخت TimePicker در Kendo UI

آموزش ساخت timepicker در Kendo UI

متد ()kendoTimePicker

با استفاده از متد ()kendoTimePicker در Kendo UI، می توانید یک TimePicker بسازید.

پیکربندی (Configuration)

نام	توضیحات
animation	با استفاده از این خصوصیت می توانید، نحوه ی باز و بسته شدن پنجره ی گزینه های TimePicker را تغییر دهید. اگر آنرا با مقدار false تنظیم کنید، متحرک سازی لغو خواهد شد.
change	با نام یک تابع تنظیم می شود و زمانی که مقدار ابزار تغییر کرد صدا زده می شود.
culture	(default: en-US) زبان مورد استفاده در این ابزار را مشخص می کند.
format	(default: h:mm tt) فرمت استفاده شده را تعیین می کند.
interval	(default: 30) فاصله بین مقادیر لیست را تعیین می کند. (به دقیقه)
max	(default: 00:00) بزرگترین زمانی است که می تواند توسط کاربر انتخاب شود.
min	(default: 00:00) کوچکترین زمانی است که می تواند توسط کاربر انتخاب شود.
value	(default: null) زمان انتخاب شده را تعیین می کند.

در مثال زیر، نحوه ساخت TimePicker با استفاده از متد ()kendoTimePicker نشان داده شده است:

مثال (RTL)

<!DOCTYPE html>
<html>
<head>
    <title>RTL support</title>
    <meta charset="utf-8">
    <link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="/../../../js/jquery.min.js"></script>
    <script src="/../../../js/kendo.web.min.js"></script>
    <script src="/../../content/shared/js/console.js"></script>
    <script>

    </script>


</head>
<body>
        <div id="example" class="k-content">
            <div class="k-rtl">
                <input id="timepicker" />
            </div>

            <script>
                $(document).ready(function() {
                    $("#timepicker").kendoTimePicker();
                });
           </script>
        </div>
</body>
</html>

اجرای مثال »

رویدادهای TimePicker در Kendo UI

نام	توضیحات
change	زمانی که مقدار تغییر کند، اتفاق می افتد.
close	زمانی که پنجره ی گزینه ها بسته می شود، اتفاق می افتد.
open	زمانی که پنجره ی گزینه ها باز می شود، اتفاق می افتد.

در مثال زیر، هر تغییری که در TimePicker صورت گیرد، یک پیغام چاپ می شود:

مثال (Events)

اجرای مثال »

متدهای TimePicker در Kendo UI

نام	توضیحات
close()	پنجره گزینه های ابزار را می بندد.
enable(bool)	فعال یا غیرفعال کردن ابزار.
open()	پنجره گزینه های ابزار را باز می کند.
max()	تنظیم یا برگرداندن بزرگترین زمانی که می تواند توسط کاربر انتخاب شود.
min()	تنظیم یا برگرداندن کوچکترین زمانی که می تواند توسط کاربر انتخاب شود.
value()	مقدار (value) انتخاب شده در ابزار را تنظیم یا برمی گرداند.
readonly()	ابزار را فقط خواندنی می کند.

در مثال زیر، متدهای مختلف TimePicker نشان داده شده است:

مثال (API)

<script>
    $(document).ready(function() {
        $("#timepicker").kendoTimePicker()
                      .closest(".k-widget")
                      .attr("id", "timepicker_wrapper");

        var timepicker = $("#timepicker").data("kendoTimePicker");

        var setValue = function () {
            timepicker.value($("#value").val());
        };

        $("#enable").click(function() {
            timepicker.enable();
        });

        $("#disable").click(function() {
            timepicker.enable(false);
        });

        $("#readonly").click(function() {
            timepicker.readonly();
        });

        $("#open").click(function() {
            timepicker.open();
        });

        $("#close").click(function() {
            timepicker.close();
        });

        $("#value").kendoTimePicker({
            change: setValue
        });

        $("#set").click(setValue);

        $("#get").click(function() {
            alert(timepicker.value());
        });
    });
</script>

اجرای مثال »

در مثال زیر، کاربر باید یک محدوده زمانی را مشخص نماید:

مثال (Range selection)

<!DOCTYPE html>
<html>
<head>
    <title>Range selection</title>
    <meta charset="utf-8">
    <link href="/../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="/../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="/../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="/../../../js/jquery.min.js"></script>
    <script src="/../../../js/kendo.web.min.js"></script>
    <script src="/../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
        <div id="example" class="k-content">
            <div class="demo-section" style="width: 500px;">

                <label for="start">Start time:</label>
                <input id="start" value="8:00 AM" />

                <label for="end" style="margin-left:3em">End time:</label>
                <input id="end" value="8:30 AM"/>

            </div>
            <script>
                $(document).ready(function() {
                    function startChange() {
                        var startTime = start.value();

                        if (startTime) {
                            startTime = new Date(startTime);

                            end.max(startTime);

                            startTime.setMinutes(startTime.getMinutes() + this.options.interval);

                            end.min(startTime);
                            end.value(startTime);
                        }
                    }

                    //init start timepicker
                    var start = $("#start").kendoTimePicker({
                        change: startChange
                    }).data("kendoTimePicker");

                    //init end timepicker
                    var end = $("#end").kendoTimePicker().data("kendoTimePicker");

                    //define min/max range
                    start.min("8:00 AM");
                    start.max("6:00 PM");

                    //define min/max range
                    end.min("8:00 AM");
                    end.max("7:30 AM");
                });
            </script>
        </div>
    
            
</body>
</html>