ngx-bootstrap 范围日期选择器值

Question

我正在创建一个数据表，我想按开始日期和结束日期对其进行过滤。我正在使用 ngx-bootstrap 范围日期选择器，但我想将输入字段的样式设置为特定的日期格式。

逻辑是这样的：

如果我在日期选择器中选择了同一个月的日期，我想在输入中显示如下内容：2020 年 4 月 1 日至 3 日。
如果我在日期选择器中选择的日期不是同一个月，我想将输入中的此格式更改为：2020 年 1 月 1 日至 4 月 3 日，否则：4 月 1 日至 3 日2020.
最后一种情况是，如果两个日期都来自同一年，我只想在第二个值中显示年份，例如 2020 年 1 月 1 日至 4 月 3 日，否则：1997 年 1 月 1 日至 2020 年 4 月 3 日。

我试图在 bsConfig 中设置它，但这似乎同时适用于两个日期，我的问题是：如何根据我的逻辑获取值并应用不同格式的日期？

是否可以简单地在 div 中而不是在输入中显示这些格式化值？

感谢您的任何回复！

Answer 1

好的，我找到了解决办法。我可以简单地使用 div 而不是使用输入。我必须将 ngDefaultControl 指令添加到 div，以确保我的日期选择器使用 div 而不是输入。这是我来自 HTML:

的代码

<div
        [bsConfig]="datePickerConfig"
        type="text"
        bsDaterangepicker
        placement="right bottom"
        #dpr="bsDaterangepicker"
        class="datepicker-input"
        readonly
        (bsValueChange)="onDateChange($event)"
        name="fieldName"
        ngDefaultControl
      >
        {{ chosenStartDate }} - {{ chosenEndDate }}
      </div>

在这种情况下，我可以在我的 ts 文件中有条件地更改格式。

ngx-bootstrap 范围日期选择器值

ngx-bootstrap range datepicker values

angular

datepicker

ngx-bootstrap