How can you bind the current date and time to a datetimepicker in ASP.NET Core 2.2.
<div class="form-group row">
<label class="col-sm-2 col-form-label">Issue date and time :</label>
<div class="col-sm-10">
<input asp-for="DateTimeValue" class="form-control" required />
</div>
</div>
public DateTime DateTimeValue { get; set; } = DateTime.Now;
Just set the value attribute to the current date for the default value:
<input asp-for="DateTimeValue" value="#DateTime.Now.ToString("MM-dd-yyyy hh:mm tt")"
class="form-control" required />
And then get rid of the = DateTime.Now from your get-set object.
Related
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 have got a table letter. When I update record, I don't see on the view date of record.
I tried to get date as follows:
<input type="date" name="dateSend" value="${letter.dateSend}">
I debugged my code, in the controller I get the date, but in the view, I don't see it.
When I changed type from type date to text, I see the date send of the letter, but I want use type of date.
My code:
Service:
public Iterable<Letters> updateLetter(
String numberList, String titleLetter, String addressee,
Date dateSend, Letters letter
){
letter.setNumberList(numberList);
letter.setTitleLetter(titleLetter);
letter.setAddressee(addressee);
letter.setDateSend(dateSend);
letterRepository.save(letter);
return getAllLetters();
}
public Iterable<Letters> updateLetter(
String numberList, String titleLetter, String addressee,
Date dateSend, Letters letter
){
letter.setNumberList(numberList);
letter.setTitleLetter(titleLetter);
letter.setAddressee(addressee);
letter.setDateSend(dateSend);
letterRepository.save(letter);
return getAllLetters();
}
Controller:
#PostMapping("editLetter")
public String editLetter(
#RequestParam String numberList, String titleLetter,
String addressee, #DateTimeFormat(pattern = "yyyy-MM-dd") Date dateSend,
Model model, #RequestParam("letterId") Letters letter
){
letterService.updateLetter(numberList, titleLetter, addressee, dateSend,
letter);
model.addAttribute("letter", letter);
return "redirect:/letter";
}
#GetMapping("/del/{letter}")
public String deleteLetters(
#PathVariable Letters letter
){
letterService.deleteLetter(letter);
return "redirect:/letter";
}
View:
<#import "parts/common.ftl" as c>
<#c.page>
Letter editor
<form action="editLetter" method="post">
<div class="form-group row">
<label class="col-sm-2 col-form-label">Number list: </label>
<div class="col-sm-6">
<input type="text" class="form-control" name="numberList" value="${letter.numberList}">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Title letter: </label>
<div class="col-sm-6">
<input type="text" class="form-control" name="titleLetter" value="${letter.titleLetter}">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Addressee: </label>
<div class="col-sm-6">
<input type="text" class="form-control" name="addressee" value="${letter.addressee}">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Date send: </label>
<div class="col-sm-6">
<input type="date" name="dateSend" class="form-control" value="${letter.getDateSend()}" placeholder="Please enter date of sending">
</div>
</div>
<input type="hidden" value="${letter.id}" name="letterId">
<input type="hidden" value="${_csrf.token}" name="_csrf">
<button type="submit" class="btn btn-primary">Save</button>
</form>
I expected: date od my record, but my result is dd.mm.rrrr
Please help me! :)
If you see dd.mm.rrrr as is in the output, that means that FreeMarker was miss-configured to format dates as dd.mm.rrrr literally. Someone tried to set the date_format configuration setting to dd.mm.rrrr, but actually set it to 'dd.mm.rrrr', which includes the '-s. Remove those '-s. After that you will also realize that the correct pattern would be dd.MM.yyyy.
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.
I have a form with all fields, less one of it, filled from user. This is the class passed through the form
public class CarForm {
private String id;
private Integer initialKm;
private String carChassis;
private String note;
private String carType;
private Integer fleet;
The only one field, fleet, I would like to set before pass the form, or better, set it from HTML. For example:
<div class="form-group">
<label>Fleet application</label> <input type="text"
class="form-control" th:field="*{fleet}"
th:placeholder="${fleetApplication}" readonly="readonly">
</div>
So I would like to show ${fleetApplication.application} and set into fleet this value, or, if it is possible, set another value${fleetApplication.idFleet}.
Is it possible one of these solutions?Thanks
Update: as suggested by #Faraj Farook I resolved so:
<div class="form-group">
<label>Fleet application</label>
<!-- Show fleet application -->
<input class="form-control" type="text" th:value="${fleetApplication.application}" readonly="readonly" />
<!-- Save into fleet the value of idFleet -->
<input type="hidden" name="fleet" th:value="${fleetApplication.idFleet}" />
</div>
Setting it in the server side
controller
String action(Model model){
CarForm carForm = new CarForm();
carForm.setFleet(<some value>);
model.addAttribute("obj", carForm);
return view.html;
}
view.html
<div class="form-group">
<label>Fleet application</label>
<input type="text" th:field="*{fleet}" readonly/>
</div>
setting it in the client side
view.html
<div class="form-group">
<label>Fleet application</label>
<input type="text" readonly th:value="${someValueVariable}"/>
<input type="hidden" name="fleet" th:value="${someValueVariable}"/>
</div>