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>
Related
Is there a way to have a user be required to select a date from the picker before submitting the form. Of note: the form works when a date is selected. If a date is not selected the form allows the user to hit enter although crashes after. Also of note: if I change the type to date, text, number etc the form required function works, however, the user is then not able to use the javascript date picker.
<form method="POST" action="placeorderfinal.php">
<label for="Booking date & time">Order for (date & time): </label>
<input type="datetime-local" id="orderdate" name="orderdate" placeholder="yyyy-mm-dd HH:MM" required/>
You should use javascript to solve your problem then. When the users clicks submit check the date input if nothing is entered throw an error.
I am trying to display the current date that is saved in my database when I'm updating the registered data. When I click to update the register, all the fields with input type=text are shown with the data in the database, but the fields with input type=date show as mm/dd/yyyy, instead of the data stored. Is it possible to show the date stored with the input type=date in my update form? Thanks for helping.
Here is my input:
<label for="birth_date">Birth Date: </label>
<input
type="date"
class="form-control"
name="birth_date"
id="birth_date"
value="<%= patient.birth_date %>"
/>
Make sure the value of patient.birth_date is in YYYY-MM-DD format. The MDN documentation says:
Note: 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.
With Bootstrap 3 DateTimePicker, I understand that defaultDate can be configured via JS. Is it not possible to use the value of the input field as default?
Not working:
<input type="text" class="form-control" value="2016-01-15" data-date-format="L" />
Here's a JSFiddle attempt that is not working.
Thanks!
format: 'L' is the same as format: 'MM/DD/YYYY your textbox value does not match this format and thus is an "invalid date".
If you need other formats to be valid us extraFormats
// 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)
I have <input type=date id=something>
I want change the data using javascript.
I am sending the query in mysql and I request for the date, so I need to put that date there I tried document.getElementById.('something').value=$new and it didn't work.
Because the date format has to be in ISO 8601 format you might have to edit what you are passing as the value
eg:
<input type="date" name="dt" value="1999-07-16">
works but
<input type="date" name="dt" value="1999-7-16">
doesn't