I have added a datetimepicker using angular js(1+) datetimepicker scripts.And write a line of code like this.
<input type='text' class="form-control" ng-model="submitAdsFormData.start_date" datetime-picker/>
And it's working properly.Now i want that only current date and next date should be selected from this datetimepicker rather than the previous date.
How can i do it?Can anyone help me to get this.thanks in advance.
Related
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();
};
Hello I have an issue with angular js material date picker not showing date correctly cause it's always one day less than the selected date. Here is my date picker
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" ></md-datepicker>
Is there a way to fix this? Please check this codepen:
https://codepen.io/anon/pen/yoWdOY
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"
This help me for date picker,
Now in this date-picker i want today's date as selected by default.
can anyone help me how do set default date?
Thank you.
In andgular material i have used this for datepicker and my issue of set current date is solved as follow,
Using AngularJs Controller,
HTML:
<input type="date" list="days" ng-model="transaction.date">
Javascript:
$scope.transaction.date = new Date();
(1) google components
(2) datepicker demo
(3) material demo
I have found an issue with validation of a manually typed date value that falls outside of the minDate or maxDate values when using the datepicker-popup.
This can be demonstrated with the datepicker popup on the angular ui site by following the steps below: http://angular-ui.github.io/bootstrap/#/datepicker
Ensure the min date option is turned on (min date should equal today)
Type in yesterdays date to the datepicker-popup
This shows a red border around the inline datepicker (as it is flagged as ng-invalid-date) however the input box for the datepicker-popup is still valid.
On further investigation it seems that the ng-invalid-date attribute has been set against the popup part of datepicker and not against the input box. This causes issues because firstly, the user cannot see that the element is invalid and secondly the popup does not have a name property so I am unable to check validity from the ng-form (e.g. myForm.myDate.$invalid
Does anyone know any way around this?
You can do an additional validation on ng-change for the text field and setValidity of that field to false to achieve what you want. Here is a plunker that demonstrates the idea.
http://plnkr.co/edit/N9Hk9QFIfj3IXfHoWwbt?p=preview
I added a little css styling to get the red border to show when the field is invalid. The validity test is very basic; you'd want to enhance it to allow the current day.
If you have the input set up like this, <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" is-open="open" datepicker-options="datePickerDateOptions" close-text="Close" ng-change="change()" />
then in your controller you can check what $scope.date is in your $scope.change() function. If $scope.date is undefined then its not valid. If its null then its empty. Anything else is a valid date.