Develop Reference

How to change date format of html date picker

I am using AngularJs to create a form where I need to add a date picker which should show date in format of mm-dd-yyyy.
But the default HTML5 date picker shows date in dd-mm-yyyy format. Is there any way to show date in mm-dd-yyyy format ?
My code -
<div>
<div class="col-md-6">
<div class="position-relative form-group">
<label for="123" class="font-weight-bold">Date of Birth <span class="text-danger">*</span></label>
<div id="dob" class="input-group date">
<input type="date" class="form-control required" id="dob" ng-model="data.DOB" required />
</div>
</div>
</div>
<button ng-click="submit(data)">Submit</button>
</div>
$scope.submit = function(data) {
console.log(data);
}
How can I achieve this?

The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.
Check this for more details - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

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>

Obtaining start and end Date Objects using the component methods

(eternicode) I'm using a range datepicker for my form.
<div class="input-daterange col-md-9 input-group" id="act">
<input class="form-control" name="act_1" type="text">
<span class="input-group-addon">to</span>
<input class="form-control" name="act_2" type="text">
</div>
i want to get both values in Date Object to later replace the data sent on the form with the ISO8601 format to preserve timezones.
i have used
$(element).datepicker("getDate");
$(element).datepicker("getDates");
but i haven't obtained any success. Anyone has an idea of what it is the rigth way to obtain this information ?

Date value not showing value pulled from database

My setup is SailsJS + Mongo using EJS for inserting database values onto my page.
On my page I'm using a standard HTML form date picker and to set a date. Using this I can successfully submit the selected date to my database with no issues. The date format looks like this in my DB: 2015-06-09T00:00:00.000Z
I can call this value into a regular text field, but if I try to populate a date picker value, it just shows up like the value has not been populated.
Is there something I'm missing or some inbetween step which needs to be taken?
Here is what my form entry looks like for the date picker:
<div class="control-group">
<label class="control-label" for="resStart">When do you need the space?</label>
<div class="form-group">
<input type="date" class="form-control" value="<%= request.resStart %>" name="resStart">
</div>
</div>
<div class="control-group">
<label class="control-label" for="resEnd">When will you be done with the space?</label>
<div class="form-group">
<input type="date" class="form-control" value="<%= request.resEnd %>" name="resEnd">
</div>
</div>

your value in DB is actually a datetime value. i think just passing it to date picker will not be recognized. it needs to be changed to date format. the input tag in your html is date type. i think change this to text will get the value appear. but to make the date picker work you will need to do some data conversion between the datetime format 2015-06-09T00:00:00.000Z and 2015-06-09

How to get Bootstrap timepicker date object?

Currently using bootstrap timepicker with Angularjs
http://jdewit.github.com/bootstrap-timepicker
The control is displaying well but when i set the ng-model and get the startTime
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control timepicker" ng-disabled="!useTime" data-template="dropdown" data-show-seconds="true" data-default-time="11:25 AM" data-show-meridian="true" data-minute-step="5" ng-model="startTime" />
</div>
</div>
The startTime assigned is a string like "11:25 AM" instead of a date object i can manipulate in javascript.
How can i get date object? Do i need to convert it manually?

Think this answer seems to be similar to your question.Hope it provides some insight.
Time Binding issue in Bootstrap timepicker