I need to show only the placeholder text on md-datepicker before selecting a date. But when I send a null value to md-datepickeer it default show the current date.
This is my angularjs controller code line to pass null date
appCtrl.myDate = null;
This is my html code.
<md-datepicker-custom name="dateField"
ng-model="appCtrl.myDate"
md-placeholder="Enter time" >
</md-datepicker-custom>
It show current date. I need to get clear field and it should show placeholder text.
You need to remove formatDate function from config, then placeholder is working.
Here is the snippet:
var app = angular.module('plunker', ['ngMaterial']);
app.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = formatDate;
function formatDate(date) {
return date ? moment(date).format('L') : '';
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.8/angular-material.min.css">
</head>
<body>
<md-datepicker name="terminationDate" md-placeholder="Enter date" ng-model="vm.terminationDate">
</md-datepicker>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
</body>
</html>
<md-datepicker
name="terminationDate"
md-placeholder="Enter date"
ng-model="vm.terminationDate">
</md-datepicker>
Please refer this : http://plnkr.co/edit/O5ePYKyo1ILlheMz8KdO?p=preview
It may help you.
Related
Problem: I have created a webpage with an md-card that has a button. Upon clicking that button, I want another card to appear. The Problem: I cannot figure out, how to make the button of the new card work. It is not correctly formated and it has no functionality.
Question: What do I need to change the code to, to make it work? Thanks.
Code: This is my JavaScript-Code:
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdDialog) {
function addMeinElement () {
// create a new div element
var newDiv = document.createElement("md-card");
document.querySelector('#myID').appendChild(newDiv);
newDiv.innerHTML = "<md-card-content>Oh no! Why does this button not work?<br>"+
"<md-button class='md-warn' ng-click='my_print_to_console()'>Button :( </md-button>"+
"</md-card-content>";
}
$scope.my_print_to_console = function () {
addMeinElement ();
};
});
This is the corresponding html:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-firestore.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.13/angular-material.css'>
<link rel='stylesheet' href='https://material.angularjs.org/1.1.13/docs.css'>
</head>
<body>
<div ng-controller="AppCtrl" ng-app="MyApp">
<div style="position:fixed; width:100%; top:0; height:100%;">
<div style="position:fixed;width:80%;top:0;left:50%;transform: translate(-50%, 0);">
<md-card>
<md-card-content>
<p>Click the button to hopefully create a new card with another button.</p>
<md-button class="md-warn" ng-click="my_print_to_console()";>Button :)</md-button>
</md-card-content>
</md-card>
<div id="myID">
</div>
</div>
</div>
</div>
<!--
Copyright 2018 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be found
in the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.13/angular-material.js'></script>
<script src="app.js"></script>
</body>
It happens because Angular not aware that this is a an Angular component. you need to wrap your HTML with $compile service.
Add '$compile' to your module dependency
Wrap the code like that
$compile('your html here')($scope);
new to AngularJS here, just started a new application, but it seems I'm missing something important in regards to controllers.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Arsenal Roster</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="arsenalApp" ng-controller="ArsenalController">
<input ng-model="name">
<span>{{age}}</span>
</div>
<script>
var arsenalApp=angular.module('arsenalApp',[]);
arsenalApp.controller('ArsenalController',function($scope){
if($scope.name=="jon"){
$scope.age=12;
}else{
$scope.age=1;
}
});
</script>
</body>
</html>
The functionality I want is: if I input 'jon' in the textbox, the output in the browser should change to 12, otherwise, for any other text, it should remain as 1.
As of now it just outputs 1 and doesn't change on entering 'jon'. What am I missing about controllers?
<input ng-model="name" ng-change="onNameChange()">
$scope.onNameChange = function () {
if ($scope.name=="jon") {
$scope.age=12;
} else {
$scope.age=1;
}
}
You need to listen to the change event whenever the name is being changed and the change function should handle your conditions.
I am using the datepicker directive of angularjs from angular materials to create a calendar for input of date.
HTML
<md-datepicker ng-model='vm.endtoDate'></md-datepicker>
The problem i am facing is that when i click on any date on the calendar it does not gets updated.
JS
function SearchController($scope,$stateParams, $q, $log, httpRequests, $location, searchResults, header, icons,leafletData){
var coordinates_selected;
var vm = this;
vm.endtoDate = new Date();
var endto= console.log(JSON.stringify(vm.endtoDate,'end'));
P.S i do not want to use the watch function to monitor the changed values as i later want to store the values in another variable for temporal searching.
If u dont want a watcher or something else i suggest you to go for a change event with in date picker and by using that store the changed date and use it where ever you want
angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
$scope.endtoDate = new Date();
$scope.selecteddate=function(){
var endto= $scope.endtoDate;
console.log(endto);
}
});
<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">
<script src="app.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" >
<md-datepicker ng-model="endtoDate" ng-change="selecteddate()"></md-datepicker>
</div>
</body>
</html>
angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
$scope.endtoDate = new Date();
$scope.selecteddate=function(){
var endto= $scope.endtoDate;
console.log(endto);
}
});
<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">
<script src="app.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" >
<md-datepicker ng-model="endtoDate" ng-change="selecteddate()"></md-datepicker>
</div>
</body>
</html>
I want to know how you would go about getting a value from a color picker and returning it to a js script
Here is the HTML Code
<!DOCTYPE html>
<script type="text/javascript" src="Scripts/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap-colorpicker.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.css' />
<script type="text/javascript" src="js/bootstrap-colorpicker.min.js"></script>
<link rel='stylesheet' href='css/bootstrap-colorpicker.min.css' />
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<p> test test test</p>
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp2').colorpicker({
color: '#AA3399',
format: 'rgb'
})
});
</script>
</body>
</html>
<script>document.getElementById("cp2").value = function () {
return rgb;
}
</script>
`
I am looking to return the value of the color picker which is in RGB format to a js script so that I will to able to assign vars like this
var 1 = rgb[1]
var 2 = rgb[2]
var 3 = rgb[3]
`
If you decide to help me I will be thankful and you could please explain so I can learn from it.
Check javascript function:
<script>
(function() {
var rgb = document.getElementById("cp2").value ;
return rgb;
})();
</script>
I want to dynamically change the language of the DateTimePicker jQuery Plug-in (http://xdsoft.net/jqplugins/datetimepicker/) and I'm getting an "undefined" error for the lang1 inside the last plug-in call:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Datatimepicker</title>
<link rel="stylesheet" href="css/jquery.datetimepicker.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
</head>
<body>
<input id="datetimepicker" type="text" placeholder="Datetimerpicker">
<input id="lang" type="text" placeholder="language" value="en"><div class="select">select language</div>
<script>
var lang1;
$(".select").click(function(){
lang = $('#lang').val();
lang1 = '"'+lang+'"';
return lang1
});
$(".select").click(function(){
console.log(lang1);
$('#datetimepicker').datetimepicker({
lang: lang1
})
});
</script>
</body>
</html>
Shouldn't this work?
You defined two click handlers which you expect to somewhat magically exchange the lang1 variable.
Probably you intended this:
$(".select").click(function(){
var lang = $('#lang').val(); // 1
console.log(lang); // 2
$('#datetimepicker').datetimepicker({ lang: lang }); // 3
});
Get the current lang value from input field #lang
Log it to the console
Initialize the datepicker to use the language lang.