I build a custom timepicker with jQuery and bootstrap.
It's almost finished, but 1 "nice to have detail" is missing and I'm stucked getting to the result.
It should follow this rules:
Select the time on click
Only related times are possible to select.
Only 1 time range at once is possible (e.g. 09:00-11:00 works but can't pick another time range)
Disabled times are not possible to pick and if they are between a possible time range, only the range before or after disabled are allowed.
It should be possible to click the start time and the end time and if there are no obstacles in between, the times between should be selected as well.
1-4 are working but I'm stucked on point 5.
So what I want to achieve is that if I click on 13:00-14:00 and 15:00-16:00, 14:00-15:00 should be selected automatically if allowed by above rules.
$('.time-cal .time-btn').on('click',function(){
if($('.time-cal .time-btn.btn-success').length == 0)
{
$(this).not(".btn-danger").toggleClass('btn-success');
$(this).not(".btn-danger").toggleClass('btn-light');
}else{
if($(this).hasClass('btn-light'))
{
if($(this).next().hasClass('btn-success') || $(this).prev().hasClass('btn-success'))
{
$(this).not(".btn-danger").toggleClass('btn-success');
$(this).not(".btn-danger").toggleClass('btn-light');
}
}else{
let next = $(this).next();
let prev = $(this).prev();
if(!next.hasClass('btn-success') || ! prev.hasClass('btn-success'))
{
$(this).not(".btn-danger").toggleClass('btn-success');
$(this).not(".btn-danger").toggleClass('btn-light');
}
}
}
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="time-cal col-lg-6 col-12">
<label>Pick times</label><br>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="07:00" data-end="08:00" disabled="">07:00 - 08:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="08:00" data-end="09:00" disabled="">08:00 - 09:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="09:00" data-end="10:00">09:00 - 10:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="10:00" data-end="11:00">10:00 - 11:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="11:00" data-end="12:00" disabled="">11:00 - 12:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="12:00" data-end="13:00">12:00 - 13:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="13:00" data-end="14:00">13:00 - 14:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="14:00" data-end="15:00">14:00 - 15:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="15:00" data-end="16:00">15:00 - 16:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="16:00" data-end="17:00" disabled="">16:00 - 17:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="17:00" data-end="18:00" disabled="">17:00 - 18:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="18:00" data-end="19:00">18:00 - 19:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="19:00" data-end="20:00">19:00 - 20:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="20:00" data-end="21:00">20:00 - 21:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="21:00" data-end="22:00">21:00 - 22:00</button>
<div class="form-group">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-edit altered behaviour based on the comments.
At startup each time'button' is divided into a specific timeblock so buttons in the same timeblock can be quickly handled together (there might be some additional/other behavioral requirements when reselecting)
const
disabledClass = 'btn-danger',
selectedClass = 'btn-success',
notselectedClass = 'btn-light',
timeButtons = $('.time-cal .time-btn'),
enabledButtons = timeButtons.not('.' + disabledClass ),
timeBlocks = [];
timeButtons.each((index,btn)=>{btn.enabled=!$(btn).hasClass(disabledClass);
if(btn.enabled){
if(index===0 || !timeButtons[index-1].enabled){
timeBlocks.push([]); //new timeblock
}
btn.timeBlock = timeBlocks[timeBlocks.length-1];
btn.timeBlock.push(btn);
}
prevEnabled = btn.enabled;
btn.index = index;btn.selected=false;
btn.setSelected = sel => {if(btn.selected===sel)return; btn.selected=sel;
$(btn).toggleClass(notselectedClass,!sel).toggleClass(selectedClass,sel);}
});
enabledButtons.click(function(){
if(this.selected){
//deselect and make sure times in this block after this button are deselected too
this.timeBlock.filter(btn=>btn.index >= this.index && btn.selected).forEach(btn=>btn.setSelected(false));
return;
}
//deselect other timeblocks
enabledButtons.toArray().filter(b=>b.timeBlock !== this.timeBlock).forEach(b=>b.setSelected(false));
//check if there are other selected
const selected = this.timeBlock.filter(b=>b.selected);
if(selected.length === 0)
this.setSelected(true); //no other buttons selected, simply select
else{
//select range withint the timeblock
let from = selected[0].index, to = this.index;
if(from > to)
[from,to] = [to,from];
for(let i = from;i<=to;i++)
timeButtons[i].setSelected(true);
}
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="time-cal col-lg-6 col-12">
<label>Pick times</label><br>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="07:00" data-end="08:00" disabled="">07:00 - 08:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="08:00" data-end="09:00" disabled="">08:00 - 09:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="09:00" data-end="10:00">09:00 - 10:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="10:00" data-end="11:00">10:00 - 11:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="11:00" data-end="12:00" disabled="">11:00 - 12:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="12:00" data-end="13:00">12:00 - 13:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="13:00" data-end="14:00">13:00 - 14:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="14:00" data-end="15:00">14:00 - 15:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="15:00" data-end="16:00">15:00 - 16:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="16:00" data-end="17:00" disabled="">16:00 - 17:00</button>
<button type="button" class="btn btn-xs time-btn btn-danger" data-start="17:00" data-end="18:00" disabled="">17:00 - 18:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="18:00" data-end="19:00">18:00 - 19:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="19:00" data-end="20:00">19:00 - 20:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="20:00" data-end="21:00">20:00 - 21:00</button>
<button type="button" class="btn btn-xs time-btn btn-light" data-start="21:00" data-end="22:00">21:00 - 22:00</button>
<div class="form-group">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Related
I have a list of buttons from which I navigate to other pages and display
Create a variable
currentStep :number=1;
Add ng-disable for current step based on the button.
<button class="btn btn-outline-primary" (click)="first()" ng-disabled="currentStep == 1">First</button>
<button class="btn btn-outline-secondary" (click)="second()" ng-disabled="currentStep == 2">Second</button>
<button class="btn btn-outline-danger" (click)="third()" ng-disabled="currentStep == 3">Third</button>
<button class="btn btn-outline-warning" (click)="fourth()" ng-disabled="currentStep == 4">Fourth</button>
<button class="btn btn-outline-dark" (click)="fifth()" ng-disabled="currentStep == 5">Fifth</button>
Won't to fill the data and allow the disabled button to passon second page
Create a variable
currentStep :number=1;
Add ng-disable for current step based on the button.
<button class="btn btn-outline-primary" (click)="first()" ng-disabled="currentStep == 1">First</button>
<button class="btn btn-outline-secondary" (click)="second()" ng-disabled="currentStep == 2">Second</button>
<button class="btn btn-outline-danger" (click)="third()" ng-disabled="currentStep == 3">Third</button>
<button class="btn btn-outline-warning" (click)="fourth()" ng-disabled="currentStep == 4">Fourth</button>
<button class="btn btn-outline-dark" (click)="fifth()" ng-disabled="currentStep == 5">Fifth</button>
How do I coding overflow-y: visible with overflow-x: scroll?
The number of buttons can vary and when there are too many of them, they scroll horizontally. If I clicked Dropdown button, then I want to make overflow-y: visible in div. But now, dropdown lists are hidden in div.
How do I change?
My Code part
html
<div class="container-fluid fill-height">
<div class="navbar navbar-expand scroll" role="group">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" id="testDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu" aria-labelledby="testDropdown">
<a class="dropdown-item" href="#">Menu</a>
</div>
</div>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
<button type="button" class="btn btn-default">BUTTON</button>
</div>
</div>
css
.scroll {
overflow-x: scroll;
overflow-y: visible;
}
Codepen live sample here
One last thing:
From the bootstrap official doc (http://getbootstrap.com/components/#dropdowns-alignment):
May require additional positioning
Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.
https://github.com/davidstutz/bootstrap-multiselect/issues/411
https://www.bootply.com/YvePJTDzI0
I have a problem. Call my button "off" or "on" that I needed. If active status in json is 1 then button off is showing in html, so instead. But I have tried with
ng-bind-html
Still not working, any solution for me ? Thanks
This is my code :
Controller
if(item.active === 1){
html_button = '<button type="button" class="btn btn-success"><i class="fa fa-toggle-on"></i> On</button>';
}else{
console.log(1);
html_button = '<button type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>';
}
$scope.getButtonOnOff = function(html_button) {
return $sce.trustAsHtml(html_button);
};
Html
<span ng-if="data.active === 1">
<button ng-show="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
<button ng-hide="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
</span>
<span ng-if="data.active === 0">
<button ng-show="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
<button ng-hide="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
</span>
Lets try angular way
<td width="20%">
<button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
<button ng-show="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-on"></i> On</button>
<button ng-hide="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>
</td>
Im new in JS and Jquery.
I have been trying to set an event to all buttons in the same class, meanwhile I'm tryinh to get the value of each button.
In my HTML I got:
<div id="highlightButtons">
<button type="button" class="btn btn-primary" value="1">1</button>
<button type="button" class="btn btn-primary" value="2">2</button>
<button type="button" class="btn btn-primary" value="3">3</button>
<button type="button" class="btn btn-primary" value="4">4</button>
<button type="button" class="btn btn-primary" value="5">5</button>
<button type="button" class="btn btn-primary" value="6">6</button>
<button type="button" class="btn btn-primary" value="7">7</button>
<button type="button" class="btn btn-primary" value="8">8</button>
<button type="button" class="btn btn-primary" value="9">9</button>
</div>
And in my JS I tried this:
(function() {
'use strict'
var all_hl_btns = $('#highlightButtons');
all_hl_btns.click(function(){
var value = $(this).text();
alert(value);
});
}());
At this point, I'm just trying get the value of each button that I click, but when I click in any button, I got a text of numbers (1 to 9) in a Column.
I would appreciate any kind of help.
Thank you in advance!
You trying to add click event to #highlightButtons and when you click on it, javascript get text of it that is 123456789. You need to add click event to buttons. In the case, your selector changed to $('#highlightButtons > button')
(function() {
'use strict'
var all_hl_btns = $('#highlightButtons > button');
all_hl_btns.click(function(){
var value = $(this).text();
alert(value);
});
}());
var all_hl_btns = $('#highlightButtons > button');
all_hl_btns.click(function(){
var value = $(this).text();
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="highlightButtons">
<button type="button" class="btn btn-primary" value="1">1</button>
<button type="button" class="btn btn-primary" value="2">2</button>
<button type="button" class="btn btn-primary" value="3">3</button>
<button type="button" class="btn btn-primary" value="4">4</button>
<button type="button" class="btn btn-primary" value="5">5</button>
<button type="button" class="btn btn-primary" value="6">6</button>
<button type="button" class="btn btn-primary" value="7">7</button>
<button type="button" class="btn btn-primary" value="8">8</button>
<button type="button" class="btn btn-primary" value="9">9</button>
</div>
I am using Bootstrap 3.3.7.
I have used and to add content to the page.
When I use container-fluid, it will not span the content across the page but will limit the size to the page center area.
The same thing happened when I used container. It spans to the outside of the page> My screen resolution is 1366 x 768.
This is the code I have used
<div class="container">
<h4>Bootstrap Buttons</h4>
<!-- The Large size buttons -->
<p>
<button type="button" class="btn btn-default btn-lg">Default</button>
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-success btn-lg">Success</button>
<button type="button" class="btn btn-info btn-lg">Info</button>
<button type="button" class="btn btn-warning btn-lg">Warning</button>
<button type="button" class="btn btn-danger btn-lg">Danger</button>
<button type="button" class="btn btn-link btn-lg">Link</button>
</p>
<!-- The default size buttons -->
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-sm">Default</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-info btn-sm">Info</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<button type="button" class="btn btn-danger btn-sm">Danger</button>
<button type="button" class="btn btn-link btn-sm">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-xs">Default</button>
<button type="button" class="btn btn-primary btn-xs">Primary</button>
<button type="button" class="btn btn-success btn-xs">Success</button>
<button type="button" class="btn btn-info btn-xs">Info</button>
<button type="button" class="btn btn-warning btn-xs">Warning</button>
<button type="button" class="btn btn-danger btn-xs">Danger</button>
<button type="button" class="btn btn-link btn-xs">Link</button>
</p>
<!-- Bootstrap container & container-fluid -->
<!-- Bootstrap container example -->
<div class="container bootcontainer">
<h1>Hello, world! - Using Container</h1>
</div>
<!-- Bootstrap container-fluid example -->
<div class="container-fluid bootcontainerfluid">
<h1>Hello, world! - Using Container Fluid</h1>
</div>
This is the container that contains the other ones, so:
<!--Bootstrap Modal (Dialog Box / Pop-up Window) Example-->
<div class="container-fluid">
...
Then replace container with container-fluid everywhere you need it, worked for me.
I found the answer. Actually it's an HTML break. I hadn't put the <div> tag after declaring the 'Bootstrap Button Example'.
Thanks anyway!
Regards,
Chiranthaka