We Keep Coding

How to display only a range between 2 different months in primeng calendar (p-calendar)?

I'm trying to display a range between 2 months in p-calendar without success for example I would like to display dates only between the middle of a month untile the middle of next month.
I would like to do it using reactiveForm with formcontrol, but a solution with ngModel would be in any case appreciated.

I am confused what you are asking, but this is a try. This displays two months allowing for selection of a date range:
import { Component, ViewChild } from '#angular/core';
import { Calendar } from 'primeng/calendar';
#Component({
selector: 'app-root',
template: `
<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
<label for="multiplemonths">Multiple Months</label>
<p-calendar #rangeCal [(ngModel)]="rangeDates" [numberOfMonths]='2'
selectionMode="range" inputId="multiplemonths"></p-calendar>
</div>
</div>`
})
export class AppComponent {
#ViewChild( 'rangeCal' ) rangeCal: Calendar;
rangeDates: Date[];
ngOnInit() {
}
}

Angular Material DatePicker: Month and Day, Exclude Year

How do I create a Month and Day Date Picker in Angular, excluding hide year?
This following link will do a Month and Year picker. I am trying to manipulate it, to do Month and Day. Replacing YYYY with DD is not working.
Stackblitz:
https://stackblitz.com/angular/gxymgjpprdy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts
Real code from Stackblitz:
Typescript:
import {Component} from '#angular/core';
import {FormControl} from '#angular/forms';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '#angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '#angular/material/core';
import {MatDatepicker} from '#angular/material/datepicker';
// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment, Moment} from 'moment';
const moment = _rollupMoment || _moment;
// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
parse: {
dateInput: 'MM/YYYY',
},
display: {
dateInput: 'MM/YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
/** #title Datepicker emulating a Year and month picker */
#Component({
selector: 'datepicker-views-selection-example',
templateUrl: 'datepicker-views-selection-example.html',
styleUrls: ['datepicker-views-selection-example.css'],
providers: [
// `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
// application's root module. We provide it at the component level here, due to limitations of
// our example generation script.
{
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
},
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
],
})
export class DatepickerViewsSelectionExample {
date = new FormControl(moment());
chosenYearHandler(normalizedYear: Moment) {
const ctrlValue = this.date.value;
ctrlValue.year(normalizedYear.year());
this.date.setValue(ctrlValue);
}
chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
const ctrlValue = this.date.value;
ctrlValue.month(normalizedMonth.month());
this.date.setValue(ctrlValue);
datepicker.close();
}
}
HTML:
<mat-form-field>
<input matInput [matDatepicker]="dp" placeholder="Month and Year" [formControl]="date">
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
<mat-datepicker #dp
startView="multi-year"
(yearSelected)="chosenYearHandler($event)"
(monthSelected)="chosenMonthHandler($event, dp)"
panelClass="example-month-picker">
</mat-datepicker>
</mat-form-field>
I do not want year option below in green, would like to disable year
Other Resources:
https://material.angular.io/components/datepicker/overview#watching-the-views-for-changes-on-selected-years-and-months
Angular Material Date picker disable the year selection

I hope you are expecting date format like DD/MMM. If so then change dateInput in display and parse object like below
dateInput: 'DD/MMM'
Hope this helps.
Here is the stackblitz code.
https://stackblitz.com/edit/angular-hw54xf

So , first in the html file
<mat-form-field class="mat-50-left" (click)="updateCalendarUI()">
<input matInput [matDatepicker]="picker_start"
placeholder="Date de début" required formControlName="dt_start" (click)="picker_start.open();">
<mat-datepicker-toggle matSuffix (click)="picker_end.open(); updateCalendarUI()"></mat-datepicker-toggle>
<mat-datepicker #picker_start startView="year"></mat-datepicker>
</mat-form-field>
in the .ts file
import {DateAdapter, NativeDateAdapter} from "#angular/material/core";
import * as moment from "moment";
export class AppDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
// use what format you need
return moment(date).format('DD MMM');
}
}
add in providers
providers: [{provide: DateAdapter, useClass: AppDateAdapter}]
To update calendar UI
updateCalendarUI(): void {
setTimeout(() => {
let calendar = document.getElementsByClassName('mat-
calendar').item(0);
if (calendar) {
calendar['style'].height = '275px';
calendar['style']['padding-top'] = '15px';
}
let header = document.getElementsByClassName('mat-calendar-
header').item(0);
if (header) {
header['style'].display = 'none';
}
let yearLabel = document.getElementsByClassName('mat-calendar-body-
label').item(0);
if (yearLabel) {
yearLabel['style'].display = 'none';
}
}, 1);
}

Dynamically show / hide a component if its date is not between 2 other dates

I have two inputs: <input type="date" id="fromDate"> and <input type="date" id="toDate">, and then a *ngFor loop iterating through a list of items. All of these items have a property activity_date.
I want to be able to only show the components having their activity_date property between the dates of fromDate and toDate. For this, I am using MomentJS, more precisely the function moment(activity_date).isBetween(fromDate, toDate).
The problem here is I want to assign the result of the previous method to a [hidden] attribute so if an input is changed, the [hidden] property will be updated.
But here's the catch. How can I do to show / hide the components whenever the inputs are changed ?
Here's what I've tried so far:
view.component.html
<app-events
type="calendar-item"
[hidden]="moment(item.activity_date).isBetween(this.fromDate, this.toDate);"
[data]="item"
></app-events>
view.component.ts
import { Component, OnInit } from "#angular/core";
import * as moment from "moment";
#Component({
selector: "app-view",
templateUrl: "./view.component.html",
styleUrls: ["./view.component.css"]
})
export class ViewComponent implements OnInit {
fromDate: string;
toDate: string;
item = [
{
id: 1,
activity_date: "14 November 2018",
}
];
ngOnInit() {}
isBetweenDate(date: string) {
return moment(date).isBetween(this.fromDate, this.toDate);
}
}
It works if I write values in the method by hand, and it only works at the loading of the page.
I was trying to look after the EventEmitter or the Custom Attributes, but I'm not sure I am moving to the right direction.

I think you have done almost right. You made isBetweenDate function but don't use it.
I have created an example for you. It is same as your one, but not exact one. It compares the date with fromDate and toDate. So here, you can change dates and you will get an instant output based on the changed dates.
Here is the link:
StackBlitz Link: https://stackblitz.com/edit/angular-48bxrq

How to get date and time in mm-dd-yyy hh-mm-ss in typescript?

Currently, I am getting date time in the following format 'mm/dd/yyyy, hh:mm:ss'.
How to get it in the following format 'mm-dd-yyyy hh-mm-ss'.
How to achieve this without using any library, and preferably by passing some args to the function itself?
Below is the code that am currently using (in Angular 5)
console.log(new Date().toLocaleString(undefined, { hour12: false }));

make use of DatePipe , that is provided by angular framework
{{ strDate | date :'MM-dd-yyyy hh-mm-ss' }
or in code you can do like this
import { DatePipe } from '#angular/common';
#Component({
selector: 'test-component',
templateUrl: './test-component.component.html'
})
class TestComponent {
constructor(private datePipe: DatePipe) {}
formatDate(date= new Date()) {
return this.datePipe.transform(date,'MM-dd-yyyy hh-mm-ss' );
}
}
check here : DatePipe

Two way binding on angular material slide toggle not working as expected (Angular 4)

I have implemented the angular material slide-toggle that all seems to work except for some reason it isn't binding the value to the relevant variable for some reason?
// other irrevelant imports above..
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '#angular/material';
#Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss'],
host: {
'(document:click)': 'handleClickEvent($event)',
}
})
export class CalendarComponent implements OnInit {
filteringSchedule: boolean = false;
filteringSent: boolean = false;
filteringFailed: boolean = false;
}
// component
<mat-slide-toggle
class="calendar-filter-types"
[ngModel]="(filteringSchedule)"
[color]=""
[checked]="">
Scheduled : {{ filteringSchedule }}
</mat-slide-toggle>
Once I check or uncheck the toggle I would expect the filteringSchedule value to change to true or false accordingly? However within the component it always stays as false for some unknown reason - can anyone suggest why is this?
I am Angular 4

Just update your html to
[(ngModel)]="filteringSchedule"

This works on Angular8+
[(ngModel)]="filteringSchedule"
And make sure you already imported FormsModule
import {FormsModule} from '#angular/forms';

[ngModel]="(filteringSchedule)"
Change this to:
[(ngModel)]="filteringSchedule"