I am using the below code to insert a date picker text box.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script>
function MainController($scope) {
$scope.date = new Date();
}
</script>
<body ng-app>
<div ng-controller="MainController">
<input type="date" ng-model="date" value="{{ date | date: 'yyyy/MM/dd' }}" />
</body>
Angular JS Calendar
I would like to if the below is possible to implement;
A. disable weekends selection
B. disable previous dates (starting yesterday)
C. disable 4 days including today (ex. if today is 12 then from 12 to 17 should be disabled - which includes weekends as well that are already disabled)
I have done this using JQuery Datepicker but not able to do it with AngularJS. Please help.
Attached screenshot of Jquery Datepicker.
Here you are relying on browsers' implementation of <input>, which is not very powerful. Using this, you can't grey out specific dates, only ranges using min and max attributes (which makes your B objective achievable).
There are several solutions from the AJS community, including:
ui-date, apparently a copy-paste of jQuery's picker you're used to (read the warnings though, they don't sell it as the best solution)
UI Bootstrap's datepicker seems more powerful and is referred to by ui-date's page - yet I don't see how you'd achieve A and C objectives using its options
the proven md-datepicker, which allows you to achieve B with md-min-date and md-max-date, and to achieve A, B and C with md-date-filter; demos are here (my personal favorite, in case it's not obvious enough ^^)
Related
I have an angular 1.5 application where i make use of a moment datepicker library from here : angular moment date picker
Everything has worked well until recently when we realized that the date pickers rendered dates wrongly across different user pc's .It appears this may have something to do with how JavaScript handles time zones:
In the image below October 1, 2017 is actually a Sunday but the date picker renders it as a Monday albeit I get the correct values rendered on my own pc running a more current version of google chrome perhaps this is also a browser issue ?
IE does show dates as I would expect.
see the html snippet for the input below:
<input class="form-control input-sm"
ng-model="vm.form.StartDateTime"
format="DD-MMM-YYYY, HH:mm:ss"
ng-model-options="{ updateOn: 'blur' }"
start-view="month"
moment-picker="vm.form.StartDateTime" />
JS: moment(self.form.StartDateTime)
The primary question is how can I ensure date-times are represented correctly across different time zones on the date picker ?
Are there any md-year pickers available? if yes, please share me some links. If no, then is it possible to turn a md-datepicker into a year picker?
I have tried with a normal one with giving modes, types of models etc but no useful output.
In the docs on <md-datepicker>, there is an option for a year picker by using the md-current-view attribute, setting it to either year or month:
<md-datepicker
md-current-view="year"
ng-model="myCustomYearDate"
md-placeholder="Enter Date">
</md-datepicker>
Trying to bind date to input, but it is not binding:
<body ng-app>
<div ng-controller="MainCtrl">
<input type="date" ng-model="dateString"/>
<br/>{{ dateString }}
<br/><input type="date" ng-model="date1"/>
<br/>{{ date1 }}
</div>
</body>
function MainCtrl($scope, dateFilter) {
$scope.dateString = "2015-08-11T00:00:00";
$scope.date1 = new Date("2015-08-11");
}
http://jsfiddle.net/47fLdefo/
What am i doing wrong?
Your jsfiddle contains error. You forgot to define module. see here. It is working. Another thing you can not bind a string to a date. string has to be converted into date before binding by new Date(yourDateString).
$scope.dateString = "2015-08-11T00:00:00";
Above should be changed by following
$scope.dateString = new Date("2015-08-11T00:00:00");
Edit: I did not notice that your angular version is 1.0.2. input type date is not there. Try to upgrade your angular.
See date is not binding in 1.0.2
I feel a few things need clarifying as the other answers have glossed over it. The issue is not directly module definition (whilst that is an issue in itself).
The issue is support for using inputs with a type of date was not added until v1.3 according to this source however your using v1.0.2.
If you want to use inputs with the native date picker you will need to upgrade your version of Angular.
Also using a type of date the model value must be a date object not a string representation according the the docs: https://docs.angularjs.org/api/ng/input/input%5Bdate%5D
There are other options if you can't upgrade such as BootStraps date picker however.
If you read following Angularjs validations, you understand that:
Message will appear if user interacted and did not fill the date manually.
The problem is when date is filled using the datepicker the input is not recognized by Angularjs and still consider $invalid true, so the message remains there which is confusing/problem although date is already filled using datepicker!
<div class="form-group" ng-class="{ 'has-error' : AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine }">
<input type="text" required data-provide="datepicker" class="form-control" name="Birthdate" ng-model="Birthdate" />
<span ng-show="AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine" class="help-block" >
Birthdate is required.
</span>
</div>
You can either validate it prior to form submit, or else hook a listener on your datepicker to manually set the model property Birthdate value.
It seems bootstrap datepicker is built on top of JQuery datepicker, manually setting the value would be a bad practice you can refer to:
Update Angular model after setting input value with jQuery
a better approach would be to use some built-in angular component such as the ones from:
https://angular-ui.github.io/bootstrap/
http://dalelotts.github.io/angular-bootstrap-datetimepicker/
https://github.com/dalelotts/angular-bootstrap-datetimepicker
I discovered a new way for this problem-
First of all create an id for that input box and then create a function say $scope.assign(), which simply assign the id value to the model of that input.
Something Like this-
$scope.assign = function() {
$scope.modelValue = $('#idName').val();
}
Now use ng-bind="assign()" to your input box.
It worked for me :)
Was facing the issue, and its because of the picker you are using is built on top of Jquery which remains undetectable by the scope on update.
For my new project I have added another library and its pretty awesome.
See the documentation http://dalelotts.github.io/angular-bootstrap-datetimepicker
Providing the piece of code for which I have added a wrapper directive
My Previous Answer was based on work around and because at that time of answer I was pretty new to the angular and now instead of that I will recommend, not to use an library which is built on top of Jquery in Angular project. Instead prefer angular libraries.
Coming on the topic-
For date time picker I found one very good library
https://github.com/indrimuska/angular-moment-picker
You can find more libraries in built in angular, but I found it pretty useful for other validations too like min-date, max-date validation.
Using this library will solve the issue of validation for sure and its pure Angular way.
I'm currently working on an AngularJS project. In this project, I need to use the Kendo UI components. I found the Kendo / AngularJS Directives here. Unfortunately, I have been unable to get a date picker to work. Currently, I have the following code in a partial that I added to the sample app on the GitHub page:
<div>
<b>Birth Date</b>
<div id="theDate" ng-model="birthDate" kendo-date-picker k-format="MM/dd/yyyy"></div>
<br />
Current Choice: <div>{{birthDate}}</div>
</div>
When the user visits '/birth-date' (I setup a route in app.js), the view appears as desired. This view shows the date picker. However, when I choose a date, that date does not appear in the text field. For the sake of testing, I display the selected date below the date picker. I can see that value getting updated as I choose dates.
What am I doing wrong?
Thank you!
The following seems to work fine for me:
<div ng-controller="MyController">
{{birthday}}
<input kendo-date-picker ng-model="birthday" k-format="MM/dd/yyyy" />
</div>
Here is a live demo: http://jsbin.com/UhAQabi/2