Thursday, June 7, 2012

How to Disable previous Date in Jquery Datepicker.


<script type="text/javascript">
$(function() {
$("#txtStartDate").datepicker(
    {
    dateFormat: "dd/mm/yy",
        showOn: "button",
    changeYear: true,
    changeMonth: true,
    minDate:"0",
    onSelect:function()
    {
    UpdateStartDate();
    }
    }
    );
    $("#endValid").datepicker(
    {
    dateFormat: "dd/mm/yy",
    showOn: "button",
    changeYear: true,
    changeMonth: true,
    minDate:"0"
    }
    );
});


   
function UpdateStartDate()
{
str = $("#startValid").val();
if(str != "")
{
var parts = str.split("/");
parts[0]++;
date = new Date(parts[2], parts[1]-1, parts[0]);

$("#endValid" ).datepicker( "option", "minDate", date );
date2 = new Date();
date2.setFullYear(date.getFullYear(), date.getMonth(), date.getDate()-1);
date2.setMonth(date2.getMonth()+12, date2.getDate());

$( "#endValid" ).datepicker( "option", "default", date2 );
month = date2.getMonth()+1;
month = month.toString();
day = date2.getDate();
day = day.toString();
if(month.length == 1)
{
    month = "0" + month;
}
if(day.length == 1)
{
    day = "0" + day;
}
dateStr = day +"/"+month+"/"+date2.getFullYear();
if($("#endValid").val() == "")
  {
    $("#endValid").val(dateStr);
  }
 }
}
</script>
Posted by at No comments:

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:
Subscribe to: Posts (Atom)