Date Picker Samples vs Code

Samples

Simple Date Picker
A simple calendar goes with following three lines.
           //#temptime is id of a text box to hold date  
           $("#temptime").datepicker({ 
             //picker is a button to fire date picker up.
             picker: "" 
           });
        
The following lines make text box and button together.
            .picker
	        {
	            height:16px;
	            width:16px;
	            background:url("/images/icons/cal.gif") no-repeat;
	            margin-left:-19px;
	            cursor:pointer;
	            border:none;		  
	        }
        
Two Pickers Work Together
Every time date picker drops down, function applyrule will be called to define an avaliable range.
return format {startdate:'date',enddate:'date'};
            $("#datetime").datepicker({ picker: "", applyrule:rule });
            $("#endtime").datepicker({ picker: "", applyrule: rule });
            
            function rule(id) {
                //before start time picker drops down
                if (id == 'datetime') { 
                    var v = $("#endtime").val();
                    if (v == "") {
                        return null;
                    }
                    else {
                        //To get end time. All dates after end time will be disabled.
                        var d = v.match(/^(\d{1,4})(-|\/|.)(\d{1,2})\2(\d{1,2})$/);
                        if (d != null) {
                            var nd = new Date(parseInt(d[1], 10), parseInt(d[3], 10) - 1, parseInt(d[4], 10));
                            return { enddate: nd };
                        }
                        else {
                            return null;
                        }
                    }
                }
                else {
                    var v = $("#datetime").val();
                    if (v == "") {
                        return null;
                    }
                    else {
                       //To get start time. All dates before start time will be disabled.
                        var d = v.match(/^(\d{1,4})(-|\/|.)(\d{1,2})\2(\d{1,2})$/);
                        if (d != null) {
                            var nd = new Date(parseInt(d[1], 10), parseInt(d[3], 10) - 1, parseInt(d[4], 10));
                            return { startdate: nd };
                        }
                        else {
                            return null;
                        }
                    }

                }
            }
        
Attach

Click me
date picked will goes here
            $("#hdobj").datepicker({ 
                                    picker: "#handler",  //this should be a hidden
                                    onReturn:function(d){
                                                alert(d.Format("M/d, yyyy"));
                                                $("#target").html(d.Format("M/d, yyyy"));
                                              } 
                                    });