I am using PrimeNG Calendar control I am able to select and store date but when I fetch dates from say database and trying to set it by updating Modal. I am getting the following error :
<p-calendar [(ngModel)]="bin.bidinstalledfrom" dateFormat="dd/mm/yy"
[showTime]="true" autocomplete="off" required name="BIDInstalledFrom"
id="installedfrom" class="col-md-12" ></p-calendar>
Component:
this.bin.BIDInstalledFrom='17/05/2018'
;// I have hardcoded the date in component for the ease of development
I have tried dates in various formats. '17/05/2018 16:00', '17/05/2018','1526572848' etc
I have also tried changing the datatype of modal property bidinstalledfrom to string,date,number. Same issue. And since I am getting error, not only am I not able to set the date but also calendar doesn't work.
What am I missing here?
Primeng Calendar accepts Date object. So you have to convert your date string to JS date object. Eg:
new Date('17/05/2018');
And then assign it to your model.
For PrimeNG Calendar you need to use the JavaScript Date object and do the instantiation correctly. For instance with new Date('mm/dd/yyyy') (see https://www.w3schools.com/js/js_dates.asp and https://www.w3schools.com/js/js_date_formats.asp).
Template:
<p-calendar [(ngModel)]="bin.bidinstalledfrom"
[showTime]="true"
dateFormat="dd/mm/yy">
</p-calendar>
Component:
this.bin.bidinstalledfrom = new Date('05/17/2018');
You can find a working demo here: https://stackblitz.com/edit/prime-ng-calendar-38du98
Related
date Field image
unable to set date info past specified date field using sendKeys function
Have tried using java script but could not set the value.
update
HTML
driver.findelementBy("//label[text()='Past Specified']/../div[#class='radioHide']//input[1]").sendkeys("01082016");
and
(JavascriptExecutor)driver.executeScript(arguments[0].setAttribute('value', '"+sText+"');",element))
please help
You date format is incorrect. Try the following,
driver.findelementBy("//label[text()='Past Specified']/../div[#class='radioHide']//input[1]").sendkeys("01/08/2016");
or using javascript
String sText="01/08/2016";
(JavascriptExecutor)driver.executeScript(arguments[0].setAttribute('value', '"+sText+"');",element))
I build android app and in my app have some search function with input type date. I try used parse input date from 2017-5-10T17:00:00.000Z to 2017-5-10 with moment.angular. in search function work but it make my app error and wan't move to anothe page just stact in search page. I don't know where is error
this my html
<label class="item item-input">
<span class="input-label">Start</span>
<input type="date" ng-model="trip.start">
</label>
and this my controller
$scope.trip.start = moment($scope.trip.start).format("YYYY-MM-DD");
and i add some srcin my index
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
please help me solve this problem
thanks
moment($scope.trip.start).format("YYYY-MM-DD") is not in Angular date object format.
As a work around you can use moment($scope.trip.start)._d.
So your code would be
$scope.trip.start = moment($scope.trip.start)._d;
the issue is mostly with date format. The date given is 2017-5-10T17:00:00.000Z which is of format YYYY-M-DD and not a standard ISO format, hence moment is mostly not able to parse it. As per ISO the date should be 2017-05-10T17:00:00.000Z
Note: .format has nothing to do with input format, its for output.
Note: Cant comments hence adding this to answer: the order of JS is correct. moment is independent of angular hence it does not need to appear after angular.
EDIT
You can try below to get the date
moment(Date.parse($scope.trip.start)).format("YYYY-MM-DD");
Sorry about the bad title, I didn't exactly know how to phrase that any better. I'm going to try to explain what I need as best as possible.
I'm currently making a Task Manager (a ToDo list) in Javascript where you can create tasks, set a schedule for them and then you would have a list with all the tasks that you need to do and the respective schedule of each task (beginning and ending date).
I'm using Angular.js and Angular Material to do my UI. I have the Angular Material's datepicker. This is the code I use to get the date value:
angular.module('KBTM_App', ['ngMaterial']).controller('AppCtrl', function($scope) {
$scope.myDate1 = new Date();
...
// This is where I get the date value
var initial_date_1 = angular.element(document.querySelector('[ng-controller="AppCtrl"]')).scope().myDate1;
The problem is that this datepicker is returning the date in this format:"2016-04-29T08:36:10.027Z", which I don't want. I want a more normal format, like "DD-MM-YYYY".
I tried converting the date format with Moment.js, but that didn't work. Here's the code I used for that:
var initial_date = moment(initial_date_1, "YYYY-MM-DD'T'HH:MM:SS.SSS'Z'").format("DD-MM-YYYY");
And then I would store that date in the localStorage:
// Get the other dates already in the list
var initial_dates = get_initial_dates();
// Adds the new date to that list
initial_dates.push(initial_date);
// Stores those dates in the localStorage
localStorage.setItem('initial_date_db', JSON.stringify(initial_dates));
With that code I get "Invalid date" when trying to add a new task to the task list.
Sorry for the long post!
Thanks to whoever can help me.
You can convert the date format in html using angular material datepicker by using following code.
data-ng-value="myDate1 | date : 'shortDate'"
Use the angular date filter to format the date. Refer the link angular date
var initial_date = $filter('date')($scope.myDate1, "dd-MM-yyyy");
Inject the $filter in your controller main module.
Best way to handle dates is to use momentjs and there is a special AJS Directive available. angular-moment
You can check [momentjs][2] offical docs for detailed info. You have to add angular-moment as dependency injection to use moment easily. https://github.com/urish/angular-moment#instructions-for-using-moment-timezone-with-webpack
So I receive my app data via an API returning JSON data. With that, my time stamps are always returned with an undesirable look. Always like this:
2013-11-25T12:44:02
So I am using angular to build my app and couldn't see a way to format this with simply returning something like:
<div>
<p ng-repeat="date in ppt.Alerts | filter:{type: DenialStatement}"><span>{{date.date}}<span> <span>{{date.descr}}<span></p>
</div>
In this case, date is that time property. So I was figuring within my html, if I could benefit from using moment.js to format this or a better way to do this across the board.
Can anyone here assist with this?
Thanks much.
Your text is string representation of date object, you can assign
date.date = new Date(input)
during data retrieval this will work fine. And you can print directly angular built in date filter
<span>{{date.date|date :'dd/MM/yyyy'}}<span>
or any format you prefer.
Angular has built in date filter
{{date.date | date : format : timezone}}
See date filter docs for format and timezone usage
I have page that uses the Kendo DateTimePicker with the input bound to a Knockout Observable. I am using knockout-kendo.js for the bridging.
As you can see in this JSFiddle, I set up the observable with today's date time at initialization. I later set the value (as if it was loaded from an ajax retrieval, I just didn't want to deal with the echo api on JSFiddle)
var SchedulerAppointmentModel = function () {
var self = this,
saved = [],
initComplete = false;
self.StartDateTime = ko.observable(moment().format("MM/DD/YYYY hh:mm A"));
self.StartDateTime(moment("10/23/2014 1:30 PM").format("MM/DD/YYYY h:mm A"));
};
The problem is, if I change the time in my drop down box, the date resets to today. I wanted to leave the date alone.
I think it has something to do with setting the kendoDateTimePicker in code and not in html. I think if i could somehow set the max later, it would work.
Not sure if you still need an answer, but...
I see you've pulled in the knockout-kendo library. With that there is no need to manually initialize the dateTimePicker. You can simply use the binding that comes with that library:
<input id="appt-start-datetime" value="0" data-bind="kendoDateTimePicker: StartDateTime" />
Fiddle Updated