<%@ Page Language="C#" 
        AutoEventWireup="true" 
        CodeFile="wwDatePicker.aspx.cs" 
        Inherits="wwDatePickerSample" 
        MaintainScrollPositionOnPostback="true"                                       
%>
<%@ Register Assembly="Westwind.AjaxToolkit" Namespace="Westwind.Web.Controls" TagPrefix="ww" %>
<%@ Register src="ShowCode.ascx" tagname="ShowCode" tagprefix="uc1" %>
<!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 runat="server">
    <title>jQuery Calendar Control ASP.NET Control</title>
    <link href="WestWind.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .samplebox
        {
        	border-bottom: dashed 1px teal;
        	margin-bottom: 15px;
        	padding: 15px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>jQuery UI Datepicker ASP.NET Control</h1>
    <a href="http://www.west-wind.com/"><img alt="" src="images/wwtoollogo_text.gif" style="float: right" border="0" /></a>
    <small>
    &nbsp;<a href="./">Home</a> | 
    <a href="http://www.west-wind.com/files/tools/jQueryDatePicker.zip">Download Control</a>
        | <a href="wwDatePicker.aspx">Reload Page</a></small><br clear="all" />
    <div style="padding: 25px;">
        This page is a sample of an ASP.NET wrapper control for 
        <a href="http://marcgrabanski.com/code/ui-datepicker/">Marc Grabanski's jQuery 
        UI Datepicker control</a>.
        The control relies on jQuery and jQuery UI Datepicker. The control implementation wraps both <a href="http://jquery.com">jQuery</a>
        and jQuery UI Datepicker's resources internally so the control is fully self-contained with overrides
        for external references of all resources.
        <br />
        <br />
        
    
    
        <div class="samplebox">
        <h3>Text Box AutoPopup:</h3>
        <hr />
        This version pops up the calendar on field activation:<br /><br />
                
        Enter Date: <ww:wwDatePicker runat="server" 
                id="txtAutoPopupDate" DisplayMode="AutoPopup" />
        </div>

        <div class="samplebox">
       <h3>Image Button Popup:</h3>
       <hr />
       This version shows a calendar image button to click on to pop up the calendar:<br /><br />
       
       Enter Date: 
            <ww:wwDatePicker runat="server" id="txtImageButton" width='80px' 
                           DisplayMode="ImageButton" DateFormat="yyyy-MM-dd" />
       </div>

        <div class="samplebox">
        <h3>Plain Button Popup:</h3>
        <hr />
        Basic popup button version of the Calendar.<br /><br />
        Enter Date: <ww:wwDatePicker runat="server" id="txtPlainButton" width='80px' 
                                       DisplayMode="Button" />        
        </div>               
        
        <div class="samplebox">
        <h3>Inline Calendar:</h3>
        <hr />
        You can also pop up the calendar inline. This version tracks the calendar SelectedValue
        and reassigns it on PostBack operations.<br /><br />
        <ww:wwDatePicker runat="server" id="txtInline" width='80px' 
                           DisplayMode="Inline"  >1/1/0001</ww:wwDatePicker>
        
        <br />
        <br clear="all">    
        <br />
        The controls are PostBack aware so they will persist their values across postbacks.<br />
        <asp:Button runat="server" id="btnPostBack" Text="Post Back" />
        </div>
    </div>
    </div>
    
    <uc1:ShowCode ID="ShowCode" runat="server" CodeFile="~/wwDatePicker.aspx" Text="ASPX Page Code" />
    <uc1:ShowCode ID="ShowCode1" runat="server" CodeFile="~/wwDatePicker.aspx.cs" Text="CodeBehind" />
    <br /> 
    <br />    
    <hr />
    <a href="http://www.west-wind.com/"><img alt="" src="images/wwtoollogo_text.gif" style="float: right" /></a>
    <small>&copy <%= DateTime.UtcNow.Year %>, Rick Strahl - West Wind Technologies</small>
    <p />


<div id="divMessage" class="errordisplay"></div>

<asp:PlaceHolder runat="server" ID="temp" Visible="false">
<script src="scripts/jquery.js" type="text/javascript"></script>
</asp:PlaceHolder>
    <script type="text/javascript">
    jQuery(document).ready(function() {
    
      jQuery.log = function (msg) {
          if (console)
             console.log("%s", msg);
          else
              $("#divMessage").text(msg);
          return this;
      } 
      
      jQuery(":submit,#txtImageDatePopup").css( {"background-color":"#F1F9FC","border":"solid 1px lightblue" } );
 
        
         });

jQuery(document).ready(function() {
jQuery.fn.attachDatepickerInputKeys = function() {                            
    if (this.length < 1) return this;
       
    this.keydown( function(e) {        
        var j = jQuery(this);        
        var di = jQuery.datepicker._getInst(this._calId);    
        if (!di)
            return;
            
        var d = di._getDate();
        if (d) {
            var month = d.getMonth();
            var year = d.getFullYear();
            var day = d.getDate();
        }               
        
        switch(e.keyCode) {
            case 84: j.val( di._formatDate( new Date() ) ); di._setDate( new Date() ); return false;  // T
            case 109: 
                if (!d) 
                    return false; 
                d = new Date(year,month,day-1); 
                j.val(di._formatDate(d)); 
                di._setDate(d) ; 
                return false;
            case 61:  
            case 107: 
                if (!d) 
                    return false; 
                d = new Date(year,month,day+1); 
                j.val(di._formatDate(d)); 
                di._setDate(d) ; 
                return false;
        }
    });
    
    return this;  
}
});
//    var di = $("#txtDateTest").attachDatepicker({ "showOn": 'button'} ).attachDatepickerInputKeys();    
//});
        
            
    </script>
    </form>
</body>
</html>
