Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to create Jquery DatePicker in HTML.
The Jquery DatePicker plugin with the property named showOn which creates the DatePicker (Calendar) to be shown only when the adjoining Button (Icon) is clicked.
Code for HTML Page
On the HTML page i will place a textbox to show the date that will be select by the user from date picker with the id named txt_calender.
On the HTML page i am using or inherited the below mentioned CSS file as well as .js files .
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<input type="text" id="txt_calender "/>
Inside the Jquery document ready event handler, the TextBox has been applied with Jquery DatePicker plugin.
Here i am assigning the below mentioned properties to the Jquery DatePicker plugin showOn – button
The Jquery DatePicker will be shown only when the Button next to the TextBox is clicked.
buttonImageOnly – true
The Button will be an Image.
buttonImage – URL
The URL of the Image file to be displayed as Button.
dateFormat – dd/mm/yy
The Jquery DatePicker will show the selected Date in dd/MM/yyyy date format inside the TextBox.
<script type="text/javascript">
$(function () {
$("#txt_calender").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif',
dateFormat: 'dd/mm/yy'
});
});
</script>
Below i am also giving a image with the named calendar. You need to download this image by right click and save as image option and place it inside the images folder on the root folder.
Now i am giving the complete code for HTML page. You can copy and paste the whole code on your HTML page and enjoy the implementation of this program
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
#txtDate { position: relative; top: -7px; margin-right: 5px; }
</style>
</head>
<body>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<input type="text" id="txt_calender" />
<script type="text/javascript">
$(function () {
$("#txt_calender").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif',
dateFormat: 'dd/mm/yy'
});
});
</script>
</body>
</html>
See the output of this code in below image.
Thanks and Regards
Using Asp.net
No comments:
Post a Comment