I am using datetimepicker to display date and time and store it in a particular model in this format ("2015-01-01T15:10:23"), from this I want to hide seconds only in front-end, but not in back-end model.
Could anyone help me to solve my problem?
<div class="form-group" ng-class="{ 'has-error' : userForm.datetime.$invalid}">
<label>date and time</label>
<div class='col-sm-12 input-group date'>
<input id="datetimeid" ng-model="datemodel" name="datetime" type='text' class="form-control" ng-change="datevalidator()" placeholder="date and time" required/>
</div>
$scope.datevalidator = function () {
var datetime = $scope.datemodel;
$scope.datemodel = (datetime.indexOf(':00') > -1) ? datetime.replace(':00',"") : datetime;
};
You can use angular built-in filter:
{{ date_expression | date : format : timezone}}
Here you have more info on how to use it: https://docs.angularjs.org/api/ng/filter/date
Related
While performing the edit operation using angular 13, I'm using HTML input type date. When fetching a date from the database, it is not showing the date in the textbox. Kindly help me.
update-movie.component.html
<div class="mb-2">
<label>Release Date</label>
<input type="date" name="releaseDate" class="form-control" [(ngModel)]="movieService.movieData.releaseDate"
#releaseDate="ngModel" [value]=movieService.movieData.releaseDate required
[class.is-invalid]="releaseDate.invalid && releaseDate.touched">
</div>```
I found the answer, instead of [value] I used [ngModel] and applied date pipe.
<label>Release Date</label>
<input type="date" name="releaseDate" class="form-control" [(ngModel)]="movieService.movieData.releaseDate"
#releaseDate="ngModel" [ngModel]="movieService.movieData.releaseDate | date : 'yyyy-MM-dd'" required
[class.is-invalid]="releaseDate.invalid && releaseDate.touched">
</div>
I am using an HTML form in my Angular project, but it keeps ignoring the "value" and "selected" parameters.
For the first case, I am trying to set the current timestamp as a default value for a datetime-local field.
The HTML code :
<div class="form-group">
<label for="timestamp_honeycomb">Date :</label>
<input type="datetime-local" class="form-control" id="timestamp_honeycomb" formControlName="timestamp_honeycomb" value="{{ timeElapsed | date: 'yyyy-MM-ddTHH:mm' }}" />
</div>
<div class="form-group">
<label for="smell_beehive">Odeur de la ruche</label>
<select name="smell_beehive" class="form-select-sm" id="smell_beehive" formControlName="smell_beehive">
<option value="faible" selected="selected">Faible</option>
<option value="moyenne">Moyenne</option>
<option value="forte">Forte</option>
</select>
</div>
The .ts code of the form :
formGroup = this.formBuilder.group({
timestamp_honeycomb: new FormControl([Validators.required]),
smell_beehive: new FormControl([Validators.required, Validators.pattern(this.regex)]),
)}
Thank you in advance.
EDIT : The "selected" part is solved, as I used this format :
smell_beehive: new FormControl('faible',[Validators.required, Validators.pattern(this.regex)])
Yet I remain curious about how to set a default value via the html view.
I found a way here : https://stackoverflow.com/a/51395993/9522006
Following that method, I then wrote my variables this way :
timeElapsed = Date.now();
formTime = this.datepipe.transform(this.timeElapsed, 'yyyy-MM-ddTHH:mm');
And, in the form declaration :
timestamp_honeycomb: new FormControl(this.formTime, [Validators.required])
I am using the owl-date-time module in my application to get date-time parameters in two fields. However, I am getting the value in a list with an additional null value in the payload.
Also, I wish to convert the value to epoch time to meet the API requirements.
In HTML Component:
<div class="form-group row">
<label class="col-md-3 col-form-label text-right">
Start Time
<span class="colorRed">*</span>
</label>
<div class="col-lg-5 col-sm-11">
<input type="text" id="start_time" style="height: 36px;"
class="form-control" [selectMode]="'rangeFrom'" name="start_time"
placeholder="Start Time" [(ngModel)]="startTime"
[owlDateTimeTrigger]="dt1" [owlDateTime]="dt1"
(change)="getTime(startTime,dt1)" [max]="maxFrom"
autocomplete="off" required>
<owl-date-time #dt1></owl-date-time>
</div>
<!---->
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label text-right">
Stop Time
<span class="colorRed">*</span>
</label>
<div class="col-lg-5 col-sm-11">
<input type="text" id="stop_time" style="height: 36px;"
class="form-control" [selectMode]="'rangeTo'" name="stop_time"
placeholder="End Time" [(ngModel)]="stopTime"
[owlDateTimeTrigger]="dt2" [owlDateTime]="dt2"
(change)="getTime(stopTime,dt2)" [min]="minTo"
autocomplete="off" required>
<owl-date-time #dt2></owl-date-time>
</div>
</div>
</div>
In Typescript, I am calling this function to do the conversion. But I do not think that the function is getting called as I am unable to get any console logs.
TS Code
getTime(t, selectMode) {
console.log("Hello Chuckles");
let tempRangeFrom, tempRangeTo;
t.forEach(element => {
if (typeof (element) != 'undefined' && element != null) {
if (element[1] != null) {
console.log("FROM!##$%^&*()");
tempRangeFrom = element.getTime(); // Date To TimeStamp
this.minTo = new Date(tempRangeFrom); // TimeStamp to Date
this.minTo.toGMTString();
} else {
tempRangeTo = element.getTime();
this.maxFrom = new Date(tempRangeTo);
this.maxFrom.toGMTString();
}
}
});
}
Screenshot for date-picker:
Payload:
You can simply do this:
const date = new Date()
console.log(new Date(date).getTime())
You can also check this link if the above code doesn't help.
I want my form date input field to display today's date e.g (2019-11-28) when I open the form. I saw many examples on how it works in AngularJs but how can I get the date with reactive form.
form
//.....
<div class="form-group">
<label>Date:</label>
<div class="input-group">
<input type="date" class="form-control col-md-8" formControlName="date"/>
</div>
</div>
.
//...
With formControlName.
.ts
//...
currentD = new Date();
..
..
//....
Set formControlName default value as (new Date()).toISOString().substring(0,10)
Working Demo
Try like this:
.ts
myForm:FormGroup;
this.myForm = new FormGroup({
'presentDate': new FormControl((new Date()).toISOString().substring(0,10))
});
use data bindind you can use one way binding
<input type="date" [value]="currentD" class="form-control col-md-8" formControlName="date"/>
or tuo way binding
<input type="date" [(ngModel)]="currentD" class="form-control col-md-8" formControlName="date"/>
create a FormGroup variable to assign the value to Form
form : FormGroup;
// you can set the default value
constructor( fb:FormBuilder){
this.form = fb.group({
presentDate: [new Date()]
});
}
In the View
<div class="form-group">
<form [formGroup] = "form">
<label>Date:</label>
<div class="input-group">
<input type="date" class="form-control col-md-8" formControlName="presentDate"/>
</div>
</div>
I am trying to add a check in my form to check if the End Date is less than the Starting Date it should throw an error which is not working. Don't know whats the issue here.
my .html code is as follows:
<label class="col-md-2 form-control-label">Event Starting Date</label>
<div class="col-md-4">
<input class="validate" #startdate="ngModel" [(ngModel)]="input.event_starting_date" name="startdate" type="date" placeholder="Event Starting Date" class="form-control" required>
<div class="alert alert-danger" *ngIf="startdate.touched && !startdate.valid">Starting Date is required!</div>
</div>
<label class="col-md-2 form-control-label">Event Ending Date</label>
<div class="col-md-4">
<input class="validate" #enddate="ngModel" [(ngModel)]="input.event_ending_date" name="enddate" type="date" placeholder="Event Ending Date" class="form-control" required>
<div class="alert alert-danger" *ngIf="enddate.touched && !enddate.valid">Ending Date is required!</div>
<div class="alert alert-danger" *ngIf="enddate<startdate">Ending Date Must be greater than Starting Date!</div>
The end- and startdate are put in a model like this:
date = {
year: '',
month: '',
day: ''
};
Have you tried comparing every different property of both date models? I don't think you can compare both models directly to each other since they both have their own underlying properties.