Datepickers in jQueryUI allow users to enter dates easily and visually. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. Show
jQueryUI provides datepicker() method that creates a datepicker and changes the appearance of HTML elements on a page by adding new CSS classes. Transforms the <input>, <div>, and <span> elements in the wrapped set into a datepicker control. By default, for <input> elements, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a <div>, or <span> element. SyntaxThe datepicker() method can be used in two forms −
$ (selector, context).datepicker (options) MethodThe datepicker (options) method declares that an <input> element (or <div>, or <span>, depending on how you choose to display the calendar) should be managed as a datepicker. The options parameter is an object that specifies the behavior and appearance of the datepicker elements. Syntax$(selector, context).datepicker(options); You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows − $(selector, context).datepicker({option1: value1, option2: value2..... });
The following table lists the different options that can be used with this method −
The following section will show you a few working examples of datepicker functionality. Default functionalityThe following example demonstrates a simple example of datepicker functionality passing no parameters to the datepicker() method. <!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-1" ).datepicker();
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-1"></p>
</body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result − Inline DatepickerThe following example demonstrates a simple example of inline datepicker functionality. <!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-2" ).datepicker();
});
</script>
</head>
<body>
<!-- HTML -->
Enter Date: <div id = "datepicker-2"></div>
</body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result − In the above example we use <div> element to get the inline date picker. Use of appendText, dateFormat, altField and altFormatThe following example shows the usage of three important options (a) appendText (b) dateFormat (c) altField and (d) altFormat in the datepicker function of JqueryUI. <!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-3" ).datepicker({
appendText:"(yy-mm-dd)",
dateFormat:"yy-mm-dd",
altField: "#datepicker-4",
altFormat: "DD, d MM, yy"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-3"></p>
<p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
</body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result − In the above example, you can see that the date formate for first input is set as yy-mm-dd. If you select some date from datepicker the same date is reflected in the second input field whose date format is set as "DD, d MM, yy". Use of beforeShowDayThe following example shows the usage of option beforeShowDay in the datepicker function of JqueryUI. <!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-5" ).datepicker({
beforeShowDay : function (date) {
var dayOfWeek = date.getDay ();
// 0 : Sunday, 1 : Monday, ...
if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
else return [true];
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-5"></p>
</body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result − In the above example sunday and saturday are disabled. Use of showOn, buttonImage, and buttonImageOnlyThe following example shows the usage of three important options (a) showOn (b) buttonImage and (c) buttonImageOnly in the datepicker function of JqueryUI. <!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-6" ).datepicker({
showOn:"button",
buttonImage: "/jqueryui/images/calendar-icon.png",
buttonImageOnly: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-6"></p>
</body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result − In the above example an icon is displayed which needs to b clicked to open the datepicker. Use of defaultDate, dayNamesMin, and durationThe following example shows the usage of three important options (a) dayNamesMin (b) dayNamesMin and (c) duration in the datepicker function of JqueryUI. <!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-7" ).datepicker({
defaultDate:+9,
dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
duration: "slow"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-7"></p>
</body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result − In the above example the names of the days are changed using dayNamesMin. You can also see a default date is set. Use of prevText, nextText, showOtherMonths and selectOtherMonthsThe following example shows the usage of three important options (a) prevText (b) nextText (c) showOtherMonths and (d) selectOtherMonths in the datepicker function of JqueryUI. <!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-8" ).datepicker({
prevText:"click for previous months",
nextText:"click for next months",
showOtherMonths:true,
selectOtherMonths: false
});
$( "#datepicker-9" ).datepicker({
prevText:"click for previous months",
nextText:"click for next months",
showOtherMonths:true,
selectOtherMonths: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
<p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
</body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result − In the above example the prev and nect links have captions. If you click on the element, the datepicker opens. Now in the first datepicker, the other months dates are disable as selectOtherMonths is setfalse. In the second date picker for second input type, the selectOtherMonths is set totrue. Use of changeMonth, changeYear, and numberOfMonthsThe following example shows the usage of three important options (a) changeMonth (b) changeYear and (c) numberOfMonths in the datepicker function of JqueryUI. <!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-10" ).datepicker({
changeMonth:true,
changeYear:true,
numberOfMonths:[2,2]
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-10"></p>
</body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result − In the above example, you can see dropdown menus for Month and Year fields. And we are dispalying 4 months in an array structure of [2,2]. Use of showWeek, yearSuffix, and showAnimThe following example shows the usage of three important options (a) showWeek (b) yearSuffix and (c) showAnim in the datepicker function of JqueryUI. <!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-11" ).datepicker({
showWeek:true,
yearSuffix:"-CE",
showAnim: "slide"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-11"></p>
</body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result − In the above example, you can see that week numbers are displayed on the left side of datepicker as showWeek is set to true. The year is have a suffix of "-CE". $ (selector, context).datepicker ("action", [params]) MethodThe datepicker (action, params) method can perform an action on the calendar, such as such as selecting a new date. The action is specified as a string in the first argument and optionally, one or more params can be provided based on the given action. Basically, here actions are nothing but they are jQuery methods which we can use in the form of string. Syntax$(selector, context).datepicker ("action", [params]);
The following table lists the actions for this method −
The following examples show the use of some of the actions listed in the above table. Use of setDate() actionNow let us see an example using the actions from the above table. The following example demonstrates the use of actions setDate. <!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-12" ).datepicker();
$( "#datepicker-12" ).datepicker("setDate", "10w+1");
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-12"></p>
</body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output − Use of show() actionThe following example demonstrates the use of action show. <!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-13" ).datepicker();
$( "#datepicker-13" ).datepicker("show");
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-13"></p>
</body>
</html>
Let us save the above code in an HTML file datepickerexample.htm and open it in a standard browser which supports javascript, you must also see the following output − Event Management on datepicker elementsThere are no datepicker event methods as of now! |
Cara menggunakan php jquery datepicker example
Pos Terkait
How do i add an array of documents in mongodb?
Learn how to update array fields in documents in MongoDB collections. You can use the updateOne() or updateMany() methods to add, update, or remove array elements based on the specified criteria. It ...
Alt f4 doesn t work windows 10
The combination of ALT + F4 is useful in shutting down applications and systems. It is one of the most-used keyboard shortcuts, however, many users report that the combination doesn’t work. If you ...
Send excel sheet by email power automate
SBX - Finance HeadingPower Automate Fundamentals # 37: Send Emails from Excel Sheet (OneDrive) in Power Automate on 8 Dec 2021 12:30 PMIntroduction:One common manual work was to send emails to list ...
Cara menggunakan show hide javascript onclick
bagaimanakah cara membuat shhow hide pada text / tulisan , widget blog menggunakan javascript .. ?di hari ini di blognya mastony akan membagikan tips untuk membuat show hide pada tulisan/ text , ...
Mysql update multiple columns with join
SQL UPDATE Command SQL UPDATE Command Update command in SQL is used to change any record in the table. Records are to be manipulated or updated using update command. Conditional update is the most ...
How do i lock a reference in a formula in google sheets?
One of the best things about Google Sheets is that allows you to collaborate with other people easily.When sharing your work with other people, you may also want to lock some cells in Google Sheets ...
Cara menggunakan increase mysql upload limit
How to change the maximum upload file size for PHP scriptsThis article describes how to change the maximum upload file size for PHP scripts by using the upload_max_filesize and post_max_size php ...
Cara menggunakan api loginphp mysql
Bismillaahirrohmaanirrohiim…Sudah pernah mendengar istilah rest api?hmmmm… disini saya akan mencoba membuat tutorial tentang bagaimana cara membuat sendiri rest api dengan php mysql yang ...
Cara menggunakan is mysqli a database?
Membuat Koneksi Database Dengan PHP dan MySQLiMembuat Koneksi Database Dengan PHP dan MySQLi – Selamat datang kembali di tutorial pemrograman web terlengkap dan terbaik di indonesia. yaitu di ...
Cara menggunakan is mysql 5.6 deprecated?
Early adopters of our customers are considering to upgrade to MySQL 8.0. To be prepared we have created a check-list:Table of ContentsTo upgrade MySQL 5.6 to 5.7 on CentOS 7To upgrade MySQL 5.7 to ...
Copyright © 2023 apayangkamu Inc.
