date and time control format

Question

I have used Ajax calender extender to display date in Date_Box and then numeric up down extenders to chose time...

Here is my code:

<td bgcolor="#969ECD">
            &nbsp;&nbsp;&nbsp;
            <asp:TextBox ID="Date_Box" runat="server" Width="85px"></asp:TextBox>&nbsp;

            <br />
             <div style="height: 4px"></div>

            &nbsp;&nbsp;&nbsp;
            <asp:TextBox ID="txtHour" runat="server" ></asp:TextBox>
            <ajaxToolkit:NumericUpDownExtender ID="txtHour_NumericUpDownExtender" 
                runat="server" Enabled="True" Maximum="12" Minimum="1"  
                TargetControlID="txtHour" Width="70" >    
            </ajaxToolkit:NumericUpDownExtender>

            <asp:TextBox ID="txtMinute" runat="server"></asp:TextBox>
            <ajaxToolkit:NumericUpDownExtender ID="txtMinute_NumericUpDownExtender" 
                runat="server" Enabled="True" Maximum="59" Minimum="1" 
                TargetControlID="txtMinute" Width="70" >
            </ajaxToolkit:NumericUpDownExtender>

            <asp:TextBox ID="txtDayPart" runat="server"></asp:TextBox>
            <ajaxToolkit:NumericUpDownExtender ID="txtDayPart_NumericUpDownExtender" 
                runat="server" Enabled="True" RefValues="AM;PM" TargetControlID="txtDayPart"  Width="70">
            </ajaxToolkit:NumericUpDownExtender>

            <asp:Button ID="Update" runat="server"  Text="Update" 
               onclick="Update_Click1" />
            <br />
        </td>
    </tr>
</table>
</div>

     <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" 
    TargetControlID="Date_Box" PopupPosition="TopRight"  >
     </ajaxToolkit:CalendarExtender>

Now functionality wise the only problem is when i write something in the textbox other than the normal format and click the update button it lets me accept the values instead it should not let it write anything else other than the date format.. eg no alphabets in the textbox..

This i can still figure out, using some exception message...

but now the main problen is the look of the control. The numeric extender buttons are too big and the line format is not good, also there is lots of space between the three time textboxes... is there a way to make this look neat>>>

How can i solve the problem... any suggestions???!

here is the image link http://www.freeimagehosting.net/image.php?05945773e0.jpg alt text

Answer 1

The easiest thing to do is to assign your numeric extenders a CssClass property, and use css to fix the layout issues.

Answer 2

You can use asp:RegularExpressionValidator to validate textbox contents: http://msdn.microsoft.com/en-us/library/eahwtc9e.aspx

The documentation for NumericUpDown specifies you can use custom images for the updown buttons: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/NumericUpDown/NumericUpDown.aspx

Answer 3

You may want to try the FilteredTextbox from the ajax control kit found here. It will prevent typing into the box if they do not meet certain criteria. Hope this helps Tom