We Keep Coding

Setting current date and default time in angular datepicker

I want to set the default date to current date and customize default time in a datepicker using Angular, e.g Current date: 07-02-2020 and default custom time should be 08:00 AM. How can i achieve this please. Here is my html code which only shows date and time based on value selected.
<label class="col-sm-12 col-md-8 form-control-label ml-2" for="date_from">{{'From Date' |
translate}} <span class="danger">*</span>:</label>
<div class="col-md-12">
<input type="datetime-local" [(ngModel)]="leaveList.date_from"
[max]="leaveList.date_to" class="form-control input-md" id="date_from"
name="date_from" (change)="onChangeDate()" max="9999-12-31">
</div>
.component.ts file

You need to use moment library for date/time formatting
1-install moment using npm i moment
2-You have to assign value to date_from in your .ts, just like that
leaveList.date_from = moment().format('MM-DD-YYYY 8:30A')

<input required class="form-control" [(ngModel)]="myDate" type="datetime-local" name="myDate" id="myDate"/>
you can customize the date as you want instead of using new Date()
this.myDate = this.datepipe.transform(new Date(), 'yyyy-MM-ddThh:mm'),
so you have to import DatePipe
import {DatePipe} from '#angular/common'
and initialize in the constructor
constructor(public datepipe: DatePipe){
}
and also add it int the app.module.ts as a provider
providers: [
DatePipe,
....
],
read more https://angular.io/api/common/DatePipe

Setting angular material date picker value programmatically

I am using angular material date picker in one of my component's of angular project. This component has two tabs. Using *ngIf I am showing only one at a time based on what user has clicked.In one tab user selects a date and if navigate away to other tab of same component and comes back to previous one, I need to retain the selected date.
This is what I am doing in HTML side:
<mat-form-field class="dropdownWidth">
<input #dateInput matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker"
placeholder="Choose a date"
[value]="datePickerDate"
[(ngModel)]="datePickerDate"
(dateChange)="addDateEvent($event)"
[disabled]="selectedOperator.length === 0 && userDateRange.length === 0">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
And in TS file:
addDateEvent(event) {
this.datePickerEvent = event;
this.datePickerDate = new Date(`${event.value['_i'].month + 1}-${event.value['_i'].date}-${event.value['_i'].year}`);
this.formatDate = moment(event.value).format('YYYY-MM-DD');
}
But when I navigate back, date value is not retained. Any suggestions how can I achieve this?
Here is sample stackblitz

It does not work because you are not storing a selected value. So create a variable in typescript:
yourDate: any;
HTML:
<p> YourDate {{ yourDate | date }} </p>
<mat-form-field>
<input matInput [(ngModel)]="yourDate" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
It is possible to see the whole code at stackblitz

In your example you are not using any bindings. Try to use [(ngModel)], so that it will take and hold the selected value.
Do like this, it will work:
<mat-form-field>
<input matInput [(ngModel)]="date" [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Angular 2 way number binding converting to string from input

Any time I enter a number into an input that is 2 way bound to my object the value is converted to a string.
How can I force it or convert it to be a number?
It seems like it should be very simple and yet I have struggled to find an elegant solution.
I saw this solution of using a function to convert it but I don't see how that would work for 2 way data binding.
convert string to number angular 2 one way binding
<div class="row">
<mat-form-field class="custom-control">
<input type="number" matInput class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="custom-control">
<input type="number" matInput class="custom-control" [(ngModel)]="mpv.mileageRate" required placeholder="Mileage Rate">
</mat-form-field>
</div>
mpv is an object of class VehicleType I have my VehicleType class set up as follows. The number types are completely ignored, I guess because it is at run time so just non typed javascript.
export class VehicleType {
baseFare: number;
mileageRate: number;
}
UPDATE - CURRENT HACKY SOLUTION:
onSave(vehicleType: VehicleType) {
// Hack to convert string to number
vehicleType.bags = +vehicleType.bags;
vehicleType.baseFare = +vehicleType.baseFare;
vehicleType.mileageRate = +vehicleType.mileageRate;
vehicleType.passengers = +vehicleType.passengers;
this.vehicleTypeService.updateVehicleType(vehicleType.id, vehicleType).subscribe(result => {

It turns out that the order of the attributes on a matInput mater. This issue does not occur on a standard input only a matInput.
Does not work:
<input type="number" matInput class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">
Works:
<input matInput type="number" class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">

If you want to be able to modify the value when ngModel sets a new value then you're most likely looking at creating a get and set function. Example,
<div class="row">
<mat-form-field class="custom-control">
<input type="number" matInput class="custom-control" [(ngModel)]="baseFare" required placeholder="Base Fare">
</mat-form-field>
</div>
<div class="row">
<mat-form-field class="custom-control">
<input type="number" matInput class="custom-control" [(ngModel)]="mileageRate" required placeholder="Mileage Rate">
</mat-form-field>
</div>
get baseFare(): number {
return mpv.baseFare;
}
set baseFare(value: any) {
mpv.baseFare = pareseInt(value, 10);
}
get mileageRate(): number {
return mpv.mileageRate;
}
set mileageRate(value: any) {
mpv.mileageRate = pareseInt(value, 10);
}
That should do the job.
Update: you could just have value as any or both as any since you know the return type will be a number.

How to manually set date format in matDatepicker (angular 4)

<mat-form-field>
<input matInput name=""
[matDatepicker]="myDatepicker"
[max]="maxDate"
placeholder="Select Date Of Birth"
id="dateOfBirth"
[value]="value"
onkeydown="return false" />
<mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker mat-open-on-focus></mat-datepicker>
</mat-form-field>
This is my snippet which is implemented for two-way binding.
Value return JS date object output as follow
Current output:
"Mon Jan 01 1900 00:00:00 GMT+0530 (India Standard Time)"
Required Output:
01/01/1990 (MM/DD/YYYY).
I have refer following links, but did not get expected output -
Angular 2 Material 2 datepicker date format

AngularJs DatePicker - calendar dropdown doesn't react to model change

I'm using AngularJs datepicker and being stuck at this problem for a while now.
In my app, users can use the datepicker's calendar to select date, or they can click "This Month" to automatically set the date to this month.
Clicking on This Month button will activate a model change in the controller, just like this:
if (when == 'this_month') {
$scope.date_from = Date.today().moveToFirstDayOfMonth().toString('dd-MM-yyyy');
$scope.date_to = Date.today().moveToLastDayOfMonth().toString('dd-MM-yyyy');
}
The HTML
<input name="date_from" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
It works just fine for everything: the date gets changed, the text input shows this month's date, etc.
However, the only thing wrong is the calendar itself not being up-to-date with the date change (i.e. still showing the view of whatever the month it was selected before that)
For example, in this screenshot, when clicking on "Last Month", the calendar still shows This Month view.
How should I tap into the DatePicker's calendar then?

HTML
<input name="date_from" ng-change = getDateFrom(date_from) placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" ng-change=getDateTo(date_to) data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
Angular JS
$scope.getDateTo = function (date_to) {
$scope.dateTo = date_to;
console.log(date_to);
}
$scope.getDatefrom = function (date_from) {
$scope.dateFrom = date_from;
console.log(date_from);
}
Other way
$scope.$watch('date_form', function (date_form) {
$scope.dateForm = date_form;
});
$scope.$watch('date_to', function (date_to) {
$scope.dateTo = date_to;
});