标签: primeng-calendar

我有这个奇怪的错误,我使用PrimeNG在我的应用程序中显示DatePicker.当我尝试使用bootstrap时form-control,我得到了一个视觉错误.

这是我的模板:

<div class="form-group row">
    <div class="form-group col-md-2">
        <label for="valeur">Valeur</label>
        <input type="number" id="valeur" class="form-control" />
    </div>

    <div class="form-group col-md-5">
        <label for="dateDebut">Date de début</label>
        <p-calendar id="dateDebut" dateFormat="dd/mm/yy" styleClass="form-control" [showIcon]="true"></p-calendar>
    </div>

    <div class="form-group col-md-5">
        <label for="dateFin">Date de fin</label>
        <p-calendar id="dateFin" dateFormat="dd/mm/yy" styleClass="form-control" [showIcon]="true"></p-calendar>
    </div>
</div>

这是结果:

编辑

如果它有任何帮助,这里是生成的HTML:

<div class="form-group col-md-5" _ngcontent-scp-1="">
   <label for="dateDebut" _ngcontent-scp-1="">Date de début</label>
   <p-calendar ng-reflect-show-icon="true" ng-reflect-date-format="dd/mm/yy" ng-reflect-style-class="form-control" styleclass="form-control" id="dateDebut" dateformat="dd/mm/yy" _ngcontent-scp-1="">
      <!--template bindings={
         "ng-reflect-ng-if": "true"
         }-->
      <span ng-reflect-initial-classes="form-control" class="form-control ui-calendar" ng-reflect-raw-class="ui-calendar">
         <input id="dp1467976345328" ng-reflect-value="" class="hasDatepicker ui-inputtext …

我正在使用 PrimeNG 完整日历组件开发一个 Angular 应用程序，这个：https ://primefaces.org/primeng/showcase/#/fullcalendar

那是基于 Angular FullCalendar 组件，这个：https ://fullcalendar.io/

在这里你可以找到我的完整代码：https : //bitbucket.org/dgs_poste_team/soc_calendar/src/master/

我在尝试动态更改日历上呈现的事件的背景颜色时遇到了一些困难。我必须根据不同的事件信息（开始事件时间，例如：如果一个事件在 07:00 开始是绿色的，如果它在 15:00 开始它是红色的，如果它从 23 开始： 00它是蓝色的，但这个逻辑此时并不重要）。

在我的项目中，我将外部事件拖到我的日历中，如下所示：https : //fullcalendar.io/docs/external-dragging-demo

因此，正如您在我的 BitBucket 存储库中所看到的，我有这个 FullcalendarComponent 处理包含从外部组件接收事件的日历的组件：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { EventService } from '../event.service';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import { FullCalendar } from 'primeng';

@Component({
  selector: 'app-fullcalendar',
  templateUrl: './fullcalendar.component.html',
  styleUrls: …

我想在我的应用程序中使用PrimeNG日历.当我运行代码时,我收到错误:

ReferenceError:未定义jQuery.

其他PrimeNG指令工作正常.如果我删除<p-calendar>错误消失.

我在我的应用中导入并包含了日历.顺便说一下,我正在使用最新版本的角度,路由器和表格.在此之前我遇到了这个问题,并通过更新表单提供程序来修复它

 <p-calendar [(ngModel)]="date"></p-calendar> 

Stacktrace摘录:

ReferenceError:在DebugAppView._View_AddShipmentComponent0.detectChangesInternal(AddShipmentComponent.template.js)的Calendar.ngAfterViewInit(eval at(http:// localhost:8080/js/app.js:930:2),:44:90)中未定义jQuery. :930:59)在DebugAppView.Appte.detectChanges(eval at(http:// localhost:8080/js/vendor.js:716:2),:243:14)在DebugAppView.detectChanges(eval at(http:/) /localhost:8080/js/vendor.js:716:2),:348:44)

我编写了一个自定义表单控件，它实际上是组件的包装器p-calendar。组件定义如下所示（注意：-我删除了一些代码以使其简单）

export class MyDatePickerComponent implements ControlValueAccessor, OnInit, OnChanges {
  @Input() _myDate : Date;
  @Input() control: FormControl;  
  @Input() dateFormat: string;  
  @Output() myDateChange : EventEmitter<Date> = new EventEmitter<Date>();

  propagateChange: any = () => {};
  validateFn:any;

  get myDate(){ 
    return this._myDate;
  }
  set myDate(val){    
    this._myDate = val;        
    this.propagateChange(this._myDate);
  }
  constructor() { }

  //OnInit Implementation
  ngOnInit() {
    this.validateFn = (c: FormControl) => {
      if (c.value == null) {
        return null;
      }
      let dateErr = { invalidDate: { valid: false } };      
      let userDate …

过滤日期范围 || 数据表

我需要一些有关如何过滤日期范围的帮助。

我想搜索在搜索输入中创建的日期，但似乎不起作用。没有找到记录。我正在搜索有关自定义过滤器的信息，但是我很难做到这一点。

我正在使用momentjs。

是否可以隐藏inputprimeng日历中的字段，并仅显示图标？我不想将p-calendar元素更改为内联，而只是显示将弹出日历的图标。

组件.html

<div class="ui-g-12 ui-md-4">
  <p-calendar class="foo-cal" appendTo="body" readonlyInput="true" dateFormat="yy/mm/dd" [(ngModel)]="date" [showIcon]="true"></p-calendar>
</div>

我尝试了以下方法，但没有成功：

body .ui-calendar.ui-calendar-w-btn .ui-inputtext {
    display: none !important;
}

p-calendar span input {
    display: none !important;
}

但是，使用浏览器中的开发工具，如果我将display: none;属性添加到元素，它将隐藏，仅留下图标。有什么想法可以让我在没有输入字段的情况下渲染 html 文件吗？

我正在使用 PrimeNG 完整日历组件开发一个 Angular 应用程序，这个：https ://primefaces.org/primeng/showcase/#/fullcalendar

那是基于 Angular FullCalendar 组件，这个：https ://fullcalendar.io/

在这里你可以找到我的完整代码：https : //bitbucket.org/dgs_poste_team/soc_calendar/src/master/

我在尝试动态更改日历上呈现的事件的背景颜色时遇到了一些困难。我必须根据不同的事件信息（开始事件时间，例如：如果一个事件在 07:00 开始是绿色的，如果它在 15:00 开始它是红色的，如果它从 23 开始： 00它是蓝色的，但这个逻辑此时并不重要）。

在我的项目中，我将外部事件拖到我的日历中，如下所示：https : //fullcalendar.io/docs/external-dragging-demo

所以我想要的是，当我将一个事件拖到我的日历中时，它的背景将具有基于开始时间的特定颜色。

因此，正如您在我的 BitBucket 存储库中所看到的，我有这个FullcalendarComponent处理包含从外部组件接收事件的日历的组件：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { EventService } from '../event.service';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
import { FullCalendar } from 'primeng';

@Component({
  selector: 'app-fullcalendar',
  templateUrl: './fullcalendar.component.html', …

我正在 Angular 6 中开发。保存新记录时，我将表单值作为 json 保存在数据库中。如果最终用户想要显示存在记录，我会从 json 数据填充表单组件。但是我在转换日期值时遇到了麻烦。我无法正确投射我的本地日期。我已经尝试过，但没有奏效：

console.log("string Value",stringValue);
let date = moment(stringValue,"yyyy-mm-ddThh:mm:ss.fffZ");                             
console.log("date",date.format('DD/MM/YYY HH:mm:ss'));

字符串值输出：2019-01-17T21:00:00.000Z

控制台输出实际：日期 18/01/2019 01:00:00

但预计控制台输出：日期 18/01/2019 00:00:00

我试过“YYYY-MM-DDThh:mm:ss.fffZ”但也没有用。

额外的信息

保存数据：

process.data = JSON.stringify(this.form.getRawValue());
save(process);

html（primeng）：

<p-calendar formControlName="startDate" dateFormat="dd.mm.yy"></p-calendar>

我对使用PrimeNG FullCalendar组件遇到的一个非常奇怪的问题感到疯狂，这个问题： https ://primefaces.org/primeng/showcase/#/fullcalendar

这是基于Angular FullCalendar组件的，这个：https: //fullcalendar.io/

特别是，我试图实现像最后一个链接这样的行为，其中可拖动事件被移动到日历中。

与链接示例不同，我的可拖动事件有开始和结束时间。例如，我想将事件拖到日历的特定日期，指定它从07:00开始，到15:00结束（这是因为我的日历代表工作轮班日历，其中人员在特定时间范围内工作）。

在这里您可以找到我的完整代码：https ://bitbucket.org/dgs_poste_team/soc_calendar/src/master/

好的，正如您在应用程序组件视图中看到的那样：

<div class="container">
  <div class="row">
    <div class="col-12">
      <app-header></app-header>
    </div>

    <div class="row">
      <div class="col-4">
        <p>DRAGGABLE</p>
        <app-people-list></app-people-list>
      </div>
      <div class="col-8">
        <app-fullcalendar></app-fullcalendar>
      </div>
    </div>
  </div>
</div>

左侧有一个<app-people-list>组件，显示事件\人员列表，我可以将其拖到日历中以进行特定的工作轮班。

在右侧，我有<app-fullcalendar>渲染日历的组件。

进入PeopleListComponent类（组件的控制器app-people-list）我有这个ngAfterViewInit方法：

ngAfterViewInit() {
  console.log("PEOPLE LIST ngAfterViewInit() START !!!")
  var self = this

  new Draggable(this.draggablePeopleExternalElement.nativeElement, {
    itemSelector: '.fc-event',
    eventData: function(eventEl) {
      console.log("DRAG …

我在使用 PrimeNG 日历组件时发现以下问题。

在我的 Angular 组件的 HTML 视图中，我定义了这个 PrimeNG 组件标签：

<p-calendar [disabled]="disabled"
            [(ngModel)]="orderDetail.dettaglio_ordine.data_inserimento"
            dateFormat="yyyy-mm-dd"></p-calendar>

这应该查看包含在由orderDetail.dettaglio_ordine.data_inserimento标识的 JSON 对象字段中的日期。该字段包含以下值：2020-08-08”

事实上，在我的 JSON 中我有：

"data_inserimento": "2020-08-08",

问题是，以这种方式执行此日期不会显示在空的渲染表单中。

为什么？怎么了？我缺少什么？我该如何解决这个问题？