I'm quite new in coding and I have 2 date picker that want to set min date of second same as first one and if the second one choose become max date of first one in angular material
could any body have some ideas
JS:
angular.module('clientApp')
.controller('dateController', function dateController($scope) {
$scope.myDate = new Date();
$scope.minDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth(),
$scope.myDate.getDate()
);
$scope.myDate = null;
});
HTML:
<md-input-container class="col-md-12" flex>
<label>Check in</label>
<md-datepicker
name="dateField"
ng-model="ctrl.myDate"
md-min-date="minDate"
md-hide-icons="all"
ng-required="true"
md-current-view="month"
md-open-on-focus
ng-messages>
</md-datepicker>
<div ng-messages="myForm.dateField.$error">
<div ng-message="required">This date is required!</div>
</div>
</md-input-container>
appreciate for any idea and help
This post may provide the answer for this.
It basically has a ng-change handler (that you can set on each of the 2 datepickers) that will reset the model property bound to the md-min-date or md-max-date which will immediately be reflected in the datepickers.
Related
While using the angular material datepicker in my application and i am able to select dates only in the first row. The datepicker works as expected in chrome but not in firefox.
The problem happens only when md-max-date is specified.I want the maxdate to be the current date.
This is what I am doing
HTML:
<md-card>
<md-card-content>
<h4>Date-picker with max date</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date" md-max-date="maxDate"></md-datepicker>
<md-card-content>
</md-card>
JS
angular.module('MyApp').controller('AppCtrl', function($scope){
$scope.myDate = new Date();
$scope.maxDate = new Date();
});
i have created a pen to demo it
http://codepen.io/alwinpa/pen/EVzaMZ/
What am I doing wrong here?
I'm trying to use the date picker from angular material library. I'm able to make it work. But the problem is when I use the date picker inside a ng-repeat loop it doesn't seem to work. Even if I have only one list in my ng-repeat, it still doesn't work.
Not sure how to make this work.
div ng-controller="AppCtrl" style='padding: 40px;'>
<md-content ng-repeat="date in dates">
<h3>{{date}}</h3>
<form ng-submit="tellDate()">
<md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate"
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<md-button type="submit">Tell Date</md-button>
</form>
</md-content>
Here is the plnkr.
Try clicking on the Tell Date button and it gives you only the current date and not the date that you select. But it would just work fine without ng-repeat.
Any help is appreciated.
Thanks
I believe this is because the md-datepicker creates it's own scope - If you use the controller as syntax this will work for you:
HTML:
<div ng-controller="AppCtrl as ac" style='padding: 40px;'>
<md-content ng-repeat="date in dates">
<h3>{{date}}</h3>
<form ng-submit="tellDate()">
<md-datepicker ng-model="ac.myDate" md-placeholder="Enter date" md-min-date="minDate"
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<md-button type="submit">Tell Date</md-button>
</form>
</md-content>
Controller:
var vm = this;
$scope.tellDate = function() {
alert(vm.myDate);
}
I have updated the plnkr. In this scenario all of the date-pickers are bound to the same myDate variable though - not sure if this is the desired behaviour.
keithm is right. ng-repeat creates its own isolated scope. My suggestion would be to provide the particular date of each repeat to the "tellDate" function. So:
<div ng-controller="AppCtrl" style='padding: 40px;'>
<md-content ng-repeat="date in dates">
<h3>{{date}}</h3>
<form ng-submit="tellDate(myDate)">
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ...></md-datepicker>
<md-button type="submit">Tell Date</md-button>
</form>
</md-content>
And inside your controller:
$scope.tellDate = function(date) {
alert(date);
}
Formatting date in input element with ng-model seems to be a problem. I have date in string format. It is working fine with value attribute but does not work with ng-model. Am I missing something. fiddle
function MyCtrl($scope) {
$scope.date = "09-29-2015";
}
<div ng-app ng-controller="MyCtrl">
<input type="text" ng-model="date | date:'yyyy'">
</div>
Take a look at the angular-datetime directive
<input type="text" datetime="yyyy" ng-model="date">
https://github.com/eight04/angular-datetime
It also looks like your date is a string, try making it a date.
function MyCtrl($scope) {
$scope.date = new Date();
}
Try this
<input type="date" id="exampleInput" name="input" ng-model="example.value"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
or try this
<div ng-app ng-controller="Ctrl">
{{date | date:'yyyy'}}<br/>
</div>
function Ctrl($scope)
{
$scope.date = new Date();
}
See this Angular jS date
Update fiddle Link
It was working for me
I have a scope binding to a HTML5 date input. The scope binds fine when I select a date using the calendar pop-out, or when I manually type in a date. But the binding is gone whenever I change the month using the arrow keys. How do I fix this?
http://jsfiddle.net/hientc/5zzwL30z/1/
<div ng-app="myApp">
<div ng-controller="myController">
<input type="date" ng-model="date" />
{{ date }}
</div>
</div>
app.controller('myController', function ($scope, $filter) {
$scope.date = $filter('date')(new Date(), 'yyyy-MM-dd');
});
Since a lot of people are confused, here's a image showing the steps.
This is probably an easy question, but I'm having a problem with this datepicker. The problem is I set the format to dd/mm/yyyy with data-date-format attribute. However, when checking my ng-model the value is the following: Wed Jul 17 2013 00:00:00 GMT+0000 (Greenwich Standard Time)
What I want is it to bind to dd/mm/yyyy format.
How can I fix this?
Here is my code:
<label for="inputDateFrom">Frá</label>
<div class="control-group input-append">
<input type="text" ng-model="booking.Booking.DateFrom" data-date-format="dd/mm/yyyy" bs-datepicker>
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
</div>
Update 18.07.13:
According to rGil's answer I tried to use $scope.$watch. It works fine but first it gets the CORRECT date (from getBooking() service function), then it changes to the CURRENT date - which is not the date.
JavaScript code is following:
$scope.$watch('booking.Booking.DateFrom', function(v){ // using the example model from the datepicker docs
$scope.booking.Booking.DateFrom = moment(v).format();
alert(moment(v).format());
});
$scope.$watch('booking.Booking.DateTo', function(v){ // using the example model from the datepicker docs
$scope.booking.Booking.DateTo = moment(v).format();
alert(moment(v).format());
});
// Sækjum staka bókun
if(bookingID != null) {
BookingService.getBooking(bookingID).then(function(data) {
$scope.booking = data.data;
$scope.booking.Booking.DateFrom = moment($scope.booking.Booking.DateFrom);
$scope.booking.Booking.DateTo = moment($scope.booking.Booking.DateTo);
});
}
Then my HTML is the following:
<label for="inputDateFrom">Frá</label>
<div class="control-group input-append">
<input type="text" ng-model="booking.Booking.DateFrom" data-date-format="dd-mm-yyyy" bs-datepicker>
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
</div>
<label for="inputDateTo">Til</label>
<div class="control-group input-append">
<input type="text" ng-model="booking.Booking.DateTo" data-date-format="dd-mm-yyyy" bs-datepicker>
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
</div>
Looking over the AngularStrap source code, I found that if you set the (seemingly undocumented) attribute date-type to any value outside of "Date" (for example: String) this prevents bs-datpicker from returning the selected date as a date object and solves the issue. So in this case it would be:
<input type="text" ng-model="booking.Booking.DateFrom" data-date-format="dd/mm/yyyy" date-type="string" bs-datepicker>
Tested on AngularStrap v0.7.4 and v0.7.5
This can easily be done without a plugin. Using this post you can create a $scope variable with the correct formatting.
Example:
$scope.$watch('datepicker.date', function(v){ // using the example model from the datepicker docs
var d = new Date(v);
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
$scope.modDate = curr_date + "/" + curr_month + "/" + curr_year;
console.log($scope.modDate)
})
FORKED DEMO - open console
There are ways to do it in a more elegant way, with AngularJS. Just use the date filter Angular. Like this:
$filter('date')(date, "yy/MM/yyyy", date.getTimezoneOffset())
$filter('date') gets the angularjs filter that take in args, the date, the template and the timezone, and returns a well formatted string.
08/03/2016