定位日期选择器按钮

Posted 2023-05-08

【中文标题】定位日期选择器按钮

【英文标题】：Positioning datepicker button

【发布时间】：2019-06-30 07:23:54

【问题描述】：

我正在使用 ASP.Net 和 jQuery 开发我的网站。我正在使用月份选择器控件。我想将按钮放在输入旁边以显示日期。谁能帮帮我？

<div class="col-lg-3">
  @html.TextBox("IconDemo", DateTime.Today.ToString("MM/yyyy"), new  @id = "IconDemo", @class = "Default form-control form-control-sm", @readonly = true )
</div>

$("#IconDemo").MonthPicker(
  Button: "<button id='btmonthpicker' class='btn btn-warning btn-sm' ><i class='fa fa-calendar'></i></button>",
  Position: 
    collision: 'fit',
    at: 'left top',
    my: 'left bottom',
    of: $('#IconDemo')
  ,
  format: "mm-yy",
  startView: "months",
  minViewMode: "months",
  MaxMonth: 0,
  MaxYear: 0,
);

【问题讨论】：

这通常是它默认的工作方式。检查包含元素的宽度是否足以在一行中同时容纳输入和按钮，而不会导致换行

@Nessserine ben guirat，我不清楚你的问题。您所说的“我想将按钮放在输入旁边以显示日期”是什么意思。您希望在按钮单击时发生什么？是否要显示从 1 到 31 的所有日期

@Golda 作为照片显示我有一个日期选择器来选择月份和年份并将其显示在输入中。橙色按钮打开日期选择器我需要按钮位于输入右侧

欢迎来到 Stack Overflow。这似乎不是 jQuery UI DatePicker 小部件。您将需要扩展 div 以便它可以包含元素。如果不合适，fit 将移动它。您的at 和my 也可能需要调整。请提供一个最小、完整和可验证的示例：***.com/help/mcve

【参考方案1】：

我找到了解决这个问题的方法

<div class="col-lg-3">
  <div class="pull-right">
  @Html.TextBox("IconDemo", DateTime.Today.ToString("MM/yyyy"), new  @id = "IconDemo", @class = "Default form-control form-control-sm", @readonly = true )
</div>
</div>

只是将类 pull-right 添加到包含 datepicker 的 div 中