如何在日期选择器日历中突出显示当前日期?

时间:2018-07-07 00:49:50

标签: angular bootstrap-4 ng-bootstrap

我正在使用ng-bootstrap datepicker 要在我的应用程序内联日历中显示日历,日历不会显示这样的当前日期。

enter image description here

我尝试了一切,但没有任何尝试,有人可以帮助您解决此问题吗?

3 个答案:

答案 0 :(得分:1)

您可以尝试以下解决方案:
Working Example

Sub CalculateEdges(cCavities() As cCavity, dEdges As cEdges)
Dim i As Integer

For i = 1 To UBound(cCavities)
    Dim TempEdge As cEdge



    Dim AdjSize As Integer
    AdjSize = cCavities(i).AdjacencySize
    If AdjSize> MaxEdges Then MaxEdges = AdjSize
    Dim j As Integer
    For j = 1 To AdjSize
        Set TempEdge = New cEdge
        With TempEdge
            'Edge Names are a combination of two node names
            .Name = cCavities(i).Name & cCavities(i).Adjacency(j)
            'Sets the start node (Object) for the edge
            .SetNode cCavities(i), 0
            'Sets the end node (Object) for the edge
            .SetNode BackGround.NodeByName(cCavities, cCavities(i).Adjacency(j)), 1
            'Used later in program
            .Value = 0
        End With
        dEdges.Add TempEdge
        dEdges.PrintNames
    Next j
Next i

HTML:

简单的日期选择器

import {Component,OnInit} from '@angular/core';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';

const now = new Date();

@Component({
  selector: 'ngbd-datepicker-basic',
  templateUrl: './datepicker-basic.html'
})
export class NgbdDatepickerBasic implements OnInit  {

  model: NgbDateStruct;
  date: {year: number, month: number};

  ngOnInit(){
     this.selectToday()
   }

  selectToday() {
    this.model = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
  }
}

答案 1 :(得分:1)

您可以尝试使用此解决方案。

model = {
    year: now.getFullYear(), 
    month: now.getMonth() + 1, 
    day: now.getDate()
}

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

答案 2 :(得分:1)

没有。您必须制作一个自定义日模板https://ng-bootstrap.github.io/#/components/datepicker/examples#customday 那么如果日期是今天,您可以添加一个课程

<ng-template #customDay let-date="date" let-currentMonth="currentMonth" 
                        let-selected="selected" let-disabled="disabled"
                        let-focused="focused">
  <!--see how add a [class.today]="isToday(date)" -->
  <span class="custom-day" [class.weekend]="isWeekend(date)" [class.focused]="focused"
        [class.bg-primary]="selected" [class.hidden]="date.month !== currentMonth"
        [class.text-muted]="disabled" [class.today]="isToday(date)">
    {{ date.day }}
  </span>
</ng-template>

在您的.ts文件中添加class.today和函数isToday

//in styles:
    styles: [`
        ....
        .custom-day.today{
             background-color:red
        }
  `]

//declare a variable today
     today:NgbDateStruct
//In ngOnInit()
    ngOnInit()
    {
        let date=new Date();
        this.today={year:date.getFullYear(),month:date:getMonth()+1,day=date.getDate()}
    }
//Our function isToday()
    isToday(date:NgbDateStructur)
    {
        if (!today)
             return false;
        return date.Year==this.today.Year && 
               date.Month==this.today.Month && 
               date.Day==this.today.Day
    }