如何在同一行获得两个日期选择器？

Posted 2023-02-22

【中文标题】如何在同一行获得两个日期选择器？

【英文标题】：How to get two datepickers on same line?

【发布时间】：2015-03-11 09:40:14

【问题描述】：

我有两个 RadDatePickers，一个标签和一个按钮。我正在尝试为用户创建一个表单来选择两个日期来设置时间段。我遇到的问题是 RadDatepickers 不会保持在同一条线上。所有这些元素都在一个表中。我希望它们在一行中，而不是元素出现在另一个下方。

这是我的代码：

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel ID="UpdatePanel5" runat="server">
        <ContentTemplate>
            <table>
                <tr>
                    <td bgcolor="#EEF4FD" class="style77">

                    </td>
                    <td bgcolor="#EEF4FD" class="style87">
                    </td>
                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:RadioButton ID="nameSearch" runat="server" 
                            GroupName="searchRad" Text="Company Name" 
                            AutoPostBack="True" oncheckedchanged="nameSearch_CheckedChanged" />
                    </td>
                </tr>

                <tr>
                    <td bgcolor="#EEF4FD" class="style77">
                    </td>
                    <td bgcolor="#EEF4FD" class="style87">
                    </td>
                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:RadioButton ID="dateSearch" runat="server" GroupName="searchRad" 
                            Text="Date Created" 
                            AutoPostBack="True" oncheckedchanged="dateSearch_CheckedChanged" />
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#EEF4FD" class="style77">
                    </td>
                    <td bgcolor="#EEF4FD" class="style87">
                    </td>
                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:Panel ID="Panel1" runat="server">
                            <asp:TextBox ID="SearchBox" runat="server" Width="350px"></asp:TextBox>
                            &nbsp;&nbsp;
                            <asp:Button ID="btnSearch1" runat="server" Text="Search" onclick="btnSearch1_Click" />
                        </asp:Panel>

                        <asp:Panel ID="Panel2" runat="server" Visible="false">
                            <telerik:RadDatePicker ID="RadDatePicker1" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                            </telerik:RadDatePicker>
                            &nbsp;&nbsp;
                            <asp:Label ID="dash" runat="server" Text=" to "></asp:Label>
                            &nbsp;&nbsp;
                            <telerik:RadDatePicker ID="RadDatePicker2" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                            </telerik:RadDatePicker>
                            &nbsp;&nbsp;
                            <asp:Button ID="btnSearch2" runat="server" Text="Search" onclick="btnSearch2_Click" />
                        </asp:Panel>
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

请帮助我。提前致谢。

【参考方案1】：

删除最后一个TR和colspan="3"中的两个空TD 更改您的最后一个 TR 块，如下所示

               <tr>
                    <td bgcolor="#EEF4FD" class="style83" colspan="3">
                        <asp:Panel ID="Panel1" runat="server">
                            <asp:TextBox ID="SearchBox" runat="server" Width="350px"></asp:TextBox>
                            &nbsp;&nbsp;
                            <asp:Button ID="btnSearch1" runat="server" Text="Search" onclick="btnSearch1_Click" />
                        </asp:Panel>

                        <asp:Panel ID="Panel2" runat="server" Visible="false">
                            <telerik:RadDatePicker ID="RadDatePicker1" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                            </telerik:RadDatePicker>
                            &nbsp;&nbsp;
                            <asp:Label ID="dash" runat="server" Text=" to "></asp:Label>
                            &nbsp;&nbsp;
                            <telerik:RadDatePicker ID="RadDatePicker2" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                            </telerik:RadDatePicker>
                            &nbsp;&nbsp;
                            <asp:Button ID="btnSearch2" runat="server" Text="Search" onclick="btnSearch2_Click" />
                        </asp:Panel>
                    </td>
                </tr>

【讨论】：

有没有办法让元素在同一行，而不删除空的TDs？我需要两个空的TDs。

@ProblemChild 您可以尝试给第三个 TD 固定宽度，这样您的内容将固定在一行中

我明白了。谢谢。

您可以将其发布为答案。所以它可能对未来的用户有用。

【参考方案2】：

我想通了。

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:UpdatePanel ID="UpdatePanel5" runat="server">
        <ContentTemplate>
            <table>
                <tr>
                    <td bgcolor="#EEF4FD" class="style77">
                    </td>

                    <td bgcolor="#EEF4FD" class="style87">
                    </td>

                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:RadioButton ID="nameSearch" runat="server" 
                        GroupName="searchRad" Text="Company Name" 
                        AutoPostBack="True" oncheckedchanged="nameSearch_CheckedChanged" />
                    </td>
                </tr>

                <tr>
                    <td bgcolor="#EEF4FD" class="style77">
                    </td>

                    <td bgcolor="#EEF4FD" class="style87">
                    </td>

                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:RadioButton ID="dateSearch" runat="server" GroupName="searchRad" 
                        Text="Date Created" 
                        AutoPostBack="True" oncheckedchanged="dateSearch_CheckedChanged" />
                    </td>
                </tr>

                <tr>
                    <td bgcolor="#EEF4FD" class="style77">
                    </td>

                    <td bgcolor="#EEF4FD" class="style87">
                    </td>

                    <td bgcolor="#EEF4FD" class="style83">
                        <asp:Panel ID="Panel1" runat="server">
                            <asp:TextBox ID="SearchBox" runat="server" Width="350px"></asp:TextBox>
                            &nbsp;&nbsp;
                            <asp:Button ID="btnSearch1" runat="server" Text="Search" onclick="btnSearch1_Click" />
                        </asp:Panel>

                        <asp:Panel ID="Panel2" runat="server" Visible="false">
                            <asp:Table ID="pnlTable" runat="server">
                                <asp:TableRow>
                                    <asp:TableCell>
                                        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                                        </telerik:RadDatePicker>
                                    </asp:TableCell>

                                    <asp:TableCell>
                                        <asp:Label ID="dash" runat="server" Text=" to "></asp:Label>
                                    </asp:TableCell>

                                    <asp:TableCell>
                                        <telerik:RadDatePicker ID="RadDatePicker2" runat="server" DateInput-DateFormat="dd-MM-yyyy" Skin="Default" style="margin-left: 0px">
                                        </telerik:RadDatePicker>
                                    </asp:TableCell>

                                    <asp:TableCell>
                                        <asp:Button ID="btnSearch2" runat="server" Text="Search" onclick="btnSearch2_Click" />
                                    </asp:TableCell>
                                </asp:TableRow>
                            </asp:Table>
                        </asp:Panel>
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>