PrimeNg日历，以6行显示日期
PrimeNg日历是一个开源的前端组件库，用于在Web应用程序中显示日期和时间。它提供了丰富的功能和灵活的配置选项，使开发人员能够轻松地创建和定制日历组件。
PrimeNg日历的主要特点包括：
- 漂亮的界面设计：PrimeNg日历提供了现代化和美观的界面设计，可以提升用户体验。
- 多种显示模式：PrimeNg日历支持多种显示模式，包括月视图、周视图和日视图，可以根据需求进行切换。
- 日期选择和范围选择：PrimeNg日历允许用户选择单个日期或日期范围，方便用户进行时间选择操作。
- 事件和提醒功能：PrimeNg日历支持添加事件和提醒功能，可以帮助用户管理日程安排。
- 国际化支持：PrimeNg日历提供了多语言支持，可以根据用户的地区和语言偏好进行本地化显示。
- 响应式布局：PrimeNg日历具有响应式布局，可以适应不同大小的屏幕和设备，提供良好的移动端体验。
PrimeNg日历适用于各种场景，包括但不限于以下几个方面：
- 个人日程管理：用户可以使用PrimeNg日历来管理个人的日程安排，包括会议、约会、生日等重要事件。
- 团队协作：PrimeNg日历可以用于团队协作，成员可以共享日程安排，方便统一安排会议和活动。
- 酒店预订系统：PrimeNg日历可以用于酒店预订系统，用户可以通过日历选择入住和离店日期。
- 会议和活动管理：PrimeNg日历可以用于会议和活动管理系统，方便组织者安排和管理各类会议和活动。
推荐的腾讯云相关产品是腾讯云云开发（CloudBase），它是一款全托管的云原生应用开发平台，提供了丰富的后端服务和前端开发框架，可以帮助开发人员快速构建和部署Web应用程序。腾讯云云开发支持多种编程语言和开发框架，包括Node.js、Python、Java等，可以与PrimeNg日历无缝集成。
腾讯云云开发产品介绍链接地址：https://cloud.tencent.com/product/tcb
相关·内容
1回答
我在我的Angular7项目中使用PrimeNg日历。默认情况下，日历在6行中显示所有月份的日期，这是相当不寻常的。即使所选月份的最后日期在5行内结束，也会显示第6行。如何避免这第6行的任何想法 <p-calendar class="WorkTimeCalender" [(ngModel)]="workingDate"
[inline]="true" [disabledDays]="[0,6]" >
<
浏览 61提问于2020-01-14得票数 1
回答已采纳
1回答
我正在使用PrimeNG日历组件。如何(如果可能)删除或更改日期选择头和日期选择器本身之间的行/分隔符的颜色？
带有PrimeNG日历的基本Stackblitz (全部包括分隔符： )
PrimeNG的github中的日历组件：
浏览 4提问于2022-11-04得票数 0
回答已采纳
1回答
我试图在我的角4应用程序中实现PrimeNG日历中的日期时间针刺器。我做了下面的安装。
>npm install primeng --save
module.ts
import { Calendar } from 'primeng/primeng'
component.ts
import { Calendar } from 'primeng/primeng'
Component.html
当我运行网站时，我会得到以下错误。
模板传递错误：“P-日历”不是已知的元素: 1.如果“p-日历”是一个角分量，则验证它是该模块的一部分。2.如果“p-日历”是web
浏览 1提问于2018-03-24得票数 0
1回答
我第一次使用PrimeNg日历，而且我被困在这个东西上，我需要使用这个日历来显示/选择一些默认的初始日期，这是我从后端获得的一个日期数组。我想向用户显示这些日期，然后他们可以单击默认选择/显示的日期。提前感谢
浏览 0提问于2018-06-08得票数 0
回答已采纳
我正在使用带有两个字段的PrimeNg日历小部件，即startDate和endDate。
当前选择startDate时，它显示的是带有当前时间的所选日期，但我的要求是，所选日期的开始时间是00:00:00。
当在endDate字段中时，我们正在选择日期，它显示的是带有当前时间的选定日期，但我希望选定日期的结束时间是23:59:59。
我正在使用Angular 7和primeNg(primefaces)。
请帮忙缩短这一问题的篇幅。
浏览 2提问于2019-11-25得票数 0
1回答
如何使PrimeNG日历在模式弹出时默认处于开放状态？或者如何触发单击事件来打开PrimeNG日历，这是一个模式弹出的类型记录？
如果我在HTML本身中使用，它会触发单击事件来打开showoverlay()的日历，但是当使用模式弹出时，由于弹出窗口不在DOM元素中，它会显示错误，因为showoverlay()不是一个函数。
浏览 1提问于2018-05-11得票数 1
回答已采纳
我想禁用primeNG日历中的日期。
<p-calendar [(ngModel)]="dateValue" dateFormat="dd.mm.yy" [disabledDates]="[here are the dates]"></p-calendar>
例如，我想禁用日历上的日期，但今天和明天除外。
浏览 3提问于2018-05-07得票数 3
回答已采纳
我想在primeNG范围和多个选项中使用日历，但它不起作用。我只能从日历中选择一个日期。
<div class="box-body">
<div class="row">
<div class="col-md-12">
<p-calendar maxDateCount="2" placeholder="Choose days" [(ngModel)]="dates" selectionMode="mul
浏览 3提问于2017-08-17得票数 1
回答已采纳
1回答
我使用了来自PrimeNG的日历组件，我使用了timeOnly属性来只显示时间，我有一个类似12:10的字符串。 我想将此字符串设置到日历中，是否有必要将其转换为日期，或者是否有其他方法可以完成此操作？ <p-calendar [timeOnly]="true" formControlName="ms" (onSelect)="compareTwoTimesM()" placeholder="hh:mm">
浏览 34提问于2020-06-09得票数 1
回答已采纳
我目前正在使用PrimeNG的日历组件，并且在用户输入日期时，我依赖于日历的onClose来更新我的底层数据。但是，我注意到当焦点通过按tab按钮离开日历时，onClose事件不会触发。
模板很简单，比如：
<p-calendar
...
(onClose)="closeEvent($event)">
</p-calendar>
为了测试目的，该函数只记录一条消息：
closeEvent(ev) {
console.log('close event fired');
}
当用户通过单击日历退出日历时，该消息将正确地记录到屏幕上
浏览 0提问于2019-01-17得票数 1
回答已采纳
1回答
我正在使用primeng完全日历的包装组件来创建一个调度器，它使用agendaweek视图来显示周约会。是否有人知道如何阻止调度程序为当前日期(在图像中)应用图像上显示的颜色？有房产吗？还是通过CSS控制？
谢谢你，路易斯
浏览 1提问于2016-12-26得票数 0
回答已采纳
我有一个使用PrimeNG日历创建的带有附加日期选择器的输入元素。
HTML部件
<p-calendar showAnim="slideDown"
id="calendar"
[showIcon]="true
[(ngModel)]="myDate"
(blur)="onBlurMethod($event)">
</p-calendar>
这里我使用了PrimeNG日历标签。我使用了一个隐藏的文本
浏览 1提问于2016-07-25得票数 2
回答已采纳
使用PrimeNG日历组件我发现了以下问题。
在我的角组件的HTML视图中，我定义了这个PrimeNG组件标记：
<p-calendar [disabled]="disabled"
[(ngModel)]="orderDetail.dettaglio_ordine.data_inserimento"
dateFormat="yyyy-mm-dd"></p-calendar>
这将查看包含在orderDetail.dettaglio_ordine.data_inseriment
浏览 3提问于2020-08-20得票数 3
回答已采纳
2回答
我使用PrimeNg日历来选择多个日期，并使用(ngModel)将组件绑定到一个日期数组。当我选择一个日期时，它会自动地被推送到数组中，但是当我取消选择日期时，它总是存在的。
下面是日历模板：
<p-calendar name="DupDates" [(ngModel)]="DupDates" [dateFormat]="dateFormat"
[monthNavigator]="monthNavigator"
[locale]="calendarFr" [
浏览 4提问于2017-11-21得票数 1
回答已采纳
我在“角”方面非常新，而且在PrimeNG中，我发现在使用FullCalendar组件时遇到了以下困难：
问题是，当用户单击日历中的特定日期时，我想要处理一个事件(参考前面的链接示例:当用户单击Calendar中的一天正方形时，我必须执行回调方法)。
所以我知道这个PrimeNG组件应该基于
我试过这样做，但效果不佳：
1)这是我的fullcalendard.component.html页面：
万年历有效！
<div class="content-section implementation">
<p-fullCalendar #calendar (dat
浏览 1提问于2020-05-15得票数 0
回答已采纳
单击按钮，将加载一个NgbModal模式框。该模态具有一个ag-grid-角度组件。
此网格有一个日期选择器列。我正在使用primeng日期选择器。用于日历显示的HTML代码。
<p-calendar class="ui-datepicker" type="number" dateFormat="dd-mm-yy" monthNavigator="true" [maxDate]=today [style]="{'position': 'fixed', 'overflow&
浏览 11提问于2020-08-07得票数 0
在角2中，我使用的是PrimeNG日历，使用*ngSwitchCase的模型驱动形式，如下所示
<div [ngSwitch]="field.controlType">
...
<p-calendar *ngSwitchCase="'date'" [formControlName]="field.key" [id]="field.key" [showIcon]="true" dataType="string"></p-calend
浏览 4提问于2017-03-03得票数 0
我正在使用PrimeNG作为日历。我已经格式化了他们网站上显示的日期，但是当日期/时间保存到后端时，它会保存为：
2017-09-22T06:11:54.000Z
我希望它另存为21/07/2017 12:00:00 AM
这是我的模板代码：
<p-calendar [(ngModel)]="date7" formControlName="startdatetime" [showTime]="true" [hourFormat]="12" dateFormat="dd/mm/yy"></p-cal
浏览 3提问于2017-09-21得票数 0
我使用的是来自PrimeNG 5.0.1，Angular 5.1的组件日历，它允许选择日期和时间：
<p-calendar [(ngModel)]="startAnalyzeModel" name="startAnalyze" [showTime]="true" [dateFormat]="dateFormat" disabled="true" [locale]="ru"></p-calendar>
但timepicker在重新加载页面时冻结。是否可以在每次显示picker时
浏览 3提问于2017-12-28得票数 4
回答已采纳
如何使PrimeNG日历在点击时打开特定年份的特定月份
我希望我的p日历在开始时打开一个未来的月份，但它总是打开当前的月份。
因此，假设我希望我的用户选择2026年的日期，它将打开2018年，他必须从那里滚动。
浏览 8提问于2018-05-25得票数 0
选择新的日历值不会更新formControlName中的值 我尝试将模型属性设置为字符串，也尝试将日历上的dataType设置为字符串。要从模型中设置日历上的默认值，我必须将该值转换为新的日期。监听onBlur还会显示旧值，而不是新值。 我使用的是Angular 7、Ionic 4和PrimeNg 7.1 ngOnInit() { this.form = new FormGroup({
dfrDate: new FormControl(null, {
updateOn: 'blur',
validators: [Validato
浏览 17提问于2019-05-17得票数 0
我需要显示一个日历，让用户选择多个日期--例如2017年2月1日、2017年3月1日、2017年4月1日。也就是说，不是一个范围，而是多个日期。
在角1.x中，我使用UI引导带之上的指令来完成这一任务。
我无法为角2+找到这样的解决方案，无论是使用ng-bootstrap、PrimeNg还是其他库。任何要点都会很感激的。
浏览 1提问于2017-07-21得票数 2
回答已采纳
我使用的是PrimeNG，我希望像在演示中那样，以角度将可拖动的事件完成到日历中。这是。问题是，这个例子是在Vanilla JS和角形需要它的打字稿。
我创建了一个，尝试这样做，但由于类型记录代码，日历根本没有显示。
浏览 2提问于2021-07-05得票数 0
回答已采纳
我正在尝试为primeNG日历上的一些禁用日期添加样式，在文档中建议使用disabledDateTemplate。然而，这似乎不起作用，我在网上也找不到一个解决方案。
浏览 3提问于2020-09-10得票数 0
1回答
我计划使用primeNG 8，它修复了角7中的日历错误。
现在，我们在我们的项目中使用了7.1.3版本的Range7。为了修复日历错误，我需要升级到primeNG 8。在官方注释中没有提到“我们应该”升级到“角度8”。谷歌的许多答案都建议相应地升级角形版本。
我想确认一下，primeNg的升级是否也需要角度的升级？
浏览 0提问于2019-09-13得票数 1
回答已采纳
1回答
我试图在初始化表单期间使用primeng datepick日历设置值，但不工作。我在angular 8工作。我使用primeng创建了自定义日期选择器组件。我给了我的代码below.How来设置日期范围值?任何人都可以有想法?请帮助找到解决方案。
app.component.html：
<p-calendar
[(ngModel)]="datesRangeFilter"
selectionMode="range" view="month" dateFormat="mm/yy" [readonlyInput
浏览 13提问于2019-11-18得票数 0
我在我的Angular2应用程序中使用了Angular2，并且我正在经历一些奇怪的行为。如果我在日历小部件的帮助下插入日期值，它将在我对窗体组中的.reset()函数进行标注之后成功地重置。我遇到的问题是，当用户用手将日期输入到日历输入字段时，在调用.reset()之后它将不会被清除。如果我尝试获取字段的值，它将返回正确的默认值(null)，但是input字段仍然显示先前插入的值，该值已经提交。
我使用的是PrimeNG 2.0.6。
我能做些什么来重置输入字段中的值吗？
浏览 5提问于2017-06-05得票数 0
回答已采纳
{
"currentTradeDate": "2019-03-12",
"dateArray": [
{
"holidayDate": "2019-12-25"
},
{
"holidayDate": "2019-11-28"
},
{
"holidayDate": "2019-09-02&
浏览 20提问于2019-03-13得票数 0
我使用primeng p-日历，它可以在谷歌-铬，但它不能工作(日期选择器，不打开文本框点击)在任何其他浏览器。
下面是我使用的html代码：
<p-calendar [(ngModel)]="startDate" showIcon="true" monthNavigator="true" yearNavigator="true" dateFormat="dd/mm/yy" dataType="yearRange="1970:2030"></p-calendar>
下
浏览 1提问于2017-09-24得票数 0
回答已采纳
1回答
我从服务器收到一个UTC格式的日期(字符串)= "2020-04-01T00:00:00Z“。当我的用户访问英国这里的日历时(gmt)，他们可以很好地看到它。然而，我在美国的用户当然会看到预先选择了3月31日的日历。 如何让我在美国的用户也能看到预先选择的4月1日的日历？ 我知道PrimeNG删除了UTC="true"属性。
浏览 13提问于2021-01-14得票数 1
2回答
“我在”角应用程序“中使用PrimeNg的日历。我使用多个selectionMode，并将日历绑定到数据库中的一个日期数组。日历从数据库范围内的最新日期开始，但我希望它始终以今天的日期开始，然后用户可以来回导航，查看以前从数据库中选择的日期。我设置了defaultDate，但没有任何区别。
请帮帮忙。
谢谢,
我的html：
<p-calendar [(ngModel)]="myDates" selectionMode="multiple" [inline]="inline" selectOtherMonths="true"
浏览 0提问于2018-09-09得票数 2
回答已采纳
我正在设置primeNG日历，想知道如何在编辑时显示保存的日期。 📷 <p-calendar name="startDate" [(ngModel)]="classPrg.startDate"> </p-calendar>
<p-calendar name="endDate" [(ngModel)]="classPrg.endDate"></p-calendar> ngOnInit() {
this.classPrg = this.classPrgStore.sta
浏览 13提问于2019-05-09得票数 0
我试图同时使用primeNG日历模块和reactiveFormsModule，但是当我同时使用它们时，日历消失了。
import {Common Module} from '@angular/common';
import {CalendarModule} from 'primeng/primeng';
import {ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [CommonModule, ReactiveFormsModule, CalendarModul
浏览 1提问于2017-08-24得票数 0
我正面临着PrimeNG日历的问题。我搜索了很多，但没有找到任何线索，这个问题已经在StackOverflow上问过了，但没有给出正确的答案。
当我选择日期后的日历是不隐藏的。
我的html代码：
<p-calendar [monthNavigator]="true" [yearNavigator]="true" yearRange="1910:2020" showButtonBar="true" hideOnDateTimeSelect="true" showTime="true" dat
浏览 2提问于2018-11-28得票数 1
回答已采纳
我正在用PrimeNG创建一个有角度的项目，我需要在一次组件中选择两个日期，因此我决定使用range selectionMode的用户p日历。
一切都很好，但是组件允许选择一次日期，我想要这样做，我希望comport允许强制选择这两个日期。
这就是我的实现：
<p-calendar #calendar [(ngModel)]="selectedDates" selectionMode="range" [readonlyInput]="false" [monthNavigator]="true"
[
浏览 4提问于2020-07-02得票数 0
我想使用PrimeNG的日历与(selectionMode="range")，，但我有问题，以确定如何设置一个最小的结束日期。"minDate“对于开始日期很好，但是有方法设置最小结束日期吗？
我希望最低结束日期至少比开始日期多30天。例如：
如果startDate =2020年5月1日，那么从开始日期起不到30天的endDate就不应该被选择(总的最低日期范围为30天)。
这是可能的，还是我只需要让它两个单独的日期选择？提前感谢！
浏览 3提问于2020-05-27得票数 0
1回答
我正在用primeng5.2.0和angular5在我的项目上做选项卡(tabindex)。问题是我不能用选项卡选择日期，所以我必须使用鼠标来完成它，当我选择一个日期时，p-calendar字段将失去焦点并中断选项卡。下面是选项卡工作良好的示例代码。
在使用鼠标选择日历日期之后，如何使选项卡工作？请指点
<tr tabindex="1"><input type="email" placeholder="aa@aa.com"/></tr>
<tr tabindex="2"><p-
浏览 0提问于2018-12-05得票数 3
我有一个角/弹簧引导应用程序，在客户端，我使用一个primeng日历输入组件，它获取本地日期并将其转换为UTC分区日期-时间。然后，我将此日期发送给REST控制器，并使用LocalDateTimeDeserializer对其进行反序列化。问题是，它只是将日期作为-原样，而实际上并不关心服务器时区(因此UTC日期时间变成了本地日期时间)。
我查看了源代码，下面是负责的代码片段：
if (string.endsWith("Z")) {
return LocalDateTime.ofInstant(Instant.parse(string), ZoneOffset.UTC);
浏览 4提问于2017-07-18得票数 1
回答已采纳
我正在尝试使用mydaterangepicker(https://kekeh.github.io/mydaterangepicker/)到primeng turbotable (primeng日历不符合要求)，但它不能很好地显示。你可以帮助一些css代码或其他解决方案吗？ 我提供了我的源代码，谢谢你：https://stackblitz.com/edit/angular-fv53c6
浏览 20提问于2019-04-29得票数 0
回答已采纳
如何将PrimeNg p-日历的日期格式转换为响应形式的角度为8.
尝试使用DatePipe，但显示错误：
错误TypeError: date.getDate不是TypeError中的一个函数
请提出建议，如何进行？
InTs码
const now = Date.now();
const myFormattedDate = this.datePipe.transform(now, "dd.mm.yy");
this.addSlot.controls["addSlotDate"].setValue(myFormattedDate);
Html
<p-
浏览 0提问于2019-12-12得票数 1
2回答
我将与reactiveforms、和结合使用，并在包含日期的reactiveForm字段中使用了patchValue。这个日期是通过一个原始日历创建的。
purchaseDate: Sat Sep 02 2017 00:00:00 GMT+0100 (GMT Daylight Time)
我使用这个' date‘来做一些事情，然后使用momentjs将日期转换为一个干净的格式，以便后端可以使用.moment().format(....接受(即YYYY.MM.DD)。
然而，当我运行.setValue时，我得到了下面的控制台错误ERROR Missing number at positi
浏览 5提问于2017-09-05得票数 15
回答已采纳
我正在实现PrimeNg日历。当我把它放到页面上时，没有我们的任何样式和特殊格式，它工作得很好。当我把它和我们需要的所有其他选项放在页面上时，日历日期等等，消失了，然后又出现了。
我已经尝试了几个小时，把它剥离到最基本的部分，但找不出是什么导致了这个问题。我已经尝试从元素中删除宽度样式，日历看起来很好，但我们需要这些样式。
我为这个问题创建了一个stackblitz，复制了它。这只是firefox的问题，不是Chrome的问题。我知道CSS没有完全应用，它的外观非常混乱，但它复制了这个问题。
我期望这些日期和日历中的其他元素不会消失。这里面一定有火狐有问题的地方。
浏览 0提问于2019-06-05得票数 0
2回答
我使用PrimeNG日历控件，我可以选择和存储日期，但当我从数据库获取日期，并试图通过更新模式设置它。我得到了以下错误：
<p-calendar [(ngModel)]="bin.bidinstalledfrom" dateFormat="dd/mm/yy"
[showTime]="true" autocomplete="off" required name="BIDInstalledFrom"
id="installedfrom" class="col-md-12&
浏览 1提问于2018-05-03得票数 1
我使用的是primeNG日历，我得到了一个名为myDate的模型和一个日期格式。引用日期属性的ngModel指令。
<p-calendar [(ngModel)]="myDate" dateFormat="dd/mm/yy"></p-calendar>
但问题是我想把Unix值存储为myDate时间戳。因此，我需要在设置前将myDate转换为毫秒，并在get操作之前将其转换为具有日期格式的日期对象。有没有办法做到这一点？
private myDate;
setMyDate(myNewDate){
this.myDate = c
浏览 2提问于2018-07-13得票数 0
1回答
<form>
<p-calendar [(ngModel)]="report.incidentTime" [showTime]="true" [ngModelOptions]="{standalone: true}" [maxDate]="maxDateValue"
(ngModelChange)="validateTime($event)"></p-calendar>
<button type=
浏览 3提问于2017-10-02得票数 0
3回答
我正在学习angular2+，我想做一个类似GoogleCalendar的日程安排应用。经过多次研究，我决定使用PrimeNG。日历的输出格式为
2016-01-16T16:00:00
这看起来很棒，也很完整。但是我想要与之交互的应用程序接口使用timeStamp...
我尝试创建一个Javascript函数来解析我的日期格式：
function toTimestamp(strDate){
var datum = Date.parse(strDate);
return datum/1000;
}
alert(toTimestamp('02/13/2009 23:31:
浏览 16提问于2017-06-27得票数 4
回答已采纳
1回答
一个月后的日期显示在角4
、、、
一个月后的日期显示在角4
2018-04-30 Primeng日历添加 & show {3/30/2018}
Html文件：
<div class="col-md-8 noPadding">
<p-calendar dataType="date" name="PublishDate" [ngModelOptions]="{utc:
'true'}" [ngModel]="resource.PublishDate | date:'y
浏览 0提问于2018-05-11得票数 1
回答已采纳
1回答
我想为我的完整日历事件添加按钮。例如:删除，快照到prev。事件，切换到下面的事件。我有可能做到这一点吗？
如果不是，我如何使用eventRender的FullCalendar功能来实现这一点？我可以向事件添加html，但它不是p按钮，onClick事件触发器也不是。如何添加html并使用primeng元素和事件？
eventRender(info: any) {
info.el.querySelector('.fc-title').innerHTML += '<p-button (onClick)="delete(info.event)&
浏览 1提问于2021-10-13得票数 1
回答已采纳
在我们的angular应用程序中，我们选择了一个带有primeNG日历的Date对象，例如20.09.2018。
该日期的console.log()将返回正确的时区(GMT+2是我的本地时区)。
这些数据被发布到我们的node.js后端，后者将日期存储到oracle数据库。然而，后端接收到值19.09.2018 22:00，因此它看起来好像被设置为格林尼治标准时间时区。
如何确保在后端忽略时区并存储20.09.2018 00:00？
浏览 0提问于2018-09-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
