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>

input [type=time] expected to be a date

I have an input like this :
<input type="time" ng-model="reunion.startHour" name="time"
placeholder="HH:mm:ss"
min="08:00:00" max="20:00:00"
class="form-control"
id="time" required />
and I'm getting data from the server where the object has a field time=08:00:00. And I want the input to set to that value when loading the page.But I get this error :
Error: [ngModel:datefmt] Expected 08:00:00 to be a date
Now I've tried this :
$filter('date')(new Date(data.startHour), 'HH:mm');
but I got invalid date.
Any help will be appreciated.Thank you

Well, unfortunately JS doesn't support dates with just a time. HH:mm is not a valid date format: https://www.w3schools.com/js/js_date_formats.asp
You can either handle it manually or use a fake date for the date part you don't care about.
(I tried to find a good time-object solution for you, but I don't see much out there. Hopefully someone else has a smoother solution.)

Works in AngularJS 1.6
<input type="time" ng-model="startHour" name="time"
placeholder="HH:mm:ss"
min="08:00:00" max="20:00:00"
class="form-control"
id="time" required />
<br><p ng-show="startHour">{{startHour | date : 'shortTime' }}</p>
<br><p ng-hide="startHour">Enter Valid Time</p>
app.controller("myVm",function($scope) {
var vm = $scope;
vm.startHour = new Date(0);
vm.startHour.setHours(8);
});
The DEMO on PLNKR.

Angular: Content of a disabled input

I have a disabled input in a page with angular. It's just an input to match the formatting of its mutable neighbors. I want to set it to a date.
The model for the data is not formatted. I would like to pipe it through the date 'medium' filter.
The following works but gives an error saying angular.js:13550 Error: [ngModel:nonassign].
<input readonly type="text" name="Date" disabled ng-model="item.date | date : 'medium'">
I can see why angular is upset. What would happen if someone enabled the and modified the input, right? But I to want to get the date into the input anyway. What should I be doing?

If you intend to not to modify it. You can simply do
<input readonly type="text" name="Date" disabled value="{{item.date | date : 'medium'}}">

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)

Angular only putting attribute of ng-minlength if parsed value is not nil

I want to only set my attribute of ng-minlength when the value I parse from data.Validation['minlength'] is not nil.
First I attempted using ng-switch; I had no problem doing this when handling ng-show=true/false. However I was unable to get it working when it was beyond just the value but also the whole declaration of ng-minlength="...". Second attempt was using ng-if but again I was unable to get it working in the "middle" of the input.
Below is some code that works - I want the whole ng-minlength="data.Validation['minlength']" to only be set if the value is not nil.
<input type="text" name="foo" ng-model="item.foo"
ng-minlength="data.Validation['minlength']" required/>

I discovered a simpler approach in another question of mine.
Solution by Karaxuna here.
<input type="text" name="foo" ng-minlength="myvar || 0" required/>

You can try ng-switch-on
<span ng-switch on="data.Validation>
<input ng-switch-when="null" type="text" name="foo" ng-model="item.foo" ng-minlength="data.Validation['minlength']" required/>
<input ng-switch-default type="text" name="foo" ng-model="item.foo" required/>
</span>
It will create input depending on data.Validation values
However I am not sure if it will work with NULL values. It is still a good way forward.