can't pick date from calendar

[user2412]

hi,

i made this code to pick date but it didn't work, the date was unable to select/pick. this is my code. hope anyone can help me

 //this is my asp code
 <table>
 <td class="style40">
                Date sampling</td>
            <td class="style41">
                <asp:TextBox ID="txtDate" runat="server" Width="78px"></asp:TextBox>
                &nbsp;<div id="divCalendar" style="DISPLAY: none; POSITION: absolute" >
                    <asp:Calendar ID="Calendar1" runat="server" BackColor="White"  
                        BorderColor="#999999" BorderStyle="Outset" BorderWidth="2px" CellPadding="4" 
                        DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt" 
                        ForeColor="Black" Height="180px" Width="200px">
                        <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
                        <SelectorStyle BackColor="#CCCCCC" />
                        <NextPrevStyle VerticalAlign="Bottom" />
                        <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
                        <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
                        <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
                        <WeekendDayStyle BackColor="#FFFFCC" />
                        <OtherMonthDayStyle ForeColor="#808080" />
                    </asp:Calendar>
                </div>
                    <script>
                    function OnClick()
                    {
                      if( divCalendar.style.display == "none")
                        divCalendar.style.display = "";
                      else
                        divCalendar.style.display = "none";
                    }
                    </script>   

            <input class="style43" type="image" src="../image/datepicker_icon.jpg" onclick="OnClick()" />
            </table>

            //this is my vb.net code

              Private Sub Calendar1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged

    txtDate.Text = Calendar1.SelectedDate.ToShortDateString()
    Dim div As System.Web.UI.Control = Page.FindControl("divCalendar")

    If TypeOf div Is HtmlGenericControl Then
        CType(div, HtmlGenericControl).Style.Add("display", "none")
    End If
End Sub

[JorgeM]

The problem you are having is that you are using an input element for the image picker. Its causing a post back, which then reloads the page. Your show/hide function wont work properly.

Try this. change the input to an image element. remove the code from your vb.net to hide. clean up your javascript code a little...

vb.net code:

    Private Sub Calendar1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged

      txtDate.Text = Calendar1.SelectedDate.ToShortDateString()
    End Sub

your aspx page:

<form id="form1" runat="server">
<table>
<td class="style40">Date sampling</td>
<td class="style41">
  <asp:TextBox ID="txtDate" runat="server" Width="78px"></asp:TextBox>&nbsp;
  <div id="divCalendar" style="display:none; position:absolute;">
    <asp:Calendar ID="Calendar1" runat="server" BackColor="White"  
           BorderColor="#999999" BorderStyle="Outset" BorderWidth="2px" CellPadding="4" 
           DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt" 
           ForeColor="Black" Height="180px" Width="200px">
         <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
         <SelectorStyle BackColor="#CCCCCC" />
         <NextPrevStyle VerticalAlign="Bottom" />
         <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
         <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
         <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
         <WeekendDayStyle BackColor="#FFFFCC" />
         <OtherMonthDayStyle ForeColor="#808080" />
     </asp:Calendar>
  </div>

  <script>
  function picker() {
    var myCal = document.getElementById('divCalendar');
    if (myCal.style.display == "none") {
       myCal.style.display = "block";
    } else {
       myCal.style.display = "none";
    }
  }
  </script>   
  <img src="../image/datepicker_icon.jpg" onclick="picker()" />
  </table>
  </form>