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];
Related
How can I make that ReactJS Datepicker should only display days starting from this month and on (no back dates).
This is not exactly what I was trying to do but its a quick fix.
I use the includeDates={this.state.includeDates} from ReactJS Datepicker
and I made a custom function to print out the days starting from today and i save it in an array that i then pass to the react state excludeDates: [''],
and only those days will be clickable.
let fromDate = moment();
let toDate = moment().add(24, 'months'); //including only days starting from today untill 2 year
for (let i = 0; i < moment(toDate).diff(fromDate, 'days') + 1; i++) {
state.includeDates.push(moment(fromDate).add(i, 'days'));
}
Thanl you! hope it helps someone.
You can use moment startOf using 'month' parameter to get the first day of the month and pass it to minDate option to make the datepicker enable only dates from the start of the current month:
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
minDate={moment().startOf('month')}
/>
If you want to enable only future dates, simply remove maxDate option from the linked example, you can use the following code:
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
minDate={moment().startOf('day')}
/>
i write the following coding to print the current date time
$scope.date = new Date();
and then i print the same using consol.log
console.log($scope.date);
and it is working fine
Tue Jan 24 2017 16:36:06 GMT+0530 (India Standard Time)
but now i want to change the date format and i want to print like
21-12-2016
can anybody help me here?
i used the conversion but i am unable to remember the page or the url of the page right now,
and stuck on this,
before i leave for the home today i thought of solving this issue
In controller you can do
$filter('date')(date, format, timezone)
to change the date format. And in html,
{{ date_expression | date : format : timezone}}
use this.
Like
$scope.formattedDate = $filter('date')($scope.currDate, "dd-MM-yyyy");
to print same on html
{{ currDate | date : "dd-MM-yyyy"}}
https://docs.angularjs.org/api/ng/filter/date
Following formats are supported by angular.
You can do this either in controller or in html page.
$scope.date = new Date();
The first one is :
$scope.date = $filter('date')($scope.date, 'dd-MM-yyyy');
Second one is :
{{date | date:'dd-MM-yyyy'}}
You can use the Angular date filter:
{{date | date: 'dd-MM-yyyy'}}
You can use the in-build js libraries functions i.e getDay(), getHours(), getMinutes(), getMilliseconds(). This functions will return you the corresponding date's individual components values.
e.g
var x = $scope.yourDateModelObj.getHours();
Likewise, you can get the date, month, years values.
return an integer value for hours.
Hope that helps
I am developing android application using Cordova and ionic framework ,in which i am using Html 5 date type to get the date its works fine.
Now i want to select the time along with the date (ie user can select the time )
is it possible with html5 date type ??
Here is my code
<input type="date" ng-model="meetingData.enddate" />
$scope.submitForm=function(meetingData){
console.log(meetingData.enddate);
}
<input type="date"> does not have a feature to let pick time by user. You can set the current time as default through this whereas the date is selected by user.
var hour = new Date().getHours();
var mins = new Date().getMinutes();
$scope.meetingData.enddate.setHours(hour);
$scope.meetingData.enddate.setMinutes(mins);
Demo
Alternatively, You should look into ui-timepicker and ui-datepicker.
I have a number which represents the time in miliseconds since 1970 eg.
1388664300000
with:
{{ day.date | date: "dd.MM.yyyy" }}
it will render 07.05.2015 ! So far so good. Now I like to insert the same data into my input field:
<input type="date" ng-model="day.DUTY">
to let the user adjust the date.
Nothing is displayed because the input field requires an date object !
I have created a filter to change my number to date:
var DateFilter = function() {
return function(data){
date = new Date(data);
return date;
}
}
But I can't figure it out how to combine this with my input field. Maybe this isn't the right approach ? Any ideas ?
Take a look at How to bind View Date to model milliseconds with Angularjs.
As it explained; You can use the following, to change the data format dynamically during the binding:
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);
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" >