I'm brand new to using Angular JS so forgive me if this is a basic question. I'm having problems using the date picker add on with Angular Schema Form (http://schemaform.io) I've followed the instructions on the datepicker github page, but I simply can't get a datepicker to display on my page. Here is a snippet of the code I've been using. Can anyone help or suggest any mistakes I've made?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unilever Data Centre Site Survey</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<script type="text/javascript" src="bower_components/datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/jscript" src="bower_components/jquery-2.1.4.min.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.date.js"></script>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.css"> </link>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.date.css"> </link>
</head>
<body ng-app="test" ng-controller="TestCtrl">
<nav class="navbar navbar-default"> </nav>
<div style="width:950px;" class="container-fluid">
<div ng-controller="TestCtrl">
<form name="test" sf-schema="schema" sf-form="form" sf-model="model" ng-submit="onSubmit(test,modelData)">
</form>
<h3>Model</h3>
<div>{{prettyModel}}</div>
<script>
angular.module('test',['schemaForm']).controller('TestCtrl', function($scope,$http){
$scope.schema = {
"type": "object",
"properties": {
"birthDate": {
"title": "Bday",
"type": "string",
"format": "date"
},
$scope.form = [
{
"key": "birthDate",
"minDate": "1995-09-01",
"maxDate": new Date(),
"format": "yyyy-mm-dd"
},
$scope.model = {};
$scope.$watch('model', function(value){
if (value) {
$scope.prettyModel = JSON.stringify(value, undefined, 2);
}
}, true);
})
</script>
</div>
</body>
It's don't work because Textalk/angular-schema-form-datepicker is missing.
You need to install angular-schema-form-datepicker
https://github.com/Textalk/angular-schema-form-datepicker
Related
I use fullcalendar with angularjs and when I pass events as follows it doesn't display in the calendar correctly
<html>
<head>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/core/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/daygrid/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/list/main.css"></script>
<link rel="stylesheet" href="../fullcalendar-4.1.0/packages/timegrid/main.css"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/core/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/daygrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/timegrid/main.js"></script>
<script type="text/javascript" src="../fullcalendar-4.1.0/packages/list/main.js"></script>
</head>
<script>
$scope.calendarEl = "";
$scope.calendar = "";
$scope.event = {events: [{
title:'test1',
start: '2019-05-05 21:00',
end: '2019-05-06 00:00'
},
{
title:'test2',
start: '2019-05-05 12:00'
}]};
$scope.calendarEl = document.getElementById('calendar');
$scope.calendar = new FullCalendar.Calendar($scope.calendarEl, {
events: $scope.event.events,
plugins: [ 'dayGrid','timeGrid','list' ]
});
$scope.calendar.render();
});
</script>
<body ng-app="myApp" ng-controller="myController">
<div id="calendar" ng-model="eventSources"></div>
</body>
</html>
So when the calendar is displaying both events the event title with test1 doesn't highlight both days 5 and 6th. It only highlights day 5. But if I add the starting time as 00:30 then it highlight both days correctly. How can I overcome this issue ?
I have installed all the component but also calendar is not displyaing.
I have downloaded moment manually and injected in app.js
module is:
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives','ngCordova','angularMoment','mwl.calendar', 'ui.bootstrap'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
controller:
.controller('timesheetCtrl', function($scope,$cordovaCalendar) {
$scope.calendarView = 'week';
$scope.calendarDay = new Date();
$scope.tester = 'Is the Controller connecting';
$scope.events = [
{
title: 'My event title', // The title of the event
type: 'info',
startsAt: new Date(2013,5,1,1),
endsAt: new Date(2014,8,26,15),
editable: false,
deletable: false,
incrementsBadgeTotal: true
}
];
})
View (index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
<link href="lib/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
<script src="lib/ui-bootstrap-tpls-1.2.2.min.js"></script>
<script src="lib/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
-->
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
Timesheet.html:
<ion-view title="Timesheet">
<ion-content overflow-scroll="true" padding="true" class="has-header">
{{tester}}
<mwl-calendar
view="calendarView"
view-date="calendarDate"
events="events"
view-title="calendarTitle"
on-event-click="eventClicked(calendarEvent)"
on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="eventEdited(calendarEvent)"
on-delete-event-click="eventDeleted(calendarEvent)"
cell-is-open="true">
</mwl-calendar>
</ion-content>
</ion-view>
anybody know the solution of this problem?
I can tell you what I see at first sight. If your are using angular moment, which is build on top of moment.js you need to include that file as well.
<script src="lib/moment/moment.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
Check the official doc for angular moment, everything is explain there. Good luck !
I am totally new to angularjs. I am just trying to load an external javascript file using requirejs. I have tried something but its not helping me.
Here is my folder structure:
angular-seed
-app
-bowercomponents
-requirejs
-view1
-view1.html
-view1.js
-view1test1.js
I want to load view1test1.js file in my view1.html
Here is my index.html:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="/css/style1.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script data-main="/app" src="bower_components/requirejs/require.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</nav>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
Here is my app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
g(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
requirejs(["view1/view1test1.js"], function(util) {
});
Here is my view1test1.js:
function(util){
var barChartData = {
labels : ["No. of sign-ups","Daily active users","Average time active","Total time run","Total distance covered","10K activated"],
datasets : [
{
fillColor : "#dd4b39",
strokeColor : "#dd4b39",
data : [10000,13000,56081,42001,5000,40000]
},
{
fillColor : "#f39c12",
strokeColor : "#f39c12",
data : [40000,70000,55000,21001,45023,70121,60093]
},
{
fillColor : "#00a65a",
strokeColor : "#00a65a",
data : [43010,75432,50966,66300,39000,12010,33098]
}
]
};
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
}
I found some examples in which they have used some dependency, but i didn't understand it. So can anybody tell me what i am doing wrong?
This is the code which i have in my controller..I have used 2 elements in the json and passed it to scope.
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
[{
"VisitName":"Brand",
"ClientName":"Software Solutions",
"POC":" Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}]
]
});
Below is the html code which i used to repeat json array..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Service</title>
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-aria.min.js"></script>
<script src="js/angular-material.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<div ng-controller="customersCtrl" ng-cloak>
<h1>Values</h1>
<ul class="chosen" dnd-list="model">
<li ng-repeat="chosen in response track by chosen.ClientID">
{{chosen.VisitName}}
{{chosen.Phone}}
{{chosen.POC}}
</li>
</ul>
<!-- <div>
<span>{{response}}</span>
</div>
<span>{{error}}</span>-->
</div>
</body>
</html>
There is not output comes in the html page, searched all examples and stackoverflow solutions, but i can't find the exact solutions guys, Please help me guys..
You have array in array at $scope.response
just use only one array
$scope.response= [{...},{...}]
or chose first element in array at template (if you cant change $scope.response)
<li ng-repeat="chosen in response[0] track by chosen.ClientID">
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
[{
"VisitName":"Brand",
"ClientName":"Software Solutions",
"POC":" Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}]
]
});
Below is the html code which i used to repeat json array..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Service</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.3/angular-material.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.3/angular-material.jss"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<div ng-controller="customersCtrl" ng-cloak>
<h1>Values</h1>
<ul class="chosen" dnd-list="model">
<li ng-repeat="chosen in response[0] track by chosen.ClientID">
{{chosen.VisitName}}
{{chosen.Phone}}
{{chosen.POC}}
</li>
</ul>
<!-- <div>
<span>{{response}}</span>
</div>
<span>{{error}}</span>-->
</div>
</body>
</html>
It's because response is an array of an array not just a single dimension array get rid of the extra angle brackets:
var app = angular.module('starter', []);
app.controller('customersCtrl',function($scope){
$scope.response=
[
{
"VisitName":"Brand",
"ClientName":" Software Solutions",
"POC":"Name",
"ClientID":"1",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null},
{
"VisitName":"Service",
"ClientName":"Software Solutions",
"POC":"Name",
"ClientID":"2",
"Phone":"9884563143",
"logID":null,
"empID":"1",
"Active":null,
"Code":null,
"dat":null
}
];
});
Is there any way to run an angularjs script when datepicker onSelect method called?
Thanks
Yes, of course it is possible. You could instantiate the datepicker inside the controller.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body ng-app="DatePickerModule">
<div ng-controller="DatePickerController">
<input id="dateField" />
</div>
</body>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript">
angular.module('DatePickerModule', [])
.controller('DatePickerController', function() {
$('#dateField').datepicker();
});
</script>
</html>
EDIT:
If you would like to use a directive:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body ng-app="DatePickerApp">
<div>
<input id="dateField" myDirective />
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript">
angular.module('DatePickerApp', [])
.directive('mydirective', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
$(function(){
element.datepicker({
onSelect: function() {
alert("Selected");
}
});
});
}
}
});
</script>
</html>