asp.netvb.netdatepickeronclientclick

Creating text & button controls dynamically and populating text box with date values


I currently have a VB.Net application that builds textboxes dynamically.
I need to display a button control which will display a datepicker and then populate the corresponding textbox with the selected date value.

I am creating the btnCalendar dynamically since there are more than one calendar buttons on a particular page, so btnCalendar.ID = tab.ID & grdRowID

Protected Sub DisplaySearchWindow()
Dim ddl As DropDownList
Dim txt As TextBox
Dim cal As Calendar
Dim btnCalendar As Button 

Select Case iIndex
  Case 1
     Dim cv As New CompareValidator
     txt = New TextBox
     txt.ID = "txt" & UserName & grdRowID.Name
     cv.ControlToValidate = txt.ID
     btnCalendar = New Button
     btnCalendar.ID = "btnCalDisplay" & tab.ID & grdRowID
     btnCalendar.Text = "+"
     btnCalendar.ToolTip = "click to view calendar" 
     btnCalendar.Attributes.Add("OnClientClick", "javascript:return ShowAlert('Hi');")
     c.Controls.Add(cv)
     c.Controls.Add(txt)
     c.Controls.Add(btnCalendar)

When building the button control in codebehind, I have btnCalendar.OnClientClick = btnCalendar.Visible = True

When I run the application and click btnCalendar, I get an error message JavaScript runtime error: 'True' is undefined.

How can I display the DatePicker control using btnCalendar.OnClientClick (or any other alternative) from codebehind ?


Solution

  • If you are open to an alternative (which from your post, you indicate so), you can try this:

    Select Case iIndex
      Case 1
         Dim cv As New CompareValidator
         txt = New TextBox
         txt.ID = "txt" & UserName & grdRowID.Name
         txt.cssclass="DateValue"
         cv.ControlToValidate = txt.ID
         c.Controls.Add(cv)
         c.Controls.Add(txt)
    

    Then on your aspx page, follow the example on the JQueryUI page:

      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
        $( "#datepicker" ).datepicker();
      });
      </script>