I am trying to bind an attribute of my model to a dateTime-local input and something is not working properly.
This is my model
$scope.testDate = new Date($.now());
This is my html
<input type="datetime-local" id="exampleInput" name="input" ng-model="testDate" />
value = {{testDate}}
When i start the app the dateTime input shows "mm/dd/yyyy, --:--:--" in the input box, but the "value =" part is displayed with the correct dateTime value.
If i enter a valid date in the input box it will update the value so the binding is working but something with displaying the initial value is not...
What am i missing here?
AngularJS support the input type datetime-local since version 1.3.0-beta.1
And it is a breaking change that the value in model must be an Date object instead of string like in the previous version.
Therefore, if you would like to use the datetime-local input and bind it with Date object, please ensure to use angularjs version 1.3.0-beta.1 or newer.
init the values
$scope.dateRange = {
from : new Date(2010, 11, 28, 14, 57),
to : new Date(2010, 11, 28, 14, 57)
}
then access
alert($scope.dateRange.from);
alert($scope.dateRange.to);
Range From
<input type="datetime-local" name="rangeFrom" ng-model="dateRange.from" >
To
<input type="datetime-local" name="rangeTo" ng-model="dateRange.to" >
Related
I am using the html input type date on a form in react. Previously when encountering issues with the javascript date object and getting it to display correctly, I used the method of .replace(/-/g, "/") and the day passed in would be displayed correctly.
I am making a new app and trying the same thing and receiving the following error basically copying and pasting lines of code.
The specified value "2021/07/06" does not conform to the required format, "yyyy-MM-dd".
So apparently you are required to do a timezone offset to get the date object to correctly display in react?
Here is what i am trying to do to get a proper date to display in the value of the date picker:
<input
type='date'
name='startDate'
value={startDisplay != null && startDisplay}
id=''
onChange={(e) => {
setStartDate(e.target.value);
setStartDisplay(
Intl.DateTimeFormat({
year: "numeric",
month: "numeric",
day: "numeric",
})
.format(new Date(startDate))
.replace(/-/, "/")
.replace(/-/, "/")
);
}}
/>
I'm wondering if there is a fix that allows the replace method to work, or if someone can help me write a function for setDisplayDate that properly uses timezoneoffset.
or should I just suck it up and add the date picker library?
I have tried to change the value of selection in angular material date picker to YYYY-MM-DD format as follows:
In dateInput event of the field I call a function which will change the format of date using date pipe and set value back. However, the format doesnt change.
HTML Code
<input matInput placeholder="Stop Date" [matDatepicker]="stopDate" (dateInput)="OnStopDate($event.value)" formControlName="stopDate">
<mat-datepicker-toggle matSuffix [for]="stopDate"></mat-datepicker-toggle>
<mat-datepicker #stopDate></mat-datepicker>`
TS Code
`OnStopDate(Value){
const update= this.datepipe.transform(Value, 'YYYY-MM-dd'); //this value is being update
this.myForm.controls.stopDate.setValue(update,{emitEvent: false}); // the value is not being set in yyyy-mm-dd but in mm-dd-yyyy
}
I did see a solution provided using MomentDateAdapter as here. Is this the only solution proceed and why ?
I have just started using the react-day-picker library. I have the following code sandBox which is a fork of the range with 2 inputs example,
https://codesandbox.io/s/w6vnlox29l
I have it working the way I want but I want to input the dates as MM/DD/YYYY instead of the default format, YYYY-MM-DD. When I add the following attributes
<DayPickerInput
value={from}
format="M/D/YYYY"
formatDate={formatDate}
parseDate={parseDate}
placeholder="MM/DD/YYYY"
onDayChange={this.handleFromChange}
dayPickerProps={{
selectedDays: [from, { from, to }],
modifiers,
disabledDays: {
after: new Date(),
},
numberOfMonths: 2,
toMonth: new Date(),
}}
/>
I can no longer correctly enter the date in the input field the date. When I remove the format, formatDate and parseDate attributes the date picker input functions the way I expected. I have read the documentation but think I may be missing something simple. How can I use the input text box and date picker with dates formatted as MM/DD/YYYY?
I am getting error while populating date value in date field
I have the date input field,
<input type="date" data-ng-model="personalDetailsObj.personalDetails.dob" name="dob" value="{{personalDetailsObj.personalDetails.dob}}" pattern="dd/MM/YYYY"/>
I am getting the DOB value from server like this,
$scope.kycinfo = {
"title": "Mr",
"name": "vishnu",
"dob": "22-06-1980",
};
I am getting error When i try to set the value like this,
$scope.personalDetailsObj.personalDetails.dob = $scope.kycinfo.dob;
Error saying, Error: [ngModel:datefmt] Expected 22-06-1980 to be a date
If you are using moment.js (if not use it), then try this
$scope.personalDetailsObj.personalDetails.dob = moment($scope.kycinfo.dob);
otherwise using simple javascript (not recommended)
$scope.personalDetailsObj.personalDetails.dob = new Date($scope.kycinfo.dob);
Also no need of value attribute when you are already using ng-model
I had been trying to set the date to a input type="date" using angular's ng-model and value with no success. I tryed to use the documentation of angular JS about the input-date and the only thing I got was to set the year of the input, day and month remained with the placeholder value: "dd/mm/2014".
what I tried:
$scope.value = new Date(2013, 9, 22);
and in my HTML:
<input type="date" id="exampleInput" name="input" ng-model="value" placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
and what I get is tha input date with: "dd/mm/2013"
I tried using the angular documentation example to be sure that I am doing it right, thats because of the min and max value of the date.
Any idea on how to fill my input date with the date of today ?
Thanks in advance
$scope.value = new Date().toISOString().split("T")[0]; // 2014-05-23
tested in chrome.
The date format needs to be in a valid ISO-8601 date format (yyyy-MM-dd)
// This won't work
new Date(2013, 9, 22); // Tue Oct 22 2013 00:00:00 GMT+1100 (EST)
try this:
new Date().toISOString().split("T")[0]; // "2014-09-30"
Note: toISOString() will return the UTC timezone.
See: https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
The above answers generate "Error: ngModel:datefmt
Model is not a date object", at least in angular 1.4.7.
A slight adjustment fixes it:
$scope.value = new Date(new Date().toISOString().split("T")[0])
I am doing following things,and date get started appearing in mm/dd/yyyy format-
<input type="date" data-ng-model="value" />
also do this in controller:
$scope.value=new Date();
$scope.value =new Date($scope.value).toISOString().split("T")[0];