Develop Reference

Manual typing format of date

I am using ng-pick-datetime for selecting and displaying dates. I have changed to format of the date to DD/MM/YYYY using dateTimeAdapter.setLocale('en-IN') in constructor. If I click the calendar and select the date Its in format of DD/MM/YYYY but If I manually type 03/28/2019, it still accepts. I want to restrict other format except DD/MM/YYYY even on typing. Please help me out.
Code
<input (ngModelChange)="onChangeDate($event)" [(ngModel)]="dob" name="date" [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1" required>
<owl-date-time class="" [pickerType]="'calendar'" [startView]="'multi-years'" #dt1></owl-date-time>
import { DateTimeAdapter } from 'ng-pick-datetime';
constructor(dateTimeAdapter: DateTimeAdapter<any>){dateTimeAdapter.setLocale('en-IN');}

There are several ways to validate your input. Here I have provided solution to your problem.
https://stackblitz.com/edit/ng-pick-datetime-format-i18n-qwhyb3?embed=1&file=src/app/app.component.html
I have added type of input as "text", pattern as you needed "DD/MM/YYYY" and background css to get valid and invalid status of input tag.
<input type="text" pattern="^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$" (ngModelChange)="onChangeDate($event)" [(ngModel)]="dob" name="date" [owlDateTimeTrigger]="dt1" [owlDateTime]="dt1" required>

how can I validate with vuejs fields that are prepopulated from database?

I want to validate the inputs from a form in vuejs, and when the data is pre-populated I want the inputs to convert to readonly.
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false">
the problem with this now is that always that i writed on the input if the value is higher than 0 the input is readonly and i dont want that.. how can do that with vuejs 2?.. thank you.

What you are trying achieve can be done easily using v-once directive
<input type="number" name="cf_962" class="form-control" v-model="fillProfile.cf_962" step="0.1" :readonly="(fillProfile.cf_962>0.00) ? true : false" v-once>
As mentioned in docs
You can also perform one-time interpolations that do not update on
data change by using the v-once directive, but keep in mind this will
also affect any other bindings on the same node
v-once will let you set readonly for the inputs having pre populated data, and not readonly for the inputs which are not pre populated. This thing will happen only once so next time you write on the input it will won't affect the readonly anymore.

How to handle different input types bound to same ng-model?

In a page, I have a section for date-range selection. A large portion of our user base is IE 10/11, which does not support input type="date". I'm using Modernizr to show/hide the date input based on the support, and when not, provide an input of type="text", both bound to the same ng-model. Typing into the text spams the console with errors, as the text and date are incompatible. Is there a way to fix this console spam? Using a third-party library is not an option.
<div class="col-md-3" data-ng-show="searchBillCreatedDate == 'custom'">
<label>From</label>
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-show="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-show="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
</div>

Change your ng-show to ng-if like this:
<input data-ng-model="searchFromDate" type="date" class="form-control" data-ng-if="browser.supportsDateInput">
<input data-ng-model="searchFromDate" type="text" class="form-control" data-ng-if="!browser.supportsDateInput" placeholder="yyyy-mm-dd">
You're getting the error because it's binding to the the first input's model, which is a date input. ng-show just uses CSS to hide the element but it still exists in the DOM. ng-if, however, completely removes it from the DOM, leaving you with one ng-model="searchFromDate"

Angular Date Filter not filtering in ng-value

// date = 2015-12-05T02:34:45.249Z
<div>
<p>{{date | date:'yyyy/MM/dd'}}</p> // This works, shows the correct date
</div>
<label>
<input type="date" ng-value="{{date | date:'yyyy/MM/dd'}}"> // This doesn't work
</label>
Codepen
I'm not sure what is going on. The first filter works well, but the second one doesn't format the date at all, leaving the date as the initial string.

Try:
<label>
<input type="date" ng-value="date | date:'yyyy/MM/dd'">
</label>
This will show the correct date format in your structure

Well this works for me
<input type="text" placeholder="DOB" ng-value="dataValue | date:'dd/MM/yyyy'">
if you give type "date" then it will hide place holder so better to pass it as text.

When you do what Soluciones Intuitivas wrote and change type from date to text you will see date. If you want to use type="date" you should add directive to convert data to correct format.
Directive should return something like:
return new Date(date);

I would suggest to use input type='text'. Then you could use the date as this:
<input type="text" value="{{date | date:'yyyy/MM/dd'}}">
This way (using type='text') you can control the actual date format displayed to the user, instead of allowing browser to select your locale's format (which is not what you always want)

Can't format date in <input>

I am having a problem binding my to a DateTime in Angular.
In Fiddler, my DateTime looks like this:
lastEnquiryDate: 2015-03-04T16:01:18.403Z
The following works:
<input ng-model="customer.lastEnquiryDate" class="form-control input-sm" id="customer-last-enquiry-date" readonly></input>
but produces an ugly result.
What I would like to do is filter the customer.lastEnquiryDate so that it is pretty, like this:
<input ng-model="customer.lastEnquiryDate | date" class="form-control input-sm" id="customer-last-enquiry-date" readonly></input>
but this produces this error. Now I understand why this error is being generated but I don't know the workaround. I have tried using ng-bind, but this produces a blank input.
How do I format the date in this input? As it happens, my date field is read only, so a solution using ng-bind would be ok.
Looking forward to your responses.

The below should work:
<input ng-model="customer.lastEnquiryDate" type="date" class="form-control input-sm" id="customer-last-enquiry-date" readonly></input>
More details here:https://docs.angularjs.org/api/ng/input/input%5Bdate%5D

I don't know what I did, but it suddenly started working with ng-model="customer.lastEnquiryDate | date". Don't know why, but don't look a gift horse in the mouth, as they say.