ngx-bootstrap range datepicker values

Question

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

逻辑是这样的：

1. 如果我选择日期选择器中的同一天的日期，我想在输入中显示类似以下内容：2020年4月1日至3日。

2. 如果我在日期选择器中选择的日期不是同一个月，我想将此格式更改为：2020年1月1日至2020年4月3日，否则：2020年4月1-3日。

3. 最后一种情况是，如果两个日期都来自同一年，我只想显示第二个值中的年份，例如2020年1月1日至2020年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文件中有条件地更改格式。