I try to set the default value of an input field at today. I can do that with an text field but when I try with an date field it fails.
HTML code :
<div ng-controller="MyCtrl">
<form name="new">
<input type="date" ng-model="date_rdv" />
<input type="text" ng-model="form_text" />
</form>
</div>
JS code :
var myApp = angular.module('myApp',[]);
function MyCtrl($scope, $filter) {
$scope.form_text = $filter('date')(Date.now(), 'yyyy-MM-dd');
$scope.date_Rdv = $filter('date')(Date.now(), 'yyyy-MM-dd');
}
Why it works with text field and not with date field ?
JSFiddle.
You are not referencing the correct property of $scope.
Either use:
$scope.date_rdv = $filter('date')(Date.now(), 'yyyy-MM-dd');
Or
<input type="date" ng-model="date_rdv" />.
I've updated your fiddle here:
http://jsfiddle.net/68j7y439/1/
Related
I am new to Angularjs.I have a datepicker in ionic.After selecting date input is getting value of the selected date.Now i am trying to acces this value in Controller by using $scope but i am unable to access.
Here is my html
<div class="list">
<label class="item item-input">
<input type="text" data-ng-model="dateValue" disabled>
</label>
</div>
<my-calendar display="dateValue" dateformat="'yyyy-MM-dd'"></my-calendar>
<button id="fieldWork-button21" data-ng- click="saveFieldWork(fieldWork)"></button>
I am calling save function after submit.I am binding other values with fieldWork object.
Here is the Controller.js
$scope.dateValue = "";
$scope.saveFieldWork = function(fieldWork) {
fieldWork.fieldDate = $scope.dateValue;
//other code
};
Here I am not able to get selected Date value. But in the input after selecting date it is displaying correct date.
At present it is displaying empty string instead of selected date. Can anyone tell how to get this value into Controller? If AngularJs supports two way data binding then why am I not able to get ng-model value from html to Controller?
You don't have access to fieldWork variable in html, So you can not use it in data-ng-click.
<button id="fieldWork-button21" data-ng-click="saveFieldWork()"></button>
Look this
(function() {
'use strict';
angular.module('player', [])
.controller('MainCtrl', ['$scope', function($scope) {
var fieldWork = {};
$scope.saveFieldWork = function() {
fieldWork["fieldDate"] = $scope.dateValue;
console.log(fieldWork);
//other code
};
}])
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<div ng-app='player'>
<div ng-controller='MainCtrl'>
<div class="list">
<label class="item item-input">
<input type="text" data-ng-model="dateValue">
</label>
</div>
<button id="fieldWork-button21" data-ng-click="saveFieldWork()">Save</button>
</div>
</div>
I am using AngularJs (Angular1) in a project and I have an ng-model which gets a value:
<input id="myinput" type="text" class="form-control" ng-model="ctrl.myDate" ng-required="true" />
This works fine as far as ctrl.myDate is not null be breaks the code when it's null
Is there a way where I can check if the value is null and add (for example) today's date if it's null, so it doesn't break?
How can I do this?
<input ng-if="ctrl.myDate" id="myinput" type="text" class="form-control" ng-
model="ctrl.myDate" ng-required="true" />
<!-- default date when myDate is null -->
<input ng-if="!ctrl.myDate" id="myinput" type="text" class="form-control" ng-
model="ctrl.defaultDate" ng-required="true" />
You can store a defaultDate in the $scope.ctrl.
1) Supposing that ctrl.myDate is null, then it is probably initialized somewhere in your controller. Based upon that, the right place to replace the model value is your controller and not the view.
So in this case your code might look something like this:
function setDate() {
const today = new Date();
vm.myDate = getDate() || today; // If date is null then assign today.
}
function getDate() { //This might be an http call that brings the date.
return null;
}
2) On the other hand if your model is just for presentation purpose you can do something like this using ng-value directive, but there is probably no reason to use input tag.
<input id="myinput" type="text" class="form-control" ng-value="ctrl.myDate || ctrl.today" ng-required="true" />
Here's a working sample based on your question.
Can you move the condition to where you controller is initialized rather than in the ng-model? e.g. ng-init?
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
var testController = this;
testController.init = function (dateInput) {
if (dateInput !== null) {
testController.myDate = dateInput !== null ? dateInput : getDate();
}
};
}]);
and
<div ng-controller="TestController as ctrl" ng-init="ctrl.init(yourDate)">
<input id="myinput" type="text" class="form-control" ng-model="ctrl.myDate" ng-required="true" />
</div>
I know how to pass a value from a view to a controller using ng-model. In the controller it just gets the value from the view using this code $scope.name = this.ngmodelnameinview.
Is it compulsory to use ng-model in field view?
but my problem now is, I have + button, which when I click the button it will automatically put the value inside input text field.
<button data-ng-click="adultCount = adultCount+1"> + </button>
<input type="text" name="totTicket" value="{{adultCount}}">
see picture below:
but when I add ng-model inside input field, it returns null
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultcount">
How to fix this? Thanks!
It is giving null just because you have set a value "adultCount" and in ng-model you had given a different name "adultcount" ('c' is in lower case). By updating ng-model with "adultCount", will solve this issue.
JavaScript is case sensitive:
JavaScript is case-sensitive and uses the Unicode character set.1
Use the same case for the scope variable. Update the input attribute ng-model to match the varible - i.e.:
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultcount">
should be:
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultCount">
<!-- ^ -->
See this demonstrated in the snippet below:
angular.module('app', [])
.controller('ctrl', function($scope) {
//adultCount could be initialized here
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button data-ng-click="adultCount = adultCount+1"> + </button>
totTicket:
<input type="text" name="totTicket" value="{{adultCount}}">
totTicket (adultCount):
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultCount">
</div>
——
1https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types
I had a html5 date-time picker.Now on mouseclick(select) of date from date picker I want to call a function.I wonder how can we do that in angular js ...can
someone help me.
html:
<div class="col-lg-4">
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-view="date" format="dd/MM/yyyy" ng-model="$root.Details.date" value = "{{dob}}">
</div>
Js
class CreateCustomerCtrl {
constructor($scope,$rootScope,$http,$state,$reactive,$timeout,Notification)
{
//logic here
}
export default angular.module('createCustomer', [
angularMeteor
])
.component('newCustomer', {
templateUrl: 'client/customer/new-customer.html',
controller:['$scope','$rootScope','$http','$state','$reactive','$timeout','Notification'
,customerCtrl]});
So on select of date I want to call a function.
Thanks
You could use ng-change="yourFunc()" event on input with ng-model="myDate" for binding value and inside function you can put your logic.
You should try <input type="date" onchange="return function(this) />;" and return your function to do whatever you want to.
I have this code in my html and my input is empty without any value, although the html tag "value" has some value.
<input id="DataCompra" value="07/10/2014" class="form-control ng-pristine ng-valid"
name="DataCompra" type="text"
close-text="Fechar"
data-val="true"
data-val-date="The field Data Compra must be a date."
data-val-required="O campo Data Compra é obrigatório."
date-type="string"
datepicker-popup="dd/MM/yyyy"
is-open="DataCompra.open"
ng-click="DataCompra.open = true"
ng-model="DataCompra.dt"
show-button-bar="false"
show-weeks="false">
in Controller ,
$scope.DataCompra.dt = new Date('2014-10-07');
remove value attribute from the Html part,
may be this will also work,
add new directive like this
<input id="DataCompra" value="07/10/2014" ng-init="DataCompra.dt = '2014-10-07' .....
remove value attribute from the Html part,')"
Following solution worked for me
<input type="text" data-provide="datepicker" class="form-control" data-ng-model="Date" name="Date" id="inputDate">
$('#inputDate').datepicker().on('changeDate', function (ev) {
alert("selected date is " + $(ev.target).val());
$scope.Date = ev.date;
});