Make bootstrap datepicker disabled from button - javascript

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.

Related

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 datetimepicker for the id of div

I have the date picker working when I set the id for the input tag like the following:
<div class="col-sm-4" id="datepicker">
<input type="text" class="form-control" id="inputDate" placeholder="Date">
<span class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></span>
</div>
<script type="text/javascript">
$(function () {
$('#inputDate').datetimepicker();
});
</script>
I just wonder why its not working if I used the div instead of the input tag ( the datepicker id), as I saw some examples online using the div instead of the input.
It wont work if you don't set class input-group on <div>
Check it here https://jsfiddle.net/a9729dc9/
.datetimepicker(); init the input that will use the datepicker feature, that why we should call it on the concerned input field.
If you want to reference to the input through the div you could use it as :
$('#datepicker input').datetimepicker();
//Or also
$('#datepicker #inputDate').datetimepicker();
In bootstrap you have to add class .input-group to the parent (container) div so bootstrap could detect input-group-addon and init the picker, e.g :
<div class="input-group" id="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
Hope this helps.

jquery to disable buttons on submit/click in forms and links

In my rails app I have buttons that submit information to the server. Some buttons are part of a form and some are not. I'm looking for a way to apply my jquery, which disables the buttons after click, to both.
Here is my current jquery:
$('.btn-disabler').on('click', function() {
$(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
$(this).find('.btn-label').addClass('invisible');
});
This code adds an icon disables the button and makes the text invisible. I've extended the disable function to work on anchor tags as explained here https://stackoverflow.com/a/16788240/4584963
An example link:
<a class="btn btn-success btn-disabler" rel="nofollow" data-method="post" href="/approve?id=10">
<span class="btn-label">Approve</span>
</a>
An example form:
<form class="simple_form well" novalidate="novalidate" id="new_user" action="/" accept-charset="UTF-8" method="post">
<div class="form-group">
<input class="string optional form-control" placeholder="First name" type="text" name="user[first_name]" id="user_first_name">
</div>
<div class="form-group">
<input class="string optional form-control" placeholder="Last name" type="text" name="user[last_name]" id="user_last_name">
</div>
<div class="form-group">
<input class="string email optional form-control" placeholder="Email" type="email" name="user[email]" id="user_email">
</div>
<div class="form-group">
<input class="password optional form-control" placeholder="Password" type="password" name="user[password]" id="user_password">
</div>
<div class="form-groups">
<input class="password optional form-control" placeholder="Retype password" type="password" name="user[password_confirmation]" id="user_password_confirmation">
</div>
<button name="button" type="submit" class="btn btn btn-primary btn-disabler">
<span class="btn-label">Submit</span>
</button>
</form>
My jquery above does not work for the form. In the form on click, the button changes but there is no submission. To get the jquery to work for the form I need to change it to this:
$('.signup-form').on('submit', function() {
$(this).find('.btn-disabler').append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
$(this).find('.btn-label').addClass('invisible');
});
How can I consolidate this to apply to both links and form submit buttons? Seems like my problem stems from links need the click event and the form needs the submit event.
You can use jQuery is() to check parent of current button object is form or not in order to submit the form:
$('.btn-disabler').on('click', function() {
$(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
$(this).find('.btn-label').addClass('invisible');
if ($(this).parent().is("form")) $(this).parent().submit();
});
do you try this using the id of the form like
$('#new_user').on('submit' ...
or with the form element
$('form').on('submit' ...
Think of the submit button as an extension of a form submit event. If you disable the form submit button, the form submit event is disabled. What you can do is add the class to the form, and then in your jQuery code you can assign specific rules. something like this..
So, using this HTML:
<form class="disabler">
<button type="submit"><span>Label</span></button>
</form>
<span>Label</span>
<button class="disabler"><span>Label</span></button>
Use this javascript:
$('.disabler').each(function(e){
if(this.nodeName == "A"){
// this is a hyperlink...
// apply css class
$(this).on('click', function(){
//some action
});
} else if (this.nodeName == "BUTTON") {
//this is a button outside of a form
// disable and add css class
$(this).on('click', function(){
//some action
});
} else if (this.nodeName == "FORM") {
$(this).on('submit', function(){
$(this).find('button[type="submit"]')
.append("<i>Loading</i>")
.disable();
});
}
});
You can probably refactor this down more, but i think you should pay attention to nodeName when you're trying to apply different rules to each of these components.
I hope this answers your question.

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>

Categories

Resources