AngularJS UI-Bootstrap Datepicker is not working inside ng-repeat? - javascript

I have been trying to use date pickers inside ng-repeat but the datepicker is not working inside ng-repeat, can anyone help me solve this issue.
Here is my code,
<div ng-repeat="dt in dates">
<div class="col-md-6">
<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>
</div>

check this DEMO
<h1>Datepicker inside repeater demo</h1>
<div class="container content-body">
<div class="row" ng-repeat="dt in dates">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt.date" is-open="dt.opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,dt)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>

Related

Swap div content with one button

I have two types content in each div. One is a table and another is the form. I want to swap it by pressing a button.
HTML
<a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> Contact Us</i></a>
<br style="clear:both" />
<div class="well well-sm">
<div id="table">
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>001</td>
<td>DL650XT</td>
<td>369000</td>
</tr>
</table>
</div>
<div id="formDiv">
<form class="form" method="post" action="" name="contact" id="contact">
<fieldset>
<legend> Contact Form </legend>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="name" name="name" placeholder="Name *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Nachricht*"></textarea>
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary btn-lg">Submit</button>
<button type="reset" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
</div>
</fieldset>
</form>
</div>
</div>
Javascript
$(document).ready(function() {
$('#formDiv').css('border', 'red !important');
//swap content
$('#btn').on('click',function() {
$('#table').hide();
$('#formDiv').prop('display', 'show');
})
});
It's only working once. I want the content swap every click.
Here's the fiddle : https://jsfiddle.net/krm85qq3/5/
You can use toggle function in order to display or hide the matched elements.
$('#btn').on('click',function() {
$('#table').toggle();
$('#formDiv').prop('display', 'show');
})
$(document).ready(function() {
$('#btn').on('click', function() {
$('#table').toggle();
$('#formDiv').toggle();
});
});
#formDiv {
display: none;
border: red;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> Contact Us</i></a>
<br style="clear:both" />
<div class="well well-sm">
<div id="table">
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>001</td>
<td>DL650XT</td>
<td>369000</td>
</tr>
</table>
</div>
<div id="formDiv">
<form class="form" method="post" action="" name="contact" id="contact">
<fieldset>
<legend> Contact Form </legend>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="name" name="name" placeholder="Name *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Nachricht*"></textarea>
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary btn-lg">Submit</button>
<button type="reset" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
</div>
</fieldset>
</form>
</div>
</div>
You can use the jQuery toggle() function to... toggle between a show/hide state automatically :)
Toggle works great, but you can also handle it manually. For example, if you want to be able to perform certain functionality when the contact form is showing vs when the table is showing. The following code does the same thing the toggle would do, only applied manually. Just for variety. :)
$(document).ready(function() {
var formEl = $("#formDiv"),
tableEl = $("#table"),
btnEl = $("#btn");
//swap content
btnEl.on('click',function() {
if (tableEl.is(":visible")) {
tableEl.hide();
formEl.show();
btnEl.find("i").text(" Return to Table");
} else {
tableEl.show();
formEl.hide();
btnEl.find("i").text(" Contact Us");
}
})
});
#formDiv {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a id="btn" class="btn btn-primary pull-right"><i class="fa fa-envelope"> Contact Us</i></a>
<br style="clear:both" />
<div class="well well-sm">
<div id="table">
<table class="table table-bordered">
<tr>
<th>ID</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>001</td>
<td>DL650XT</td>
<td>369000</td>
</tr>
</table>
</div>
<div id="formDiv">
<form class="form" method="post" action="" name="contact" id="contact">
<fieldset>
<legend> Contact Form </legend>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="name" name="name" placeholder="Name *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail *" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon" />
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Nachricht*"></textarea>
<span class="form-control-feedback glyphicon"></span>
</div>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-primary btn-lg">Submit</button>
<button type="reset" id="cancel" class="btn btn-danger btn-lg">Reset 1</button>
</div>
</fieldset>
</form>
</div>
</div>
In the above example, if the table is showing and you click on the button, I also wanted to change the text of the btn el. Thus, knowing the state of the table el and using that as my manual toggle point, I can tinker with the state of other elements at will.

How to clear some forms fields on collapse

I have a form that includes a collapsing well with optional fields. I'm trying to figure out how to clear those optional fields if they choose to toggle the well shut or hit the cancel button which also toggles the well shut.
<form id="meeting">
<div class="form-group">
<label class="white" for="">Set Meeting Date & Time</label>
<input class="form-control" type="text" value="07/26/2017 09:05 pm" id="MeetingTime" name="MeetingTime" />
</div>
<button class="btn btn-primary" type="button" data-target="#offSiteMeeting" data-toggle="collapse" aria-pressed="false" autocomplete="off" aria-controls="offSiteMeeting">Offsite Meeting</button>
<div class="collapse" id="offSiteMeeting">
<div class="well">
<a class="btn btn-default pull-right" href="" data- toggle="collapse" data-target="#offSiteMeeting" aria-controls="offSiteMeeting">Cancel Offsite</a>
<div class="form-group">
<label class="" for="">Meeting Type</label>
<select id="meetingType" name="meetingType" class="form-control">
<option value="1">Meeting Type 1 </option>
<option value="2">Meeting Type 2 </option>
<option value="3">Meeting Type 3 </option>
</select>
</div><!-- close form-group -->
<div class="form-group">
<label class="" for="">Location Name</label>
<input class="form-control" type="text" value="" id="name" name="name" placeholder="ex. Jones Family Home" />
</div>
<div class="form-group">
<label class="" for="">Address</label>
<input class="form-control" type="text" value="" id="address" name="address" placeholder="1234 Some Street City, State Zip"/>
</div>
</div><!-- close well -->
</div><!-- close collapse -->
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
So the inputs I'd like to clear (in Form id="meeting") are
id=meetingType, id=name, id=address
when the well with id="offSiteMeeting" is collapsed
Here are the two buttons that collapse the well
<button class="btn btn-primary" type="button" data-target="#offSiteMeeting" data-toggle="collapse" aria-pressed="false" autocomplete="off" aria-controls="offSiteMeeting">Offsite Meeting</button>
<a class="btn btn-default pull-right" href="" data-toggle="collapse" data-target="#offSiteMeeting" aria-controls="offSiteMeeting">Cancel Offsite</a>
add this parameter to your buttons
onclick="function () { document.getElementById('meetingType').value = ''; document.getElementById('name').value = ''; document.getElementById('address').value = '';}"
or if you are into jquery
onclick="function () { $('#meetingType').val(''); $('#name').val(''); $('#address').val(''); }"

Add and remove multiple input group with jquery or javascript

I'm so confused how to add/remove multiple input fields in my code.
This is my code :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
</div>
</div>
I want to add new group of input fields when i'm click the button.
Please advice, Thanks
Try this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="input-div">
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
<button id="b2" class="btn btn-success add-more"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
</div>
And this is de jquery code:
$('#b1').click(function(){
var newGroup = $('.input-div').last().html();
$('.input-div').last().after('<div class="input-div">'+newGroup+'</div>');
});
$('#b2').click(function(){
$('.input-div').last().remove();
});

Overlapping Date Boxes

I am trying to display multiple dates on a screen. Currently, when a user clicks on a date button, it will open a datepicker. If the user clicks out of the box, the datepicker closes as it normally should react. But if the user clicks on another datepicker button, the datepicker will not close but instead, will open another datepicker window and overlap it. [I tried uploading a picture]
I am using Angular-UI for this. http://angular-ui.github.io/bootstrap/
I believe this is a bug? Is there a quick hack to disable the first box when clicked on a different button?
Thank you!
EDIT:
code being used is here:
<div class="row">
<p class="input-group">
<input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.minOrderTime" is-open="minordertime" datepicker-options="dateOptions" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default dateButton" ng-click="openDate($event,'minordertime')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<b>Max Order Time:</b>
<div class="row">
<p class="input-group">
<input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.maxOrderTime" is-open="maxordertime" datepicker-options="dateOptions" min-date="minDate" date-disabled="disabled(date, mode)" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default dateButton" ng-click="openDate($event, 'maxordertime')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<b>min Last Modified:</b>
<div class="row">
<p class="input-group">
<input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.minLastModified" is-open="minlastmodified" datepicker-options="dateOptions" min-date="minDate" date-disabled="disabled(date, mode)" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default dateButton" ng-click="openDate($event, 'minlastmodified')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<b>Max Last Modified:</b>
<div class="row">
<p class="input-group">
<input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.maxLastModified" is-open="maxlastmodified" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default dateButton" ng-click="openDate($event,'maxlastmodified')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<b>Order Date:</b>
<div class="row">
<p class="input-group">
<input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.orderDate" is-open="orderdate" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default dateButton" ng-click="openDate($event,'orderdate')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
Javascript:
$scope.openDate = function ($event, opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
Use an object to store which datepicker is currently open instead of directly on the $scope. That way when you open a new picker you can easily clear them all by writing $scope.openPicker = {} and assigning the new open one $scope.openPicker[opened]
Working plunkr
Just remember to change your is-open to include the object: is-open="openPicker.yourPicker"

Angular UI Bootstrap Input-Group-Button - darn floating button

I have a form that i have just added a bootstrap datepicker to and using an input-group-button.
The problem I have is that the button floats off to the right at the extent of the containing div.
The button in question is the button to the right of TargetDate.
I have been following instructs at TutorialsPoint
JSFiddle here JSFiddle
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wviolet">
<div ht-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<form name="submitjobform" novalidate class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input ng-model="formData.name" type="text" class="form-control" name="name" ng-required="true"> <span class="error" ng-show="submitjobform.name.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea ng-model="formData.description" class="form-control" name="description" ng-required="true"></textarea> <span class="error" ng-show="submitjobform.description.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="category" class="col-sm-2 control-label">Category</label>
<div class="col-sm-10">
<select ng-model="formData.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select> <span class="error" ng-show="submitjobform.category.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="assignee" class="col-sm-2 control-label">Assignee</label>
<div class="col-sm-10">
<select ng-model="formData.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select> <span class="error" ng-show="submitjobform.assignee.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="col-sm-10">
<div class="input-group">
<input name="targetDate" type="text" class="form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /col-sm-10 -->
</div>
<!-- form group -->
<div class="form-group">
<div class="col-sm-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div>
</div>
</form>
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
</section>
Any assistance gratefully appreciated
Simon
There's a couple things that can help you here:
Columns are meant to be wrapped by rows. The default bootstrap grid is a grid of 12 columns.
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
So with that in mind, you can see how you can control the placement PER row of your elements.
As it stands your last div is set to a col-sm-10. This column is holding your input for your target date as well as the button that's misbehaving.
Below is a modification of your troubled area with a fiddle. You had a span tag open too long as well as missing a "form-control" class.
http://jsfiddle.net/Levy0k2f/
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<input name="targetDate" type="text" class="form-control form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn"></span>
</div>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default" ng-click="vm.open($event)"> <i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
Update for fixing of button, the button was outside the span class.
http://jsfiddle.net/k0f598hr/
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>

Categories