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.
Related
I would like to have 2 textboxes assigned to the same ng-model initialized to Date.now() and allow them to be edited by the user.
My template looks like:
<div ng-controller="MainCtrl">
<input type="text" ng-model="date | date:'yyyy-MM-dd'" />
<input type="text" ng-model="date | date:'HH:mm'" />
<button ng-click="submit()">Submit</button>
<div ng-if="show">
{{ date }}
</div>
</div>
And my controller looks like:
angular.module('app', []).controller('MainCtrl', function($scope) {
$scope.show = false;
$scope.date = new Date(Date.now());
$scope.submit = function () {
$scope.show = true;
}
});
Plunker: http://plnkr.co/edit/d2slQW6pDTLM4KTo
In my example, the textboxes are not editable, and I get a console error stating the expression is non-assignable.
How can I modify this example to allow the date parts to be modifiable?
If you're willing to use date and time inputs instead of text, this is very easy to do.
<input type="date" ng-model="date" />
<input type="time" ng-model="date" />
Because they're bound to the same Date instance, leap days daylight savings (where a day might be 23 or 25 hours) are supported.
If you don't like the native date and time inputs and want some more control over the style/functionality and consistent UI across devices, you can try Kendo UI's DatePicker and TimePicker widgets. They both have AngularJS support and are included in the free offering called Kendo UI Core.
And if you want to avoid having milliseconds in your time picker, make sure they're stripped from whatever Date instance is bound to your scope property.
$scope.date = new Date(Date.now());
$scope.date.setMilliseconds(0)
As an aside, I don't believe filters work in ng-model expressions, which is probably the source of your error message.
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.
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 am trying to access the model of a form element that is using validation (e.g. ng-minlength).
It seems that the model is undefined until the validation passes.
Is this the intended behaviour? How can I access a non-valid model?
Example: http://jsfiddle.net/ybdssvt5/
<div ng-app="myapp">
<form name="myForm">
<input type="text" ng-minlength="5" ng-model="formData.email" required/>
<div>EMAIL length: {{ formData.email.length }}</div>
</form>
</div>
EMAIL length cannot be displayed until validation passes.
you can plug in a controller and assign a default value,
var app = angular.module('myapp', [])
.controller('appCtrl', function($scope){
$scope.form = {};
$scope.form.email = '';
});
This is a dirty way, but you can improvise from here easily.
Also you need to add ng-controller="appCtrl" to your ng-app div or form.
I have an edit page for an event and one of my fields is a date. In some browsers it seems to act like a plain text box (IE8), however in chrome it displays "dd/mm/yyyy" and if you click on it it has some additional options for setting the date.
My issue though is on the edit page it's not populating the existing date (I imagine because it's not in the correct format?). The MVC controller returns the data in this format "2014-03-08T00:00:00" (just using basic CRUD controller actions).
<form name="form" class="form-horizontal">
<div class="control-group" ng-class="{error: form.EventDate.$invalid}">
<label class="control-label" for="EventDate">Event Date</label>
<div class="controls">
<input type="date" ng-model="item.EventDate" id="EventDate">
</div>
</div>
<div class="form-actions">
<button ng-click="save()" class="btn btn-primary">
{{action}}
</button>
Cancel
</div>
</form>
I've seen quite a few posts on using directives and watches, but that seems complicated. I would have thought there would have been a relatively simple way of formatting the model data so that it displays in the right format and works as expected. I don't mind if Chrome gives a different experience than other browsers - it's just a simple internal user website. I just don't like that it's not prepopulating the date when I edit a record.
If you want to populate the field with an initial value, then the following will work
//Controller:
$scope.myDate = new Date('2014-03-08T00:00:00');
//HTML:
<input type="date" ng-init="model=(myDate | date:'yyyy-MM-dd')" ng-model="model" />
However, I strongly recommend creating a custom date field directive.
A custom input field directive offers the following benefits:
Two-way binding between the model and the view.
For example, when you enter a valid date in the input field, it will automatically assign a javascript date to the model; and when you assign a valid javascript date as the model, it will automatically format it in the text field.
Form validation support. When you enter an invalid date, you can set an $error flag, which can be used in your view bindings (i.e. displaying an error message). Setting an error flag will also set form.$valid to false so that you can conditionally submit the form to the server.
There are three basic things to consider when implementing a custom date directive:
A parser that will parse the input text and return the model
(in this case, a javascript date).
A formatter that will format the model and display it in the text field.
Setting of an optional validation flag which can be used in the UI
for custom form validation.
Date Directive:
myApp.directive('dateField', function($filter) {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelController) {
ngModelController.$parsers.push(function(data) {
//View -> Model
var date = Date.parseExact(data,'yyyy-MM-dd');
// if the date field is not a valid date
// then set a 'date' error flag by calling $setValidity
ngModelController.$setValidity('date', date!=null);
return date == null ? undefined : date;
});
ngModelController.$formatters.push(function(data) {
//Model -> View
return $filter('date')(data, "yyyy-MM-dd");
});
}
}
});
Note: For parsing dates, this directive uses Date.js (an external library).
CSS:
.error {
color:red;
}
.error-border {
border: solid 2px red;
}
HTML:
<form name="myForm">
<input ng-class="{'error-border': myForm.myDate.$error.date}" type="date"
name="myDate" ng-model="myDate" date-field />
<span ng-show="myForm.myDate.$error.date" class="error">
Please enter a valid date!!!
</span>
<br /> Raw Date: {{myDate}}
<br /> Formatted Nicely: {{ myDate | date:'yyyy, MMMM dd'}}
<br /> Is Valid Date? {{ !myForm.myDate.$error.date}}
<br /> Is Form Valid? {{ myForm.$valid }}
</form>
Controller:
myApp.controller('ctrl', function($scope) {
$scope.myDate = new Date('2014-03-08T00:00:00');
});
Demo JS Fiddle with Date.js
Demo JS Fiddle with Moment.js