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>
این مطلب را به اشتراک بگذارید...
نظر / سوال