Question

使用bsdatepicker实现日期范围选择器。删除第二个日历所需的CSS如下所示。将CSS放入style.css。 [bsConfig]它可以帮助您设置日期格式。 [Mindate]用于禁用以前的日期，您需要在ts文件中编写一些逻辑。

<input placeholder="Daterange" type="text" id="searchInputDates" [minDate]="minDate" name="Date"
                bsDaterangepicker [(ngModel)]="searchInputDates" [bsConfig]="{ rangeInputFormat: 'DD MMM' }"
                separator="to" class="btn city-button shadow-sm"/>


css required to remove second canlender:

.bs-datepicker-multiple+.bs-datepicker-multiple {
  visibility: hidden !important;
  display: none;

 }
 .bs-datepicker
 {
   background: none !important;
   -webkit-box-shadow: none !important; 
   box-shadow: none !important;
 }
 .bs-datepicker-multiple
 {
   background: #fff;
 }
 .theme-green .bs-datepicker-body table td.week span {
   display: none;
 }
 .bs-datepicker-head button.next, .bs-datepicker-head button.previous {

   visibility: visible !important;

 }
 .bs-datepicker-multiple+.bs-datepicker-multiple+ .bs-datepicker-head+.previous+.bs-datepicker-head+ .next {
      visibility: hidden !important;
 }
 .theme-green .bs-datepicker-head {
   background-color: #27a745 !important;
 }
 td span.selected, .theme-green .bs-datepicker-body table td.selected span, .theme-green .bs-datepicker-body table td span[class*="select-"]:after, .theme-green .bs-datepicker-body table td[class*="select-"] span:after {
   /* background-color: #5cb85c; */
   background-color: #27a745 !important;
 }

使用bsdatepicker的Angular Date Range Picker实现使用要显示格式的单个日历

0 个答案: