I want hide oldest date in date input. How to do this ?
Model:
Public Property OrderDate As Date
View
#Html.EditorFor(Function(m) m.OrderDate, New With {.placeholder = "Set Date"})
Html Output
<input class="text-box single-line" data-val="true" data-val-date="The field Order Date must be a date." data-val-required="Order Date is Required" id="OrderDate" name="OrderDate" type="date" value="01/01/0001">
You can set it HTML5 min and max attr. For example,
<input name="somedate" type="date" min="2013-12-25">
In your example
<input name="somedate" type="date" min='#DateTime.Now.ToShortDateString()'>
Related
We have a HTML form and I have pasted the code for our Date of Birth field below. When the user enters the date, it requests it in dd/mm/yyyy format. However, once they click off the field, it changes to yyyy/mm/dd. As a result, our CRM is not accepting it because of the format. Is there a way to keep it as dd/mm/yyyy?
<label><span class="dateInput dateOnlyInput"> <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="100" placeholder="Date of Birth" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" required="true" data-cip-id="00N0Y00000RWiNa"></span></label>
Thanks
James
first it would be good to make sure you have only one "id" attribute on the input field.
Here is an example that might help you.
Here I removed the first id to get rid of the error in jsfiddle.net
function formatDate() {
// select element
const date = document.querySelector('#date');
// pick up date
let currentValue = date.valueAsNumber;
// change type
date.type = "text";
// update value with prev set value from date picker
date.value = new Date(currentValue).toLocaleDateString('en-GB');
}
<label>
<span class="dateInput dateOnlyInput">
<input name="00N0Y00000RWiNa"
size="100"
placeholder="Date of Birth"
class="textbox-n"
type="text"
onfocus="(this.type='date')"
onblur="formatDate()"
required="true"
data-cip-id="00N0Y00000RWiNa"
id="date">
</span>
</label>
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 property as input type ="datetime". But this property view the output MM/DD/YYYY. so how do I change the output format of the Date to DD/MM/YYYY?
pick the date format mm/dd/yyyy
<div class="form-group">
<label>{{"StartDate" | localize}}*</label>
<input required class="form-control m-input" type="datetime" bsDatepicker
datePickerMomentModifier [(date)]="ticketWorkDetail.workDetailStartDate"
id="TicketWorkDetail_WorkDetailStartDate"
name="TicketWorkDetail_WorkDetailStartDate">
</div>
If you are using ngx-bootstrap... I think you are from the bsDatepicker directive on your input. You can use the bsConfig directive to format the date input. https://valor-software.com/ngx-bootstrap/#/datepicker#format
<div class="form-group">
<label>{{"StartDate" | localize}}*</label>
<input required class="form-control m-input" type="text" bsDatepicker
datePickerMomentModifier [(date)]="ticketWorkDetail.workDetailStartDate"
[bsConfig]="{ dateInputFormat: 'DD/MM/YYYY' }"
id="TicketWorkDetail_WorkDetailStartDate"
name="TicketWorkDetail_WorkDetailStartDate">
</div>
You can set the input type attribute to text and the bsDatepicker directive will do it's work.
Trying to fetch DateofBirth value from the database which is in this date format:
yyyy-MM-ddT00:00:00
I am using Angular6 and bsDatepicker from Bootstrap. When I am binding date value from json to the field, It shows invalid date.
My code looks like this:
I tried using value property of input to set with datepipe alerady
component.html:
<input type="text" id="dob" class="form-control" date-placeholder="Date Of Birth" name="dob" [(ngModel)]="dob" #DateofBirth="ngModel" placeholder="Date of Birth" bsDatepicker required/>
json array:
{dob: "1996-02-07T00:00:00"
empcode: "6789"
empfather: "ML "
empid: 1
empname: "Vana"
empphone: "+919898989898"
role: "adminstaff"}
<div class="input-group" ng-init="d.expiredAt = toDate(d.expiredAt);">
<input type="text" class="form-control" uib-datepicker-popup="dd/MMM/yyyy"
is-open="popup1.opened" ng-required="false"
close-text="Close" ng-model="d.expiredAt" ng-readonly="!editing"/>
I want to compare this date with current date and highlight this field with red if it is < than current date.
I guess that the purpose of your feature is to notify / prevent user from selecting a date before today ?
If it's the case, the bootstrap-ui component you're using provides the feature :
minDate (Default: null) - Defines the minimum available date.
Requires a Javascript Date object.
If you declare the today's date in your controller :
$scope.now = new Date();
You can use it like this in your HTML :
<input type="text" min-date="now" class="form-control" uib-datepicker-popup="dd/MMM/yyyy"
is-open="popup1.opened" ng-required="false"
close-text="Close" ng-model="d.expiredAt" ng-readonly="!editing"/>
It will disable the selection of passed dates.