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
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();
};
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.
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
I am using angular bootstrap datepicker. Everythings works fine but when I select any date like 20-march-2015 it showing me 19-march-2015(one day less from selected day).
Here is my code in Plunker
This is a daylight saving issue.
Do you get the same issue with dates in February.
Looking at your example you can see the date is
OutPut: "2015-04-26T23:00:00.000Z"
For today :)
if I select 1st Jan, I get
OutPut: "2015-01-01T00:00:00.000Z"
Change your SPAN to
<span>OutPut: {{formData.dueDate | date : 'dd/MM/yyyy'}}</span>
And your good ( note the | date : 'dd/MM/yyyy' )
Actually you don't need datepicker. Delete datepicker and use type="date".
<input ng-model="formData.dueDate" type="date" id="dueDate" name="dueDate"
class="form-control" ng-click="data.isOpen = true">
Example
I forked the Plunker code from the AngularUI Bootstrap pages (the Datepicker example). I wanted to implement a max date range so you can only select a date in a certain period. You can find the Plunker here: http://plnkr.co/edit/vBrgyC20FBEUzuoprhlh?p=preview
Somehow, the maxDate attribute does not seem to be working while the minDate one does. Does anyone know if I'm doing something wrong here or if it's just a bug?
Your HTML in the plunker
<datepicker min="minDate" show-weeks="showWeeks"></datepicker>
What it should have been
<datepicker min="minDate" max="maxDate" show-weeks="showWeeks"></datepicker>
Seems you just forgot to add the max-attribute?
You have two date pickers in there. :)
<datepicker min="minDate" max="maxDate" show-weeks="showWeeks"></datepicker>
Worked for me as well, i was struggling with the attribute max-date", Thanks ivarni for your answer