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
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 am trying to display the "created_at" field from my database using laravel as my backend app and vuejs as my frontend app.
This is what is presently being displayed:
Time: { "created_at": "2018-02-22 14:14:30" }
This is what I want to be displayed:
Time: 22-Feb-2018 14:14:30
My laravel backend code:
$date = loan_request::all('created_at')->toArray();
return([$date]);
Any help rendered would be appreciated..
How I would do the date formating is to use an Eloquent Accessor.
To do this, go to your loan_request model, and simply add the following function.
public function getCreatedAtAttribute($date)
{
return Carbon::parse($date)->format('d-M-Y H:i:s');
}
Be sure to add use Carbon\Carbon; at the top before your class.
Now when you return your date with...
$date = loan_request::all('created_at')->toArray();
return([$date]);
Your dates in the json array will always be in the format 22-Feb-2018 14:14:30
You can read more about Accessors and Mutators in the Laravel Docs here
Edit
I missed when reading the first time you want to remove the created_at key. As others have pointed out you could do that in your vue code by doing one of the following.
<div v-text="date.created_at"></div>
or..
<div>{{data.created_at}}</div>
If you still really want laravel to only return the date without the created_at key then change your query in Laravel to the following.
$date = Location::all('created_at')->pluck('created_at');
return ([$date]);
To answer your question (with your existing HTML):
$date = loan_request::all('created_at')->pluck('created_at')->toArray();
return $date; // will return an array of dates
But what you can do if return the same thing as before but display something like that (and not using my laravel change):
date = { "created_at": "2018-02-22 14:14:30" }
in your html / vue.js file
<span>{{ date.created_at }}</span> <!-- "2018-02-22 14:14:30" -->
Because for now you seem to display something like this:
<span>{{ date }}</span> <!-- { "created_at": "2018-02-22 14:14:30" } -->
And if you want to format the date, you can only do that in the frontend by using filters in vue.js! (You can code your own or use https://github.com/brockpetrie/vue-moment)
<span>{{ date.created_at | moment("dddd, MMMM Do YYYY, h:mm:ss a") }}</span>
<!-- e.g. "Sunday, February 14th 2010, 3:25:50 pm" -->
like the topic says: in my project i have a md-datepicker, which in some cases (which are intended) shows "Invalid Date". Is there any possibility to translate or change this text?
Yes.
Actually, I'd got the same problem and "Invalid Date" should not be good at all. I thought it should be blank.
In my project, it happened when I enabled "md-open-on-focus" and I click on the input (not on icon or caret).
In addition, I was using Moment.js with the following configuration:
$mdDateLocaleProvider.formatDate = function (date)
{
return moment(date).format('DD/MM/YYYY');
};
As you can see, an invalid date like null or empty was formated and then returned.
Then, I've solved it by replacing it to this:
$mdDateLocaleProvider.formatDate = function (date)
{
var tempDate = moment(date);
return (tempDate.isValid() ? tempDate.format('DD/MM/YYYY') : '');
};
I have a form and am getting a strange error when it comes to a required field "Date_Of_Birth". When I console the form, I get 2 values under form.$error.required for this field. As a result of which I get 2 notifications when the field is not entered
When I console the form in angular
div.containerBackground(ng-controller='GeneralReportsController')
div#primary1.container.cstm-panel-heading
div#primary2.align_input
div.container.col-lg-12
div.row.col-md-12
form.form-horizontal
div.form-group
label.col-sm-4 Select Special Program
div.col-sm-8
select#idType.btn.btn-default(name ='specialProgram',ng-model='specialProgram',ng-options='specialProgram.name for specialProgram in SpecialProgramDetails',ng-change='selectSpecialPrograme(specialProgram)' required)
| {{specialProgram.programName}}
div(ng-show="program")
ng-form.login-form.form-horizontal.no_border(method="post" role="form" name="AddStudentsTospecialProgramForm")
div.form-group
label.col-sm-4 Date Of Birth
label.mandatoryField *
div.col-sm-8
ng-bs3-datepicker(name='Date_Of_Birth', ng-model='student.dob',date-format="DD/MM/YYYY" , language='en', required, ng-blur="validateDate(student.dob)")
p.help-block(ng-show='AddStudentsTospecialProgramForm.Date_Of_Birth.$error.pattern') Date Of Birth is invalid.
div.col-sm-offset-4.col-sm-10
a.btn.btn-success(role="button",ng-click='saveStudentRegistrationForSpecialProgram()') Register
instead of the required attribute, I changed it to ng-required and the issue was fixed
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" >