Thursday, June 7, 2012

Adding a trigger button for Datepicker


jQuery UI Adding a trigger button for Datepicker tutorial. By default, user can open datepicker when <input> element receives focus. we can change this very easily. We can make datepicker opens when a button is clicked instead. The most basic type of <button> can be enabled with just the showOn option
1$(function(){
2    var pickerOpts = {
3        showOn: "button"
4    }; 
5    $("#date").datepicker(pickerOpts);
6});
Complete Example Code:
01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
02<html lang="en">
03<head>
04<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
05<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
06<title>jQuery UI Datepicker Example 1</title>
07<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
08<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
09<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>
10<script type="text/javascript">
11    $(function(){
12        var pickerOpts = {
13            showOn: "button"
14        }; 
15        $("#date").datepicker(pickerOpts);
16    });
17</script>
18</head>
19<body>
20<label>Enter a date: </label><input id="date">
21</body>
22</html>
jQuery UI Adding a Trigger Button for Datepicker Tutorial
We can change the default text that show on the button. just providing a new string as the value of the buttonText option:
1$(function(){
2    var pickerOpts = {
3        showOn: "button",
4        buttonText: "Show Datepicker"
5    }; 
6    $("#date").datepicker(pickerOpts);
7});
jQuery UI Change text for trigger button for datepicker tutorial
1$(function(){
2    var pickerOpts = {
3        showOn: "button",
4        buttonImage: "img/datepicker/date.png",
5        buttonText: "Show Datepicker"
6    }; 
7    $("#date").datepicker(pickerOpts);
8});
jQuery UI Adding image for trigger button of datepicker tutorial
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)