we're pretty new to this. After finally managing to get ui-Bootstrap working with a date control :-
<div class="col-md-2 box" ng-controller="ResultFilter" >
<h2>Filter</h2>
<p class="input-group" ng-controller="DatepickerDemoCtrl">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.startdate" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event, 'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group" ng-controller="DatepickerDemoCtrl">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.enddate" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event, 'opened2')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group">
<select class="form-control" ng-model="resultfilter.frequency">
<option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Yearly">Yearly</option>
</select>
</p>
</div>
We are capturing the click with the following angular
CISApp.controller('ResultFilter', function ResultFilter($scope, $http) {
$scope.updateResults = function () {
};
});
how ever, how do we get at value of start date as it is within the controller of DatePickerDemoCtrl?
The following doesnt work?
$scope.resultfilter.startdate
any help would be appreciated
ng-controller creates new scope. Both of your DatepickerDemoCtrl are child scopes of ResultFilter. In your case, You could try:
$scope.$$childHead.resultfilter.startdate
This solution is not recommended IMO as it creates tightly coupled code, you're assuming that there is a child scope for this controller, some more recommended approaches:
Use $on, $emit, $broadcast to communicate between scopes.
Create a shared service to hold the state (I think does not apply in your case)
Related
I am using the Calendar in my Angular UI which looks like
<div>
<label style="font-size: medium">To Date</label>
<p class="input-group">
<input type="text" class="form-control"
id="toDate"
name="toDate"
uib-datepicker-popup="{{format}}"
ng-model="request.toDate"
is-open="popup2.opened"
datepicker-options="dateOptions"
ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
required />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
The calendar looks little off like below
But I am looking for something like below
I am not sure if I am missing any assembly directive here. I have the below
in my app.js
angular.module("app", ['ngRoute', 'ngMaterial', 'ngAnimate', 'ui.bootstrap', 'ngMessages')
and index.cshtml
<script src="~/Lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="~/Lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<div class="task-manager_block" ng-controller="ToDoCtrl">
<div class="form_block clearfix">
<form name="addToDo">
<input class="add-input" placeholder="I need to..." type="text" name="inputToDo" ng-model="formTodoText" ng-model-instant ng-minlenght ng-minlength="5" ng-maxlength="40" ng-required="true"/>
<button class="add-btn" ng-click="addTodo()" ng-disabled="! addToDo.inputToDo.$valid "><h2>Add</h2></button>
</form>
</div>
<div class="tasks_block" ng-controller="DatepickerPopupCtrl">
<div class="task_block col-md-3" ng-repeat="todo in todos">
<div class="text_block">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p>{{todo.text}}</p>
</div>
</div>
</div>
</div>
How can I open a single popup that I clicked on because now all of them are instantly opened independently of what I clicked.
This happens due to all the datepickers inside ng-repeat reference the same variable to check open state.
See this.
is-open="popup1.opened"
You will have to manage this state in a separate object.
For example,
In controller declare a empty object
let datePickersStat = {};
then in your HTML, you can use anything as object key as long as it's unique.
is-open="datePickersStat[todo.id]"
Hope that helps.
I have implemented Bootstrap datepicker in my webpage. I am using Bootstrap for CSS Styling.
Using bootstrap recommends that JQuery and Bootstrap JS should be included in the page at last. But doing so is making bootstrap datepicker malfunction.
Following is a snippet of my page through which i am able to use datepicker as well as bootstrap JS for a bootstrap Dropdown.
<head>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link href="../css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript"src="https://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
</head>
<div class="btn-group pull-right">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false">Dropdown <span class="glyphicon glyphicon-triangle-bottom"></span></button>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-info-sign"></span> About <b>1</b></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-alert"></span> Report a Bug</a></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-text-background"></span> Suggest Enhancement</a></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-phone-alt"></span> Contact Us</a></li>
</ul>
</div>
<div class="container">
<div id="questionblock">
<div class= "customscrollbar" id="questiondiv">
<div>
<button onclick="addtest();" class="btn btn-primary" style="margin-left:10px; margin-top:7px;"><span class="glyphicon glyphicon-plus"></span> Add New Test</button>
<a type="button" class="btn btn-default" style="margin-left:10px; margin-top:7px;"><span class="glyphicon glyphicon-refresh"></span> Refresh</a>
</div>
</div>
</div>
</div>
<div id="displaymasterblock">
<div class="alert alert-info fade in" id="addtestheader">
<span class="glyphicon glyphicon-plus"></span> Add New Test
</div>
<em> All fields are mandatory</em>
<form>
<div class="form-inline">
<div id="formelements">
<label>1. Name of Test :</label>
<input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters">
<label>2. Scheduled on :</label>
<div id="datetimepicker" class="input-append date">
<input type="text" style="height:30px;" placeholder="Date & Time of Test"></input>
<span class="add-on" style="height:30px;">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript"> //datepicker
$("#datetimepicker").datetimepicker({
format: "dd/MM/yyyy hh:mm:ss",
todayHighlight: true,
pick12HourFormat: true,
maskInput: true,
});
</script>
</div>
</div>
<div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;">
<span class="glyphicon glyphicon-user"></span> Select Target students for test
</div>
<div class="form-inline">
<div id="formelements">
<div class = "input-group">
<span class = "input-group-addon" style="width:40px;">3. Programme</span>
<select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();">
<option value="0" selected>Select One</option>
</select>
<span class = "input-group-addon">4. Branch</span>
<select id="branch" name="branch" class="form-control" onchange="changeofbranch();">
<option value="0">Select Programme</option>
</select>
</div>
<div class = "input-group" style="margin-top:10px;">
<span class = "input-group-addon" style="width:40px;">5. Semester</span>
<select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();">
<option value="0">Select Programme</option>
</select>
<span class = "input-group-addon">6. Course</span>
<select id="course" name="course" class="form-control" style="width:270px;" >
<option value="0">Problem solving and programming skills</option>
</select>
</div>
</div>
</div>
<center>
<div id="errordiv" style="width:400px;"></div>
<button type="button" class="btn btn-success">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</center>
</form>
<script src="../js/bootstrap.min.js"></script>
Markup inside <div id="displaymasterblock"> has been minified and used in a JS function to get triggered on a button click. Following is that JS function-
function addtest()
{
var element = '<div class="alert alert-info fade in" id="addtestheader"><span class="glyphicon glyphicon-plus"></span> Add New Test</div><em> All fields are mandatory</em><form><div class="form-inline"><div id="formelements"><label>1. Name of Test :</label><input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters"> <label>2. Scheduled on :</label><div id="datetimepicker" class="input-append date"><input type="text" style="height:30px;" placeholder="Date & Time of Test"></input><span class="add-on" style="height:30px;"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div><script type="text/javascript">$("#datetimepicker").datetimepicker({format: "dd/MM/yyyy hh:mm:ss",todayHighlight: true,pick12HourFormat: true});</script></div></div><div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;"><span class="glyphicon glyphicon-user"></span> Select Target students for test</div><div class="form-inline"><div id="formelements"><div class = "input-group"><span class = "input-group-addon" style="width:40px;">3. Programme</span><select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();"><option value="0" selected>Select One</option><option value="1">B.Tech</option><option value="2">M.Tech</option><option value="3">MCA</option><option value="4">M.Sc.</option></select><span class = "input-group-addon">4. Branch</span><select id="branch" name="branch" class="form-control" onchange="changeofbranch();"><option value="0">Select Programme</option></select></div><div class = "input-group" style="margin-top:10px;"><span class = "input-group-addon" style="width:40px;">5. Semester</span><select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();"><option value="0">Select Programme</option></select><span class = "input-group-addon">6. Course</span><select id="course" name="course" class="form-control" style="width:270px;" ><option value="0">Problem solving and programming skills</option></select></div></div></div><center><div id="errordiv" style="width:400px;"></div><button type="button" class="btn btn-success">Save</button><button type="button" class="btn btn-default">Cancel</button></center></form>';
document.getElementById('displaymasterblock').innerHTML = element;
}
What aabove function does is it puts all markup inside the <div id="displaymasterblock">
Datepicker is working i.e. calendar and clock icons are showing up and functioning perfectly when it is directly included in the markup as shown above however when i am using button click to show the same markup the datepicker stops functioning.
Please help me out here. I believe there is something wrong with external resource inclusion order but not sure.
I hope i explained myself properly.
Remove the script tag completely where you are appending the dynamic html content. After the dynamic elements are added to the dom, call the datepicker function. So modify your function like below -
function addtest() {
var element = '<div class="alert alert-info fade in" id="addtestheader"><span class="glyphicon glyphicon-plus"></span> Add New Test</div><em> All fields are mandatory</em><form><div class="form-inline"><div id="formelements"><label>1. Name of Test :</label><input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters"> <label>2. Scheduled on :</label><div id="datetimepicker" class="input-append date"><input type="text" style="height:30px;" placeholder="Date & Time of Test"></input><span class="add-on" style="height:30px;"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div><div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;"><span class="glyphicon glyphicon-user"></span> Select Target students for test</div><div class="form-inline"><div id="formelements"><div class = "input-group"><span class = "input-group-addon" style="width:40px;">3. Programme</span><select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();"><option value="0" selected>Select One</option><option value="1">B.Tech</option><option value="2">M.Tech</option><option value="3">MCA</option><option value="4">M.Sc.</option></select><span class = "input-group-addon">4. Branch</span><select id="branch" name="branch" class="form-control" onchange="changeofbranch();"><option value="0">Select Programme</option></select></div><div class = "input-group" style="margin-top:10px;"><span class = "input-group-addon" style="width:40px;">5. Semester</span><select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();"><option value="0">Select Programme</option></select><span class = "input-group-addon">6. Course</span><select id="course" name="course" class="form-control" style="width:270px;" ><option value="0">Problem solving and programming skills</option></select></div></div></div><center><div id="errordiv" style="width:400px;"></div><button type="button" class="btn btn-success">Save</button><button type="button" class="btn btn-default">Cancel</button></center></form>';
document.getElementById('displaymasterblock').innerHTML = element;
$("#datetimepicker").datetimepicker({
format: "dd/MM/yyyy hh:mm:ss",
todayHighlight: true,
pick12HourFormat: true
});
}
I'm working with UI Bootstrap's datepicker and I some troubles.
The datepicker works fine, but calendar overflows from the sides.
In particular case look at this picture:
My code:
HTML
<div class="row">
<div class="col-md-6 col-md-offset-5">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
JS
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.popup2 = {
opened: false
};
I have imported the following libraries(same order)
bootstrap.min.css
ui-bootstrap-csp.css
angular.js
angular-animate.js
angular-touch.js
ui-bootstrap.js
ui-bootstrap-tpls.js
I'm missing something? Sorry for the basic problem, but i don't understand why the datepicker had this behavior.
trying out angularUI bootstrap's popup datepicker demo. Demo embedded in their page works, but my minimal plunker does not - button click does not popup the calendar. Any idea why?
JS:
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
console.log('opened is now: %s', $scope.opened);
};
HTML:
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" ng-model="dt" is-open="opened">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
The problem is because you didn't supply datepicker-popup the format for the datepicker popup in your ng-model="dt" input.
simply change this
<input type="text" class="form-control" ng-model="dt" is-open="opened">
to this
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened">
Check this working plunker.