Add hours and minutes from button in datatimepicker time picker - javascript

I'm using the bootstrap ready date time picker from http://eonasdan.github.io/bootstrap-datetimepicker/ .
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
});
And this:
<div class="row">
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:10m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
</div>
</div>
<div class="row">
<div class='col-sm'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width: 40%">
<input id="timepicker" name="timepicker" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
I've 6 buttons that when I click on its time it automatically changes the time in the datapicker.
I can't do the function that updates the time, what an idea?


For setting as text value use $("#datetimepicker3").find("input").val(text); and for setting as time value use $('#datetimepicker3').data("DateTimePicker").date(text);
1. Bind the click event on each button by class.I used .btn as example.
2. Get button text by $(this).text() and replace/remove h and m to set the value as text on datetimepicker.
3. set the value using $("#datetimepicker3").find("input").val(text);
$(".btn").on('click', function(e) {
var text = $(this).text().replace("h","").replace("m","");
$("#datetimepicker3").find("input").val(text);
//$('#datetimepicker3').data("DateTimePicker").date(text);//select based on requirement
});
Working snippet for your code:
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'hh:mm'
});
});
$(".btn").on('click', function(e) {
var text = $(this).text().replace("h","").replace("m","");
//$('#datetimepicker3').data("DateTimePicker").date(text);
$("#datetimepicker3").find("input").val(text);
});
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="./css/prettify-1.0.css" rel="stylesheet">
<link href="./css/base.css" rel="stylesheet">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="row">
<div class='col-sm-1'>
<button type="button" id="button1" class="btn btn-secondary btn-sm">00h:10m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
</div>
<div class='col-sm-1'>
<button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
</div>
</div>
<div class="row">
<div class='col-sm'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width: 40%">
<input id="timepicker" name="timepicker" type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>


You can set time with date function:
$('#datetimepicker3').data("DateTimePicker").date("00:25");

Related

Bootstrap 4 input field in popover

The problem is described in title.
I have a Bootstrap 4 modal and one popover with input field with buttons.
In IE 11 everything is ok, but in Firefox input loses focus.
Popover:
$('[data-toggle="popover"]').popover({
container: "body",
sanitize: false,
content: function () {
return $("#choose-user-popover-content").html();
}
}).on('shown.bs.popover', function () {
$('#ExecutorSNPSearchStr').focus();
});
Popover html:
<div id="choose-user-popover-content" style="display: none;">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" id="ExecutorSNPSearchStr" aria-describedby="ExecutorSNPSearchStrAddon"/>
<div class="input-group-append" id="ExecutorSNPSearchStrAddon">
<button class="btn btn-sm btn-outline-info w-3" type="button">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-sm btn-outline-danger w-3" type="button">
<i class="fas fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</div>
https://i.stack.imgur.com/rTe2q.png
Can anyone tell what is the reason for this, and how to solve this problem?
UPD: I recreated the situation in a separate html-file.
$(function () {
$('[data-toggle="popover"]').popover({
sanitize: false,
content: function () {
return $("#PopoverContent").html();
}
});
}).on('shown.bs.popover', function () {
$('#ExecutorSNPSearchStr').focus();
});
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
<div id="PopoverContent" style="display: none;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</section>
<section>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
aria-describedby="button-addon4">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-primary" type="button" data-toggle="popover"
data-trigger="click" data-placement="bottom" data-html="true"
data-title="Search">
<i class="fas fa-user-plus"></i>
</button>
<button class="btn btn-outline-danger" type="button">
<i class="fas fa-user-minus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

There is a simple mistake, you have tabindex="-1" in your modal so your input focus is removing by it.
For Bootstrap 4
MODAL + INPUT POPOVER
$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content: function () {
return $("#PopoverContent").html();
}
});
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<section>
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</section>
<section>
<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons"
aria-describedby="button-addon4">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-primary" type="button" data-toggle="popover">
<i class="fas fa-user-plus"></i>
</button>
<button class="btn btn-outline-danger" type="button">
<i class="fas fa-user-minus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
INPUT POPOVER + INSIDE CONTENT
$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
html: true,
placement: 'bottom',
sanitize: false,
content:
`<div id="PopoverContent">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>`
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
INPUT POPOVER + OUTSIDE CONTENT
$(function () {
$('[data-toggle="popover"]').popover({
container: 'body',
html: true,
placement: 'bottom',
sanitize: false,
content: function() {
return $('#PopoverContent').html()
}
})
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<div class="input-group-append" id="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
For Bootstrap 5
MODAL + INPUT POPOVER
const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content() {
return document.querySelector('#PopoverContent').innerHTML;
}
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<section>
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<button class="btn btn-outline-primary" type="button" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-html="true" data-bs-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</section>
<section>
<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Test modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
<button class="btn btn-outline-primary callPopover" type="button" data-bs-toggle="popover">
<i class="fas fa-user-plus"></i>
</button>
<button class="btn btn-outline-danger" type="button">
<i class="fas fa-user-minus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
INPUT POPOVER + INSIDE CONTENT
const popover = new bootstrap.Popover(document.querySelector('[data-toggle="popover"]'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content: `<div id="PopoverContent">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>`
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
INPUT POPOVER + OUTSIDE CONTENT
const popover = new bootstrap.Popover(document.querySelector('.callPopover'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content() {
return document.querySelector('#PopoverContent').innerHTML;
}
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div id="PopoverContent" class="d-none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username with two button addons" aria-describedby="button-addon1">
<button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
data-html="true" data-title="Search">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<button type="button" class="btn btn-lg btn-danger callPopover" data-toggle="popover" title="Popover title">Click to toggle popover</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

Coming in late on this, but see https://github.com/twbs/bootstrap/issues/36692#issuecomment-1178261690
In short, newer Bootstrap versions more strictly enforce keeping focus inside the modal. By default, if there's a popover inside the modal, it will generate its own popover container outside of the modal itself - so because of the focus enforcement, it won't be reachable. The solution is to explicitly set the container for the popover not to be "body", but the modal (or an explicit container inside the modal).

I'm late to this thread but I am having the same problem using Bootstrap 5.
I copied the Bootstrap 5 code answer into my own files and it worked fine.
I then changed the html to include a cutdown version of my modal (minus the tabindex=1) and my popover and it still worked.
I then replaced the link to the beta version of Bootstrap 5 with a link to the latest full release and the original problem returned, it's not possible to type anything into the popover input field.
I'm including my code below in case anyone can spot an error but this fieels like a Bootstrap 5 bug.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
<section>
<div id="status-form" class="card col-md-6 offset-md-1 d-none mb-2">
<div class="card-header"><h5 id="statusHeader"> Add new status</h5></div>
<div class="card-body">
<input id='popoverStatusID' type='hidden' disabled>
<input id='popoverMode' type='hidden' value='add' disabled>
<div class="mb-2 ms-2">
<input id='popoverStatusEdit' type='text' maxlength='20' class='form-control' value=''>
</div>
<span id='status-message' class='text-danger' value=''></span>
</div>
<div class="card-footer text-muted">
<div class="mt-1 ms-2 mb-2">
<button id="close-status-form" class='btn btn-default btn-sm' type='button'>
Close
</button>
<button id="submit-status-form" class='btn btn-primary btn-sm float-end' type='button'>
Submit
</button>
</div>
</div>
</div>
</section>
<section>
<div id="location-maintenance" class="modal fade" role="dialog" data-bs-backdrop="static">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="location-form"
" method="POST" action="#">
<div class="modal-header d-inline">
<h4 id="location-title" class="ms-2">Edit Location</h4>
<p id="edit-location-name" class="ms-2"></p>
</div>
<div class="col-md-6">
<div class="form-floating">
<select id="location-status-text" class="form-select mb-2" aria-label="Role" placeholder="xxx" name="RoomStatusText">
<option value="17" data-active="1">Active
</option>
<option value="18" data-active="0">Blocked
</option>
<option value="19" data-active="0">ISO
</option>
<option value="268" data-active="0" selected>Onboarding
</option>
</select>
<label class="text-muted">Status</label>
</div>
</div>
<div class="row mb-2">
<div class="col-md-2">
<button class="btn btn-primary status-maintenance" type="button" data-mode="add">Add</button>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-danger btn-delete d-none" role="button" data-bs-toggle="modal" data-bs-target="#modal-delete" title="Delete location" href="#" data-type="location">Delete...<i class="fas fa-times-circle"></i>
</a>
<div>
<button id="cancel-location-edit" type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
<span id="add-message" class="text-success fw-bold"></span>
</form>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row">
<div class="col mt-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#location-maintenance">
Launch demo modal
</button>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<script>
const popover = new bootstrap.Popover(document.querySelector('.status-maintenance'), {
container: 'body',
title: 'Search',
html: true,
placement: 'bottom',
sanitize: false,
content() {
return document.querySelector('#status-form').innerHTML;
}
})
</script>

Resizing bootstrap alerts and keeping the 'x' in the right place

I have the following HTML
<div class="row mt-2">
<div class="col-lg-5">
<div id="alertmessages"></div>
</div>
<div class="col-lg-7">
<div class="btn-group-sm">
<button type="button" id="SaveDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Save Draft</button>
<button type="button" id="RestoreDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Restore Draft</button>
<button type="button" id="DeleteDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Delete All Drafts</button>
</div>
</div>
</div>
I'm using this javascript to display alert messages when the buttons are clicked, this one is for the save draft button:
$('#alertmessages').html
('<div class="alert alert-success alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>Your draft has been saved</div>');
This is how the alerts display. Larger than the "small" buttons
I did try overriding the CSS but the x button then showed up too far down.
.alert {
margin-bottom: 1px;
height: 30px;
line-height:30px;
padding:0px 15px;
}

Add class px-2 py-1 to both .alert and .close, please check the working example below.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="container">
<div class="row mt-2">
<div class="col-lg-5">
<div class="alert alert-success alert-dismissible fade show px-2 py-1">
<button type="button" class="close px-2 py-1" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Your draft has been saved
</div>
</div>
<div class="col-lg-7">
<div class="btn-group-sm">
<button type="button" id="SaveDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Save Draft</button>
<button type="button" id="RestoreDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Restore Draft</button>
<button type="button" id="DeleteDraft" class="btn btn-primary" onclick="draft_btn_click(this)">Delete All Drafts</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

Bootstrap 3.3.7 button groups - only 1 button can be clicked

I have a form with 2 button groups, I would like to be able to select an option from both groups.
Here is my code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
<legend>Card Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Visa</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Master</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Amex</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Discover</button>
</div>
<input type="hidden" name="card_type" value=""/>
</div>
</fieldset>
<fieldset id="ticket_type_fieldset">
<legend>Ticket Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Regular</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">VIP</button>
</div>
<input type="hidden" name="ticket_type" value=""/>
</div>
</fieldset>

One option is:
Note: I moved the hidden input outside the div.btn-group to have a nice border radius on the button group.
$('button').click(function() {
//Remove class selected on all buttons
$(this).parents('fieldset').find('button').removeClass('selected');
//Add class the clicked button
$(this).addClass('selected');
//Update the hidden field of the value
$(this).parents('fieldset').find('input[type="hidden"]').val( $(this).text() );
})
.selected {
background-color: red!IMPORTANT;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
<legend>Card Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Visa</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Master</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Amex</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Discover</button>
</div>
</div>
<input type="hidden" name="card_type" value="" />
</fieldset>
<fieldset id="ticket_type_fieldset">
<legend>Ticket Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Regular</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">VIP</button>
</div>
</div>
<input type="hidden" name="ticket_type" value="" />
</fieldset>
Using Bootstrap 4
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
Doc: Radio Buttons

In this case, I would like to use a checkbox.
you can then do some css to fit the checkbox.
your code will be
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
<legend>Card Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Visa</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Master</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Amex</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Discover</button>
</div>
<input type="hidden" name="card_type" value=""/>
</div>
</fieldset>
<fieldset id="ticket_type_fieldset">
<legend>Ticket Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Regular</button>
<INPUT TYPE="Checkbox" Name="Browser" ID="C1" Value="Firefox">
</div>
<div class="btn-group" role="group">
<button type="checkbox" class="btn btn-default">VIP</button>
<INPUT TYPE="Checkbox" Name="Browser" ID="C1" Value="Firefox">
</div>
<input type="hidden" name="ticket_type" value=""/>
</div>
</fieldset>
please remember that I have edited only last two buttons.
thanks

To achieve expected result, use below option of using click event and adding class
$("#card_type_fieldset .btn").click(function() {
$("#card_type_fieldset .clicked").removeClass("clicked")
$(this).addClass("clicked");
});
$("#ticket_type_fieldset .btn").click(function() {
$("#ticket_type_fieldset .clicked").removeClass("clicked")
$(this).addClass("clicked");
});
code sample - https://codepen.io/nagasai/pen/yKZZLd
$("#card_type_fieldset .btn").click(function() {
$("#card_type_fieldset .clicked").removeClass("clicked")
$(this).addClass("clicked");
});
$("#ticket_type_fieldset .btn").click(function() {
$("#ticket_type_fieldset .clicked").removeClass("clicked")
$(this).addClass("clicked");
});
.clicked {
color: #333;
background-color: #e6e6e6 !important;
border-color: red !important
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
<legend>Card Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Visa</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Master</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Amex</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Discover</button>
</div>
<input type="hidden" name="card_type" value=""/>
</div>
</fieldset>
<fieldset id="ticket_type_fieldset">
<legend>Ticket Type</legend>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Regular</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">VIP</button>
</div>
<input type="hidden" name="ticket_type" value=""/>
</div>
</fieldset>

I assume you're using buttons as options (unique or multiple), isn't it? Please check:
radio buttons (unique)
checkboxes (multiple)
Then with CSS you can make them appear to be buttons if you want that style that you've shown in your snippet.
Boostrap components: https://getbootstrap.com/docs/3.3/components/
Link with examples: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

Append a radio button with JQuery with label and have it work?

I have appended a radio button with JQuery, but for some reason it won't let me select the button when clicking the label. It works in HTML if you don't use jquery, so what am I missing:
$(document).on("shown.bs.modal", "#signmein", function(e) {
var html = '<input type="radio" name="colour" value="red" id="colour_red"><label for="colour_red">Red</label><br>';
$('#modalload').append(html);
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signmein">Open Modal</button>
<div class="modal" id="signmein">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div>
<label>The Field Label</label>
<div class="input-append">
<div class="btn-group pull-left" data-toggle="buttons">
<div id="modalload"></div>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
https://www.bootply.com/yy3eAGjgGG

There is an event handler somewhere that is preventing the default behavior of your label, I couldn't actually find it but stopping the propagation of the event fised it.
$(document).on("click","#modalload label", function (e) {
e.stopPropagation();
});
$(document).on("shown.bs.modal","#signmein", function (e) {
var html = '<input type="radio" name="colour" value="red" id="colour_red"><label onclick="/*event.stopPropagation();*/" for="colour_red">Red</label><br>';
$('#modalload').html(html);
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signmein">Open Modal</button>
<div class="modal" id="signmein">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div>
<label>The Field Label</label>
<div class="input-append">
<div class="btn-group pull-left" data-toggle="buttons">
<div id="modalload"></div>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>

jQuery datepicker not working in cshtml page

I am trying to implement a simple datepicker in jQuery but I am getting an error like 'datepicker not a function'. Really donot understand why and not able to know where I made the mistake. I have also added jQuery in the bundles and the bundle script is rendered in _Layout page and the script is added in the view but no luck. Could anybody help on what the problem is.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/themes/base/datepicker.css" rel="stylesheet" />
<link href="~/Content/themes/ui-lightness/jquery-ui.ui-lightness.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
var j = $.noConflict(true);
$("#fromdate").datepicker();
});
});
</script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row">
#*From*#
<label class="col-sm-1">From</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control" id="fromdate">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
#*To*#
<label class="col-sm-1">To</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
</div>
<!--Submit Button-->
<div class="col-sm-10"></div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary text-center">View Projects</button>
</div>
</div>
</div>

Console error clearly shows that it cant find file paths.
try this:
jQuery .css and .js files source
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
JS
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Body of HTML
<body>
<p>Enter Date: <input type = "text" id = "datepicker"></p>
</body>

try the following:
var $j = jQuery.noConflict();
$j("#fromdate").datepicker();

Always check your browser console and network calls to make certain its loading all required files or not first.
$.datepicker() is not a function.
It clearly shows that it can't recognize the base script where this function is defined. Using ~ to define relative paths certainly is not loading your jquery/jquery-ui scripts. If you want to make sure you can check this code here and it works!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"
integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="
crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$(function () {
//var j = $.noConflict(true);
$("#fromdate,#todate").datepicker();
});
});
</script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row">
#*From*#
<label class="col-sm-1">From</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control" id="fromdate">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
#*To*#
<label class="col-sm-1">To</label>
<div class="col-sm-2">
<div class="input-group">
<input type="text" class="form-control" id="todate">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div><!-- /input-group -->
</div>
</div>
<!--Submit Button-->
<div class="col-sm-10"></div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary text-center">View Projects</button>
</div>
</div>
</div>
I added jquery and jquery-ui from cdn and are working fine, make sure you added your jquery-ui script tag after jquery.
Updated JS Bin is here.
What to do next
Use '/' as relative path for linking your css and scripts that will solve your problem.

Categories