Start New Discussion within our Web Development Community

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

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>
This article has been dead for over six months. Start a new discussion instead.