Develop Reference

Make bootstrap datepicker disabled from button

I have created form with lot of data inside. I have button that i use to disable fields inside the form. Everything works great but i have no idea what to do with timepickers
I have multiple datepickers and i want to disable them all.
Here is part of code what i've done for this:
$("#object-form").on("click mousedown mouseup onkeydown", select, textarea, .date", function (evt) {
evt.preventDefault();
evt.stopPropagation();
return false;
});
But for datepickers these approach doesn't work.
Here is simple html for my datepicker:
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button onclick='DisableThem()'>Disable datepickers</button>
What should i write in DisableThem() to make my code work?

Selector Issue:
.date is the selector for div, not for the .
For this case only, you may use .form-control or add your own selector.
$("#object-form").on("click mousedown mouseup onkeydown", select, textarea, .date", function (evt) {
evt.preventDefault();
evt.stopPropagation();
return false;
});
Feel free to ask, if you need more clarification.

Need to open the datepicker popup on click of the calendar icon instead of clicking on the input field

my below datepicker code is like below. Its working fine. But the datepicker popup opens when i click on the input field. But want that to be open once i click on the calendar icon. Please suggest me a way to achieve that.
<div class="col-sm-6 col-md-6 col-lg-6 padleft">
<div class="form-group">
<label for="exampleSelect1">Start Date
</label>
<div class="input-group" style="width:75%">
<div class="input-group-btn">
<input type="text"
class="form-control date"
id="dateFrom"
placeholder="From"
ng-click="model.dateFrom=true"
datepicker-popup="{{model.format}}"
ng-model="model.defect.startDate"
is-open="model.dateFrom"
datepicker-options="dateOptions"
date-disabled="model.disabled(date, mode)"
ng-required="true"
close-text="Close" my-date>
<span class="btn btn-default " ng-click="model.dateFrom=true"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
</div>
</div>
In My controller :
self.format = 'MM-dd-yyyy';
self.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
self.opened = {};
self.opened[$event.target.id] = true;
// log this to check if its setting the log
console.log(self.opened);
};
Angular : 1.6
Using 'ui.bootstrap.datetimepicker',
and 'ui.bootstrap

You'll need to add ng-click="model.dateFrom=true" as an attribute to the <i> element containing your calendar icon, not its parent span.
I would actually recommend writing a separate function for toggling the datepicker on and off. Something like
$scope.toggleDatePicker = function() {
$scope.model.dateFrom = !$scope.model.dateFrom;
};
and then calling that from your html: ng-click="toggleDatePicker()"

How to bind a Date from spring form to a dateTimePicker id?

I'm trying to bind a date field to a form, using dateTimePicker with no success.
In my .jsp I have a binding with timeoutDate which is a Date, so when trying to update the form i use (cleaned from some css stuff...)
<spring:bind path="timeoutDate">
<div class="form-group>
<div class="input-group col-sm-4" id='datetimepicker'>
<form:input path="timeoutDate" id="timeoutDate" type="text"/>
<span class="input-group-addon"> <span
class="glyphicon glyphicon-calendar"></span>
</span>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker(
{
defaultDate: "${timeoutDate}"
});
});
</script>
</div>
</div >
</spring: bind >
${timeoutdate} does not work as defaultDate
if I don't put a default date in the function, no binding is made, the filed is empty...

Bootstrap timepicker selects only the first timepicker element

I have a form where a user can add dynamic bootstrap timepicker fields.
I'm using Bootstrap timepicker (https://github.com/eternicode/bootstrap-datepicker) for timepicker input fields that will be dynamically generated
The problem is, when clicking on any datepicker element (except the first one), all the changes happen to the first one only.
Here is the JSFIDDLE
The HTML part of my code is:
<div class="row multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<div class="form-group col-xs-12 col-sm-4">
<div class="input-group">
<input type="text" name="ticket-price" maxlength="5" class="form-control" placeholder="FREE" >
<span class="input-group-btn">
<button class="btn btn-default add-field" type="button">+</button>
</span>
<span class="input-group-btn">
<button class="btn btn-default remove-field" type="button">-</button>
</span>
</div>
</div>
<div class="row">
<div class="form-group col-xs-6 col-sm-3">
<label>Start Date</label>
<input type="text" name="tstart-date" class="form-control tstart-date-picker" placeholder="">
</div>
</div>
</div>
</div>
</div>

The problem is that you clone DOM elements with event handlers attached by jQuery. It causes troubles when you try to select date in new input, because events bound by datepicker somehow mixed up with original on from the first input.
The fix is pretty simple: clone without true argument, and also use delegated click event for adding new rows. The rest doesn't change:
$(this).on('click', '.add-field', function (e) {
$('.multi-field:first-child', $wrapper).clone().appendTo($wrapper);
$('.multi-field:last-child').find('input[name="tstart-date"]').val('');
$('.multi-field:last .tstart-date-picker').datepicker({
autoclose: true,
format: 'dd-M-yyyy',
todayHighlight: true,
});
});
Demo: http://jsfiddle.net/z2j6u8ro/2/

The datepicker must be assigned to each element specifically. Try this:
$(".add-field", $(this)).click(function(e) {
(CODE TO ADD NEW FIELD HERE)
$(.tstart-date-picker).each(function(){
$(this).datepicker("destroy");
$(this).datepicker({
(DATEPICKER OPTIONS HERE)
});
});
}

Timepicker on the click of an icon

I have included the timepicker and I am getting the option to select the time on its click.
//= require bootstrap-timepicker
$('.timepicker-default').each(function(i) {
//alert($(this).val());
$(this).timepicker(
{
defaultTime: $(this).val()
});
});
Now if I add twitter-bootstrap icon 'icon-time' how can I get the option to select the time on its click?
I have used this:
<div class="input-append bootstrap-timepicker-component">
<input type="text" class="timepicker-default" name="planned_start_time" value="<%= #planned_start_time.nil? ? (Time.now).strftime('%I:%M%p') : #planned_start_time%>">
<span class="add-on">
<i class="icon-time"></i>
</span>
</div>
But my icon is coming outside and I am not able to select the time on the click of icon. The same thing is used in http://jdewit.github.com/bootstrap-timepicker/. But there we are able to select the time.

I'm the author of the component. The markup has changed a little. The default functionality will do what you are wanting.
//js
$('.timepicker-default').timepicker();
//html
<div class="input-append bootstrap-timepicker">
<input type="text" class="timepicker-default" name="planned_start_time" value="<%= #planned_start_time.nil? ? (Time.now).strftime('%I:%M%p') : #planned_start_time%>">
<span class="add-on">
<i class="icon-time"></i>
</span>
</div>