I using owlDateTime(https://daniel-projects.firebaseapp.com/owlng/date-time-picker) picker in may project.
After date selected it shows the mm/dd/yyyy format but I want to change this format to dd/mm/yyyy conditionally.
bellow are my code
.component.html
<input [max]="max" [owlDateTimeTrigger]="dt_date_time" [owlDateTime]="dt_date_time" formControlName="date_time" id="date_time" type="text" class="form-control date-picker date-field hasDatepicker" placeholder="dd/mm/yyyy" name="date_time" value="">
<owl-date-time [pickerType]="'calendar'" #dt_date_time></owl-date-time>
I have solve above problem using following code
import { Component, OnInit } from '#angular/core';
import { DateTimeAdapter } from 'ng-pick-datetime';
#Component({
selector: 'app-home-layout',
templateUrl: './home-layout.component.html',
styleUrls: ['./home-layout.component.css']
})
export class HomeLayoutComponent implements OnInit {
constructor(dateTimeAdapter: DateTimeAdapter<any>) {
let UserAttributes=JSON.parse(localStorage.getItem('UserAttributes'));
let country= UserAttributes['custom:country'];
if(country=='USA'){
dateTimeAdapter.setLocale('us');
}else{
dateTimeAdapter.setLocale('en-IN');
}
}
ngOnInit() {
}
}
Related
I am trying to set value during initializing form using primeng datepick calender but not working.I am working in angular 8.I have created custom datepicker component using primeng.I have given my code below.How to set date range value that?Anyone can have idea?please help to find the solution.
app.component.html:
<p-calendar
[(ngModel)]="datesRangeFilter"
selectionMode="range" view="month" dateFormat="mm/yy" [readonlyInput]="true"
[showIcon]="true">
</p-calendar>
app.component.ts:
datesRangeFilter:Date;
ngOnInit(){
let yesterday = ( d => new Date(d.setDate(d.getDate()-1)) )(new Date);
this.datesRangeFilter=yesterday +'-'+new Date;
}
You can assign two different dates as an array, and it will be bind to the model.
component.html
<hello name="{{ name }}"></hello>
<div [formGroup]="myGroup">
<p>
Date Reset
</p>
<p-calendar formControlName="date" selectionMode="range" [readonlyInput]="true"></p-calendar>
<button (click)="reset()">Reset</button>
<button (click)="setCustomDateRange()">Set Custom Date Range</button>
</div>
Component.ts
import { Component } from '#angular/core';
import { FormControl , FormGroup} from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
yearRange = '2000:2020';
myGroup: any;
rangeDates: Date[];
constructor(){
this.myGroup = new FormGroup({
date: new FormControl('')
});
}
setCustomDateRange(){
var date = new Date();
date.setDate(date.getDate() + 10);
this.myGroup.get('date').setValue([new Date(), date]);
}
reset(){
console.log(this.myGroup.get('date').value)
this.myGroup.get('date').setValue(null);
}
}
[Working code][1]
I am trying to reset primeng datepick calender but not working.I am working in angular 8.I have created custom datepicker component using primeng.I have given my code below.How to reset that?Anyone can have idea?please help to find the solution.
app.component.html:
<p-calendar dateformat="mm/dd/yyyy" [numberofmonths]="4" selectionmode="range" formControlName="datePick"></p-calendar>
<button (click)="resetdate()">Reset Date</button>
app.component.ts:
#ViewChild('p-calendar') calendar: any;
resetdate(){
this.calendar.value = null;
}
You are using reactive forms, in the reactive form it will set with form control setValue method.
Update: You can provide model value as an array.
component.html
<hello name="{{ name }}"></hello>
<div [formGroup]="myGroup">
<p>
Date Reset
</p>
<p-calendar formControlName="date" selectionMode="range" [readonlyInput]="true"></p-calendar>
<button (click)="reset()">Reset</button>
<button (click)="setCustomDateRange()">Set Custom Date Range</button>
</div>
component.ts
import { Component } from '#angular/core';
import { FormControl , FormGroup} from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
yearRange = '2000:2020';
myGroup: any;
rangeDates: Date[];
constructor(){
this.myGroup = new FormGroup({
date: new FormControl('')
});
}
setCustomDateRange(){
var date = new Date();
date.setDate(date.getDate() + 10);
this.myGroup.get('date').setValue([new Date(), date]);
}
reset(){
console.log(this.myGroup.get('date').value)
this.myGroup.get('date').setValue(null);
}
}
check working code
Use [(ngModel)] as below:
<p-calendar [(ngModel)]="value"></p-calendar>
and in ts use:
value: Date;
resetdate() {
this.value = null;
}
See working code
If necessary, like for me, you can destroy and recreate the component like this :
<p-calendar *ngIf="showCalendar"></p-calendar>
<button (click)="resetdate()">Reset Date</button>
detectChanges() method apply *ngIf and destroy the component:
constructor(private changeDetectorRef: ChangeDetectorRef) { }
showCalendar = true;
resetdate(): void {
this.showCalendar = false;
this.changeDetectorRef.detectChanges();
this.showCalendar = true;
}
no need to create separate method to reset data binding on module. just use property showClear="true" on tag
<p-calendar [(ngModel)]="value" [showClear]="true"></p-calendar>
for reference check documentation
app.component.ts
import { Component,OnInit } from '#angular/core';
import {FormControl,FormGroup,FormArray,FormBuilder} from '#angular/forms'
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 6';
form=new FormGroup({
topics:new FormArray([])
})
addTopic(topic:HTMLInputElement){
(this.form.get('topics') as FormArray).push(new FormControl(topic.value));
topic.value='';
}
}
app.component.html
<form>
<input type="text" class="form-control" (keyup.enter)="this.addTopic(topic)" #topic />
<ul class="list-group">
<li class="list-group-item" *ngFor="let topic of form.get('topics').controls">
{{topic.value}}
</li>
</ul>
</form>
I have created a Multi Input Control using Angular FormArray but how can i Validate the same for Minimum 2 Items(Length=2) and only accept integer values.
How to Add Validators.minlength like Reactive Form / Model Driven Form Approach.
How can i get those items using ngModel?
I hope this helps.
import {
Component,
OnInit
} from '#angular/core';
import {
FormControl,
FormGroup,
FormArray,
FormBuilder
} from '#angular/forms'
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 6';
form = new FormGroup({
topics: new FormArray(this.formBuilder.control(''), [Validators.reqired, Valiadtors.minlength(2)], Validators.Paterrn("^[0-9]*$"))
])
addTopic(topic: HTMLInputElement) {
(this.form.get('topics') as FormArray).push(new FormControl(topic.value));
topic.value = '';
}
}
I've searched a while for this but I feel like this is one of the basics so no one bothers to explain it anymore...
Here's my problem.
I'm writing a component in TypeScript, which is part of an ASPNET core 2 and angular project.
TS file :
import { Component } from '#angular/core';
#Component({
selector: 'clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.css']
})
export class ClientsComponent{
rows: Array<any>;
constructor() {
let btn = document.getElementById("coolbutton");
if (btn === null) return;
btn.addEventListener("click", (e: Event) => this.ClickMeButton());
}
ClickMeButton() {
alert("toto");
}
}
HTML file :
<input type="button" value="Click" id="coolbutton"/>
But an error is raised when the page loads :
An unhandled exception occurred while processing the request.
NodeInvocationException: Uncaught (in promise): ReferenceError: document is
not defined
I am unable to find any explanations on how to import document in my TS componenet...
just put the (click) on the element and call your function:
import { Component } from '#angular/core';
#Component({
selector: 'clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.css']
})
export class ClientsComponent{
constructor() {}
public clickMeButton(): void {
alert("toto");
}
}
<input type="button" value="Click" (click)="clickMeButton()"/>
Angular2 #Input component is not Binding data from another component
DummyComponent.ts
import { Component,Input,ElementRef } from "#angular/core"
#Component({
selector: "Dummy-Selector",
template: `Hello Dummy How Are you....`,
// inputs: ["rating"]
})
export class DummyComponent {
debugger;
#Input() username: string;
}
LoginComponent.html
<input type="text" [(ngModel)]="LoginObj.username" value="user" />
<div>
<Dummy-Selector [username]='LoginObj.username'></Dummy-Selector>
</div>
Here I'm getting my Dummy-selector username data but when I insert some data in LoginObj.username via the input field - why is it not reflected?
It's not clear exactly what error you are seeing (if any) but it input binding should work with the following:
LoginComponent.ts
#Component({..})
export class LoginComponent {
LoginObj = {};
}
In DummyComponent.ts change the template to show that the username field reflects changes from the input field.
import { Component,Input } from "#angular/core"
#Component({
selector: "Dummy-Selector",
template: `Hello Dummy How Are you... {{username}}`,
})
export class DummyComponent {
debugger;
#Input() username: string;
}