how to save only date(excluding time) from input in angular js? - angularjs

Here's my html code:
<label>D.O.B: </label>
<input type="date" ng-model="dob">
In the Browser, datepicker pops up, when I pick a particular date and try to display, both date and time are displayed,something like this "2016-04-02T18:30:00.000Z".
My question is what should I do, so that only Date gets saved(i.e. excluding time)?

In Javscript there is no Date-only type. So instances new Date() always contain time. You should ignore them in code where you treat it.
When date is displayed in angular app you can use a filter, ex.:
<div>value = {{dob | date: "yyyy-MM-dd"}}</div>
As an option you can zero time part by dob = dob.getDate() before sending it somewhere...

Related

Unable to set initial custom date with Angular Moment Picker without validation tag

I am using the Angular Moment Picker library and trying to set a custom date in the input field whilst also trying to prevent the user from selecting a date in the past.
My element looks like so:
<input class="form-control"
moment-picker="endTimePicker"
name="campaignEndDate"
locale="en"
format="MMMM Do YYYY, h:mm A"
today="true"
start-view="month"
min-date="minDate"
ng-model="endTime"
ng-model-options="{ updateOn: 'blur' }"
ng-required="!campaign.NeverEnds"
style="width: 60%;"/>
And my controller:
$scope.minDate = moment();
$scope.endTime = moment( $scope.campaign.EndTime );
When I open the form, the Angular Moment Picker shows today's date/time in the input field, even though $scope.endTime is showing a date in the past.
The only way I can seem to get the correct date showing in the input field is to set validate="false" on the element, but then the control doesn't pass validation because the date is a date in the past.
What I am trying to achieve is to show an initial date (2020-07-29 02:14:00) when the user opens the form, but if they try and change the endTime, then cannot select a new date in the past.
Is this achievable somehow?
Okay, after playing around with this some more, and going back over the documentation, I found the best approach to achieve what I wanted was to implement a selectable method:
angular-moment-picker#methods
I removed the min-date="minDate" which allowed the Moment Picker to then show the correct date in the input field and then added a selectable="isSelectable( date )" to the element to filter out and disable any previous days:
$scope.isSelectable = function( date ) {
// Disable all previous days
return date >= moment();
};

AngularJS $formatter and $parser for input field

Is there a possibility to also use $parser and $formatter for an input field and not only for a directive?
This is my input field (AngularJs DateTimePicker)
<input type="text"
class="form-control date"
name="date"
data-ng-model="vmModal.account.creationDate"
datepicker-popup="dd.MM.yyyy"
is-open="vmModal.openedDatePicker"
close-text="schließen"
current-text="heute"
clear-text="löschen"
datepicker-options="{startingDay: 1}"
placeholder="Datum">
[EDIT]
Actually I don't know what to do, I need the string representation of the date because I show it elsewhere in the application. The only possibility I know would be to have another field in my javascript object which represents a date object.
I may have miss-understood your problem, but from your EDIT, it seems that you need to display or use the date selected through the input in some other place. This is standard stuff to have one model and several views. In your case, you can just display vmModal.account.creationDate with a different format as the one used in the datepicker, using the angular date filter.
E.g. when you select the following date in the datepicker: 25.12.2016
<em>{{vmModal.account.creationDate | date:'EEEE, dd MMMM yyyyy' }}</em>
shall display
Sonntag, 25 Dezember 2016
See the plunker in action.
Note that you can specify alternate date formats for manual entry. In the plunker I added alt-input-formats="['dd/MM/yy']". The user can now enter 25.12.2016 or 25/12/16, both formatted dates will be parsed as date objects.

Show the slots as Today and Tomorrow for E-commerce based on client current time

I am getting an array as from factories, service in controller.
$scope.getallslots=SlotService.getslots();
In this array i am having data as.
Now I want to compare the current time and existing time from the array. And based on the time i want to show my data.
I have converted the current time to ISO string format as per database but, i want to check only time but not date. Any help, will helpful.
Guys I got the answer.
Convert the date in time format at admin side and store only time in the
MongoDB using the timepicker or date.
Now take two different ng-model and check the condition as per need
Later get that date at client side and check with the current time format.
after checkin push those value one by one in the ng-model which is array.
Now it's done. Here is example, Its at server side,
$scope.Delivary.from=$filter("date")($scope.Delivary.from,'shortTime')
$scope.Delivary.to=$filter("date")($scope.Delivary.to,'shortTime')
The above code should be written before pushing/saving the slots at admin panel
Here is example, Its at client side
$scope.slotupdatedlist=[]-->1st ng-model
$scope.slotupdatedlist1=[]-->2nd ng-model
$scope.gettime=CartListService.getslots().$promise.then(function(data){
angular.forEach(data,function(list){
console.log(list)
var currtime=new Date();
$scope.HHmmss = $filter('date')(new Date(), 'HH:mm');
if(((list.from<$scope.HHmmss) && (list.to>$scope.HHmmss))||((list.to<$scope.HHmmss))){//checking condition
$scope.slotupdatedlist1.push(list);
}
else{
$scope.slotupdatedlist.push(list);
console.log($scope.HHmmss)
}
})
})
Now assign those ng-model in your HTML page and you can get the Slots
<h4>Available Slots</h4>
<span>Today</span><br>
<label class="checkbox-entry radio" ng-repeat="slot in slotupdatedlist">
<input type="radio" name="custom-name"><span class="check"></span>
{{slot.from}} -- {{slot.to}}<br>
</label>
<span>Tomorrow</span><br>
<label class="checkbox-entry radio" ng-repeat="slot in slotupdatedlist1">
<input type="radio" name="custom-name"><span class="check"></span>
{{slot.from}} -- {{slot.to}}<br>
</label>

date formatting is painful across the browsers

In my project I am using angularJS and momentJS for fixing the painful date formating part. I have two scenarios, here we go:
Retrieving the date from db and rendering it in UI:
I am getting the response from service in this formate "2016-01-31T20:30:00.000Z". I am using the above and rendering the date and time separately in the following way in UI
<input ng-model="data.startDate" type="date" name="startDate" disabled>
<input ng-model="data.startDate" type="time" name="startTime" disabled>
Its displaying like the image attached below
Its being displayed as YYYY-MM-DD in firefox and in the chrome as DD-MM-YYYY. I want to use the same object for displaying the date and time maintaining the date formate across all the browsers. How it can be achieved ?
I am using this datepicker. When the user selects the date I want show the date in the same format. In this scenario date and time inputs are taken separately and combined in the background.
So can someone help me in fixing the issue.
Convert all date format into string like .ToString("YYYY-MM-DD")
Format datepicker as dateFormat: "yyyy-mm-dd"

how to read or convert a value of input type of time in angular controller

I have a input filed with type = "time". I want to read hours and minutes on controller side or I want to convert it to Date.
Here is the input field
<input type="text" name="eventStartTime" ng-bind-type="date"
ng-model="vm.event.eventStartTime"
ng-required="true"
onfocus="this.type='time'; this.setAttribute('onfocus','');this.blur();this.focus();"
placeholder="Event Start Time">
On controller if i try to convert it to Date format i am receiving value as invalid date.
Here is the code I am trying
console.log(new Date(vm.event.eventStartTime));
If there is a way to convert it directly to date it's awesome. Otherwise i am looking for the way to get hours and minutes separately and i will create new date with it.

Resources