آموزش jQuery UI قسمت چهارم کار با Datepicker
0 0

آموزش jQuery UI قسمت چهارم کار با Datepicker


آموزش jQuery UI قسمت چهارم کار با Datepicker

در این پست در ادامه آموزش jQuery UI به مبحث Datepicker می پردازیم.

در مثال زیر برای نمایش Datepicker یک تگ div قرار دادیم و سپس id آن را برابر datepicker تعریف کردیم و سپس با یک خط کد jQuery تابع datepicker را صدا زدیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#datepicker").datepicker({
                inline: true
            });
        });
    </script>
</head>
<body>
    <div id="datepicker"></div>
</body>
</html>

مثال دیگر از Datepicker

در مثال زیر یک input قرار دادیم و id آن را برابر date قرار دادیم و زمانی که روی input کلیک می شود datepicker نمایش داده می شود.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#date").datepicker();
        });
    </script>
</head>
<body>
    <label for="date"></label>
    <input type="text" id="date" placeholder="Date" />
</body>
</html>

مثال کاربردی از datepicker

مثال زیر همانند مثال قبلی می باشد با این تفاوت که زمانی که روی input کلیک می شود و datepicker نمایش داده می شود و با انتخاب یک تاریخ تاریخ مورد نظر در یک input دیگر نمایش داده می شود.

appendText : یک متن را به صفحه append می کند.

dateFormat : فرمت تاریخ نمایشی را مشخص می کنیم.

altField : آی دی inputی که می خواهیم تاریخ در آن نمایش داد شود مشخص می کنیم.

altFormat : فرمت نمایش تاریخ در input دوم را مشخص می کند.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#date").datepicker({
                appendText: "DateTimePicker",
                dateFormat: "yy/mm/dd",
                altField: "#displayDate",
                altFormat: "DD ,d MM , yy"
            });
        });
    </script>
</head>
<body>
    <!-- Datepicker -->
    <label for="date"></label>
    <input type="text" id="date" placeholder="Date" />
    <input type="text" id="displayDate" />
</body>
</html>

دانلود

نویسنده حسین فتحی
گروه مطلب JqueryUI
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۶ تیر ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha