Bootstrap date time picker

Bootstrap date time picker - javascript

I am trying to implement the date time picker as explained here https://eonasdan.github.io/bootstrap-datetimepicker/#minimum-setup, I have downloaded the js file css file to the directory js and css. But the calendar is not popup up when click on icon.
$(function() {
$('#datetimepicker1').datetimepicker();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker-standalone.css">
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<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>
</div>
</div>
</div>

All scripts should be imported in order:
jQuery and Moment.js
Bootstrap js file
Bootstrap datepicker js file
Bootstrap-datetimepicker requires moment.js to be loaded before datepicker.js.
Working snippet:
$(function() {
$('#datetimepicker1').datetimepicker();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<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>
</div>
</div>
</div>

In order to run the bootstrap date time picker you need to include moment.js as well. This is a dependency of bootstrap-datetimepicker.js so ensure to import moment.js before bootstrap-datetimepicker.js.
You should import the dependent libraries first before the actual libraries. Hece the order will be.
jquery.js
bootstrap.js (Bootstrap requires jQuery)
moment.js
bootstrap-datetimepicker.js (Bootstrap Datetimepicker requires Moment JS)
Here is the working code sample in your case.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css"> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker-standalone.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<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>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</body>
</html>

Try This:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.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>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<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>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</body>
</html>

You don't need to give local path. just give cdn link of bootstrap datetimepicker. and it works.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datepicker();
});
</script>
</div>
</div>
</body>
</html>

Well, here the positioning of the css and script links makes a to of difference. Bootstrap executes in CSS and then Scripts fashion. So if you have even one script written at incorrect place it makes a lot of difference. You can follow the below snippet and change your code accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css"> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker-standalone.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<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>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</body>
</html>

You can simply use
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
Hope it will help you.

$(document).ready(function() {
$('body').bootstrapMaterialDesign();
$('.datetimepicker').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove'
}
});
$('.datepicker').datetimepicker({
format: 'MM/DD/YYYY',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove'
}
});
$('.timepicker').datetimepicker({
// format: 'H:mm', // use this format if you want the 24hours timepicker
format: 'h:mm A', //use this format if you want the 12hours timpiecker with AM/PM toggle
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove'
}
});
});
html *{
-webkit-font-smoothing: antialiased;
}
.title h3{
font-size: 25px !important;
margin-top: 20px;
margin-bottom: 10px;
line-height: 1.4em !important;
font-weight: 300;
}
/* inputs */
.container .bmd-form-group .bmd-label-static {
top: .35rem;
left: 0;
font-size: .875rem;
}
.container .bmd-form-group .form-control, .bmd-form-group input::placeholder, .bmd-form-group label {
line-height: 1.1;
}
.container .form-control, .is-focused .form-control {
background-image: linear-gradient(0deg,#9c27b0 2px,
rgba(156,39,176,0) 0),linear-gradient(0deg,#d2d2d2 1px,hsla(0,0%,82%,0) 0) !important;
}
.is-focused [class*=" bmd-label"], .is-focused [class^=bmd-label] {
color: #9c27b0 !important;
}
.form-control {
background: no-repeat bottom,50% calc(100% - 1px);
background-size: 0 100%,100% 100%;
border: 0;
height: 36px;
transition: background 0s ease-out;
padding-left: 0;
padding-right: 0;
border-radius: 0;
font-size: 14px !important;
}
/* dropdown */
.dropdown-menu.bootstrap-datetimepicker-widget.open {
opacity: 1;
transform: scale(1);
top: 0;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
padding: 4px;
width: 19em;
}
.bootstrap-datetimepicker-widget .list-unstyled {
margin: 0;
}
.sr-only,
.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after,
.bootstrap-datetimepicker-widget .btn[data-action="today"]::after,
.bootstrap-datetimepicker-widget .picker-switch::after,
.bootstrap-datetimepicker-widget table th.prev::after,
.bootstrap-datetimepicker-widget table th.next::after {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.bootstrap-datetimepicker-widget {
list-style: none;
}
.bootstrap-datetimepicker-widget a:hover {
box-shadow: none !important;
}
.bootstrap-datetimepicker-widget a .btn:hover {
background-color: transparent;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
padding: 4px;
width: 19em;
}
#media (min-width: 768px) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
width: 38em;
}
}
#media (min-width: 991px) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
width: 38em;
}
}
#media (min-width: 1200px) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
width: 38em;
}
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before,
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
right: auto;
left: 12px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top {
margin-top: auto;
margin-bottom: 27px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top.open {
margin-top: auto;
margin-bottom: 27px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
left: auto;
right: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
left: auto;
right: 7px;
}
.bootstrap-datetimepicker-widget .list-unstyled {
margin: 0;
}
.bootstrap-datetimepicker-widget a[data-action] {
padding: 0;
margin: 0;
border-width: 0;
background-color: transparent;
color: #9c27b0;
box-shadow: none;
}
.bootstrap-datetimepicker-widget a[data-action]:hover {
background-color: transparent;
}
.bootstrap-datetimepicker-widget a[data-action]:hover span {
background-color: #eee;
color: #9c27b0;
}
.bootstrap-datetimepicker-widget a[data-action]:active {
box-shadow: none;
}
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
width: 40px;
height: 40px;
line-height: 40px;
font-weight: 300;
font-size: 1.125rem;
margin: 0;
border-radius: 50%;
}
.bootstrap-datetimepicker-widget button[data-action] {
width: 38px;
height: 38px;
margin-right: 3px;
padding: 0;
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
content: "Increment Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
content: "Increment Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
content: "Decrement Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
content: "Decrement Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
content: "Show Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
content: "Show Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
content: "Toggle AM/PM";
}
.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
content: "Clear the picker";
}
.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
content: "Set the date to today";
}
.bootstrap-datetimepicker-widget .picker-switch {
text-align: center;
border-radius: 3px;
font-size: 0.875rem;
}
.bootstrap-datetimepicker-widget .picker-switch::after {
content: "Toggle Date and Time Screens";
}
.bootstrap-datetimepicker-widget .picker-switch td {
padding: 0;
margin: 0;
height: auto;
width: auto;
line-height: inherit;
}
.bootstrap-datetimepicker-widget .picker-switch td span {
line-height: 2.5;
height: 2.5em;
width: 100%;
border-radius: 3px;
margin: 2px 0px !important;
}
.bootstrap-datetimepicker-widget table {
width: 100%;
margin: 0;
}
.bootstrap-datetimepicker-widget table.table-condensed tr>td {
text-align: center;
}
.bootstrap-datetimepicker-widget table td>div,
.bootstrap-datetimepicker-widget table th>div {
text-align: center;
}
.bootstrap-datetimepicker-widget table th {
height: 20px;
line-height: 20px;
width: 20px;
font-weight: 500;
}
.bootstrap-datetimepicker-widget table th.picker-switch {
width: 145px;
}
.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover {
background: none;
color: rgba(0, 0, 0, 0.12);
cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table th.prev span,
.bootstrap-datetimepicker-widget table th.next span {
border-radius: 3px;
height: 27px;
width: 27px;
line-height: 28px;
font-size: 12px;
border-radius: 50%;
text-align: center;
}
.bootstrap-datetimepicker-widget table th.prev::after {
content: "Previous Month";
}
.bootstrap-datetimepicker-widget table th.next::after {
content: "Next Month";
}
.bootstrap-datetimepicker-widget table th.dow {
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
font-size: 12px;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.87);
font-weight: 400;
padding-bottom: 5px;
padding-top: 10px;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th {
cursor: pointer;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover span,
.bootstrap-datetimepicker-widget table thead tr:first-child th.picker-switch:hover {
background: #eee;
}
.bootstrap-datetimepicker-widget table td>div {
border-radius: 3px;
height: 54px;
line-height: 54px;
width: 54px;
text-align: center;
}
.bootstrap-datetimepicker-widget table td.cw>div {
font-size: .8em;
height: 20px;
line-height: 20px;
color: #999;
}
.bootstrap-datetimepicker-widget table td.day>div {
height: 30px;
line-height: 30px;
width: 30px;
text-align: center;
padding: 0px;
border-radius: 50%;
position: relative;
z-index: -1;
color: #3C4858;
font-size: 0.875rem;
}
.bootstrap-datetimepicker-widget table td.minute>div,
.bootstrap-datetimepicker-widget table td.hour>div {
border-radius: 50%;
}
.bootstrap-datetimepicker-widget table td.day:hover>div,
.bootstrap-datetimepicker-widget table td.hour:hover>div,
.bootstrap-datetimepicker-widget table td.minute:hover>div,
.bootstrap-datetimepicker-widget table td.second:hover>div {
background: #eee;
cursor: pointer;
}
.bootstrap-datetimepicker-widget table td.old>div,
.bootstrap-datetimepicker-widget table td.new>div {
color: #999;
}
.bootstrap-datetimepicker-widget table td.today>div {
position: relative;
}
.bootstrap-datetimepicker-widget table td.today>div:before {
content: '';
display: inline-block;
border: 0 0 7px 7px solid transparent;
border-bottom-color: #9c27b0;
border-top-color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: 4px;
right: 4px;
}
.bootstrap-datetimepicker-widget table td.active>div,
.bootstrap-datetimepicker-widget table td.active:hover>div {
background-color: #9c27b0;
color: #fff;
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
}
.bootstrap-datetimepicker-widget table td.active.today:before>div {
border-bottom-color: #fff;
}
.bootstrap-datetimepicker-widget table td.disabled>div,
.bootstrap-datetimepicker-widget table td.disabled:hover>div {
background: none;
color: rgba(0, 0, 0, 0.12);
cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table td span {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
margin: 3px 3px;
cursor: pointer;
border-radius: 50%;
text-align: center;
}
.bootstrap-datetimepicker-widget table td span:hover {
background: #eee;
}
.bootstrap-datetimepicker-widget table td span.active {
background-color: #9c27b0;
color: #fff;
}
.bootstrap-datetimepicker-widget table td span.old {
color: #999;
}
.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
background: none;
color: rgba(0, 0, 0, 0.12);
cursor: not-allowed;
}
.bootstrap-datetimepicker-widget .timepicker-picker span,
.bootstrap-datetimepicker-widget .timepicker-hours span,
.bootstrap-datetimepicker-widget .timepicker-minutes span {
border-radius: 50% !important;
}
.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
height: 27px;
line-height: 27px;
}
.btn.btn-primary {
color: #fff !important;
background-color: #9c27b0 !important;
border-color: #9c27b0;
box-shadow: 0 2px 2px 0 rgba(156, 39, 176, 0.14), 0 3px 1px -2px rgba(156, 39, 176, 0.2), 0 1px 5px 0 rgba(156, 39, 176, 0.12);
}
.btn.btn-primary:hover {
box-shadow: 0 14px 26px -12px rgba(156, 39, 176, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(156, 39, 176, 0.2);
}
/* footer */
footer{
margin-top:150px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
}
.footer p{
margin-bottom: 0;
font-size: 14px;
margin: 0 0 10px;
font-weight: 300;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover {
color: #9f26aa;
text-decoration: none;
}
.form-control:focus{
box-shadow: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<link rel="stylesgeet" href="https://rawgit.com/creativetimofficial/material-kit/master/assets/css/material-kit.css">
</head>
<body>
<div class="container mt-5">
<div class="title">
<h3>Datetime Picker</h3>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="label-control">Datetime Picker</label>
<input type="text" class="form-control datetimepicker" value="10/05/2016">
</div>
<div class="form-group">
<label class="label-control">Date Picker</label>
<input type="text" class="form-control datepicker" value="10/10/2016">
</div>
<div class="form-group">
<label class="label-control">Time Picker</label>
<input type="text" class="form-control timepicker" value="14:00">
</div>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with Material Kit by Creative Tim</p>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js#1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/core/jquery.min.js"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/core/bootstrap-material-design.min.js"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/plugins/moment.min.js"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/plugins/bootstrap-datetimepicker.js"></script>
<script src="https://rawgit.com/creativetimofficial/material-kit/master/assets/js/material-kit.js"></script>
</body>
try this

Related

Why image not showing while download html to pdf using JavaScript or jquery?

I am trying to generate HTML to pdf in javascript using the html2pdf plugin. The page is working fine if I open the HTML file in the browser but when I generate it to pdf, the image is not rendered in PDF and the date is also not in a proper format in PDF. I am new to this. Anyone, please do help. Thanks in advance
body {
background-color: #eee;
}
.card-0 {
min-height: 110vh;
background: linear-gradient(-20deg, rgb(204, 204, 204) 50%, #f66700 50%);
color: white;
border: 0px;
}
p {
font-size: 15px;
line-height: 25px !important;
font-weight: 500
}
.container {
border-radius: 20px
}
.btn {
letter-spacing: 1px;
}
select:active {
box-shadow: none !important;
outline-width: 0 !important
}
select:after {
box-shadow: none !important;
outline-width: 0 !important
}
input,
textarea {
padding: 10px 12px 10px 12px;
border: 1px solid lightgrey;
border-radius: 0px !important;
margin-bottom: 5px;
margin-top: 2px;
width: 100%;
box-sizing: border-box;
color: #2C3E50;
font-size: 14px;
letter-spacing: 1px;
resize: none
}
select:focus,
input:focus {
box-shadow: none !important;
border: 1px solid #2196F3 !important;
outline-width: 0 !important;
font-weight: 400
}
label {
margin-bottom: 2px;
font-weight: bolder;
font-size: 14px
}
input:focus,
textarea:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid #304FFE;
outline-width: 0
}
button:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
outline-width: 0
}
.form-control {
height: calc(2em + .75rem + 3px)
}
.inner-card {}
.card-0 {}
.card-1 {
border-radius: 17px;
color: black;
box-shadow: 2px 4px 15px 0px rgb(0, 0, 0, 0.5) !important
}
#file {
border: 2px dashed #92b0b3 !important
}
.color input {
background-color: #f1f1f1;
}
.files:before {
position: absolute;
bottom: 60px;
left: 0;
width: 100%;
content: attr(data-before);
color: #000;
font-size: 12px;
font-weight: 600;
text-align: center
}
#file {
display: inline-block;
width: 100%;
padding: 95px 0 0 100%;
background: url('https://i.imgur.com/VXWKoBD.png') top center no-repeat #fff;
background-size: 55px 55px
}
#Gstbtndiv {
padding: 20px;
}
table td {
vertical-align: middle !important;
text-align: center;
}
table th,
table td {
padding-top: 08px;
padding-bottom: 08px;
}
table thead {
vertical-align: middle !important;
text-align: center;
background: #f66700;
}
#AddBtn {
width: 100%;
text-align: center;
}
.inptfield {
border-color: #f66700;
}
#cardstyle {
padding-bottom: 40px;
}
table tr input {
text-align: center;
}
#Exportid {
background-color: #f66700;
color: black;
text-align: center;
font-weight: bold;
border-color: #f66700;
}
#ExportDiv {
text-align: right;
margin: 1px;
}
table tbody tr:first-child i {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js">
</script>
<link rel="stylesheet" type="text/css" href="C:\Users\sylaja\Documents\Dttemplate\dttemplate.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="printThis.js"></script>
<script>
function generate() {
var dateelement = document.getElementById('cardstyle');
html2pdf(dateelement);
}
</script>
</head>
<body>
<div id="cardstyle">
<div class="row justify-content-center round">
<div class="col-lg-10 col-md-12 ">
<div class="card shadow-lg card-1">
<div class="card-body inner-card" >
<div class="row justify-content-center">
<div class="col-md-12 col-lg-12 col-sm-12">
<h3 class="font-weight-bold ml-md-0 mx-auto text-center text-sm-left"style="padding: 10px;text-decoration: underline;" id="invoicehead"> INVOICE</h3>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 sm-order-2">
<div class="form-group mb-2" id="invoicenumberdiv">
<input type="text" class="form-control" id="InvoiceNumber" placeholder="Invoice Number">
</div>
<div class="form-group mb-2" id="invoicedatediv">
<input type="Date" class="form-control" id="InvoiceDate">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 sm-order-1" style="text-align:right;">
<img src="digitallogo.png">
</div>
</div>
</div>
<div id="ExportDiv">
<button type="button" class="btn btn-outline-primary" class="exptopdf" id="Exportid" onclick="generate();">Export to PDF</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I need to load my company logo in pdf

For the date format, I don't think there's a solution other than just making a text input where you write the date as the format you want.
For the background issue, try changing where you're assigning the brackground image, like this:
.container { /* don't set the background image here, you're not rendering this*/
background:transparent;
}
#cardstyle { /* use it here. you're rendering from this div on */
background:linear-gradient(-20deg, rgb(204, 204, 204) 50%, #f66700 50%)
}

JQuery UI button style not appearing in Dialog box

The buttons inside a dialog box is not appearing in JQuery UI Style whereas the outside buttons are getting stylised.
Here is my piece of code where i think i'm doing wrong-
$("#addSection").button().click(function(){
$('#sectionDialog').dialog({
buttons:{
"Add New Section":function(){},
"Cancel": function(){}}
});
});
Inside Dialog Box-
Here is the problem
Outside Dialog Box-
Appering perfectly outside dialog box
Edit:
My HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Daily Tasks</title>
<!-- Scripts -->
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery/external/jquery/jquery.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="jquery/jquery-ui.min.css">
<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="styles.css" />
</head>
<body>
<div class="container-fluid">
<h2>Daily Tasks</h2>
<hr width="100%" size="4">
<div class="addSection">
<button id="addSection">Add Section</button>
</div>
<div id="sections">
<ul id="main">
<li>Personal<span class='ui-icon ui-icon-close'></span></li>
<li>Work<span class='ui-icon ui-icon-close'></span></li>
</ul>
<ol id="personal">
</ol>
<ol id="work">
</ol>
</div>
<div class="addTask">
<button id="addTask">Add Task</button>
</div>
<div id="sectionDialog" title="Add a section">
<label for="section">Section Name:</label><input id="section" type="text">
</div>
<div id="taskDialog" title="Add a task">
<label for="task">Task Name:</label><input id="task" type="text">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
My CSS Code:
body{
background-color: #19456b;
}
h2{
text-align: center;
color: #d89216;
font-family:'Times New Roman', Times, serif;
font-size: 2.4rem;
font-style: italic;
font-weight: 500;
margin: 10px 0;
}
hr{
margin: 0;
color: #d89216;
}
button:focus{outline:none !important;}
.container-fluid{
margin-top: 50px;
padding: 2px 15px;
width: 800px;
height: 600px;
border: 5px inset rgb(255,214,75);
background-color: blanchedalmond;
}
ol li{
padding: 2px;
cursor: grabbing;
}
ol li:hover{
background-color: #fad586;
border: 0.5px solid rgb(238, 148, 14);
}
.checkbox
{
margin: 0 5px 0 3px;
cursor: pointer;
}
.addSection
{
text-align: right;
margin: 12px 2px;
}
.addTask
{
text-align: right;
margin: 12px 2px;
}
#sectionDialog{
display: none;
}
#taskDialog{
display: none;
}
.ui-icon-close
{
margin-top: 0.5px;
margin-right: 3px;
transform: scale(1.5);
cursor: pointer;
}
Thanks is advance!

Consider adjusting your head like so:
<!-- CSS Stylesheets -->
<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="jquery/jquery-ui.min.css">
<link rel="stylesheet" href="styles.css" />
The order that they load in is important.
$(function() {
$("#addSection").button().click(function() {
$('#sectionDialog').dialog({
buttons: {
"Add New Section": function() {},
"Cancel": function() {}
}
});
});
});
body {
background-color: #19456b;
}
h2 {
text-align: center;
color: #d89216;
font-family: 'Times New Roman', Times, serif;
font-size: 2.4rem;
font-style: italic;
font-weight: 500;
margin: 10px 0;
}
hr {
margin: 0;
color: #d89216;
}
button:focus {
outline: none !important;
}
.container-fluid {
margin-top: 50px;
padding: 2px 15px;
width: 800px;
height: 600px;
border: 5px inset rgb(255, 214, 75);
background-color: blanchedalmond;
}
ol li {
padding: 2px;
cursor: grabbing;
}
ol li:hover {
background-color: #fad586;
border: 0.5px solid rgb(238, 148, 14);
}
.checkbox {
margin: 0 5px 0 3px;
cursor: pointer;
}
.addSection {
text-align: right;
margin: 12px 2px;
}
.addTask {
text-align: right;
margin: 12px 2px;
}
#sectionDialog {
display: none;
}
#taskDialog {
display: none;
}
.ui-icon-close {
margin-top: 0.5px;
margin-right: 3px;
transform: scale(1.5);
cursor: pointer;
}
<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="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container-fluid">
<h2>Daily Tasks</h2>
<hr width="100%" size="4">
<div class="addSection">
<button id="addSection">Add Section</button>
</div>
<div id="sections">
<ul id="main">
<li>Personal<span class='ui-icon ui-icon-close'></span></li>
<li>Work<span class='ui-icon ui-icon-close'></span></li>
</ul>
<ol id="personal">
</ol>
<ol id="work">
</ol>
</div>
<div class="addTask">
<button id="addTask">Add Task</button>
</div>
<div id="sectionDialog" title="Add a section">
<label for="section">Section Name:</label><input id="section" type="text">
</div>
<div id="taskDialog" title="Add a task">
<label for="task">Task Name:</label><input id="task" type="text">
</div>
</div>

How to Disable previous dates in JQuery Datepicker

I started making a JQuery Calendar, which is about choosing an appointment for an event, and I want to disable the dates prior to the current date. I also want to add an #f48024 orange colour to the available dates to make it more clear that they are still available.
I tried it with minDate but it did not work so far.
My question is how could I disable the dates before the current date?
Edit: I added the following code which makes it possible, but it duplicates the calendar, and I don't know why.
$(document).ready(function(){
$("#example-popover-2") .datepicker({
minDate:0,
})
}
)
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.popover
{
left: 5% !important;
top: 120% !important;
}
.btn
{
margin: 1%;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
.popover button{
background: #f48024;
}
.popover button:hover{
background:#fcb67c;
}
.popover button:focus{
background: #052049;
}
.popover button:focus:active{
background: #052049;
}
.arrow {
visibility: hidden;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
border: 1px solid #dad55e;
background: #fffa90;
color: #777620;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="./style.css" />
<script src="app.js"></script>
</head>
<body>
<div class=" col-md-4">
<div class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
<span class="" id="example-popover-2"></span> </div>
<div id="example-popover-2-content" class="hidden"> </div>
<div id="example-popover-2-title" class="hidden"> </div>
<script>
$('.date-picker-2').popover({
html : true,
content: function() {
return $("#example-popover-2-content").html();
},
title: function() {
return $("#example-popover-2-title").html();
}
});
$(".date-picker-2").datepicker({
onSelect: function(dateText) {
$('#example-popover-2-title').html('<b>Available Appointments</b>');
var html = '<button class="btn btn-success">8:00 am – 9:00 am</button><br><button class="btn btn-success">10:00 am – 12:00 pm</button><br><button class="btn btn-success">12:00 pm – 2:00 pm</button>';
$('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html);
$('.date-picker-2').popover('show');
}
});
// I added this part to the code but this duplicates the calendar.
$(document).ready(function(){
$("#example-popover-2") .datepicker({
minDate:0,
})
}
)
</script>
</body>
</html>

Can you check if there are minDateTime and maxDateTime available?
Something like:
let minDateTime = new Date(someDateInThePast);
let maxDateTime = new Date(someDateInTheFuture);
$(".date-picker-2").datepicker({
minDateTime: minDateTime,
maxDateTime: maxDateTime,
onSelect: function (dateText) {
$('#example-popover-2-title').html('<b>Available Appointments</b>');
var html = '<button class="btn btn-success">8:00 am – 9:00 am</button><br><button class="btn btn-success">10:00 am – 12:00 pm</button><br><button class="btn btn-success">12:00 pm – 2:00 pm</button>';
$('#example-popover-2-content').html('Available times <strong>' + dateText + '</strong><br>' + html);
$('.date-picker-2').popover('show');
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.popover
{
left: 5% !important;
top: 120% !important;
}
.btn
{
margin: 1%;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
.popover button{
background: #f48024;
}
.popover button:hover{
background:#fcb67c;
}
.popover button:focus{
background: #052049;
}
.popover button:focus:active{
background: #052049;
}
.arrow {
visibility: hidden;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
border: 1px solid #dad55e;
background: #fffa90;
color: #777620;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="./style.css" />
<script src="app.js"></script>
</head>
<body>
<div class=" col-md-4">
<div class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
<span class="" id="example-popover-2"></span> </div>
<div id="example-popover-2-content" class="hidden"> </div>
<div id="example-popover-2-title" class="hidden"> </div>
<script>
$('.date-picker-2').popover({
html : true,
content: function() {
return $("#example-popover-2-content").html();
},
title: function() {
return $("#example-popover-2-title").html();
}
});
$(".date-picker-2").datepicker({
minDate: new Date(),
onSelect: function(dateText) {
$('#example-popover-2-title').html('<b>Available Appointments</b>');
var html = '<button class="btn btn-success">8:00 am – 9:00 am</button><br><button class="btn btn-success">10:00 am – 12:00 pm</button><br><button class="btn btn-success">12:00 pm – 2:00 pm</button>';
$('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html);
$('.date-picker-2').popover('show');
}
});
</script>
</body>
</html>

Assigning a CSS Variable using jQuery

I am trying to cause a specific .div to change background colors when clicked on.
As the user will be able to change their colors, the color must be a variable and should be ran when .ready().
I am using a CSS variable '--main-color' as the variable I would like to change the background color to, however I cannot seem to find a jQuery way of solving it while using '$(this)'.
Is there a specific way to apply a custom CSS property/variable with a .click() function?
$(document).ready(function(){
// CREATE GRID
for (i = 0; i<1152; i++) {
var board = document.createElement('div');
board.className = 'grid';
board.addId = 'color'
document.getElementById('container').appendChild(board);
};
// END CREATE GRID
// HOVER AND CLICK FUNCTION //
$('#color-picker').colorpicker().on('changeColor', function(ev){
var choice = ev.color.toHex();
document.body.style.setProperty('--main-color', choice);
});
$('.grid').hover(function(){
$(this).click(function(){
$(this).css('background-color', 'var(--main-color)');
});
});
// END HOVER AND CLICK FUNCTION
});
body {
background-color: #222;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Patua One', cursive;
color: #FFF;
--main-color: #000;
}
*{
background-color: #222;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Patua One', cursive;
color: #FFF;
}
#title {
font-family:'Revalia', cursive;
font-size: 3em;
color: #FFF;
text-align: center;
}
.menu {
float:left;
clear: left;
width: 300px;
margin-top: 5%;
margin-left:5%;
}
#container {
height: 800px;
width: 800px;
border: 1px solid #424242;
margin-left: 30%;
margin-top: 5%;
background-color: #FFF;
}
.grid {
height: 20px;
width: 20px;
border: 1px dotted #424242;
background-color: #FFF;
display: inline-grid;
}
div.grid:hover{;
background-color: var(--main-color);
}
.active {
background-color: var(--main-color);
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #FFF;
background-color: #222;
background-image: none;
border: 1px solid #F85658;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Sketch</title>
<!--Javascript & jQuery Imports /-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src='js/main.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">
<!-- 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>
<!--CSS Imports /-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<!--Font Imports /-->
<link href="https://fonts.googleapis.com/css?family=Patua+One|Revalia" rel="stylesheet">
<!--BOOTSTRAP IMPORTS /-->
<script src='js/bootstrap-colorpicker.min.js'></script>
<link rel='stylesheet' href='CSS/bootstrap-colorpicker.min.css'></link>
<link rel='stylesheet' href='CSS/bootstrap-colorpicker.min.css.map'></link>
</head>
<body>
<div id = 'title'>
ZACH<span style='color: #F85658'>'</span>S PIXELMAKER</div>
</div>
<div class = 'menu'>
<div class = 'color-section'>
<p class="ui-corner-all" style="padding:12px;"> Color:
</p>
</div>
<div id="color-picker" class="input-group colorpicker-component">
<input type="text" value="#000000" class="form-control" />
<span class="input-group-addon"><i></i></span>
<script>
</script>
</div>
</div>
<div id = 'container'>
</div>
</body>
</html>

Assign the color to a class, and toggle the class.
document.querySelector('div').addEventListener('click',function() {
this.classList.toggle('color');
})
body {
--main-color: #000;
}
.color {
background-color: var(--main-color);
color: white;
}
<div>div</div>
Or using jquery...
$(function() {
$('div').on('click',function() {
$(this).toggleClass('color');
});
});
body {
--main-color: #000;
}
.color {
background-color: var(--main-color);
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>div</div>

Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"

I'm trying to code a site just to learn but i can't get something to work on my site togheter with all the other elments but if i code that part alone it works. I'm talking about a bottom navigation bar or "Filter". I want it to slide down if i press on "x" but it doesn't and in the browser console i get this message "Uncaught ReferenceError: closeNav is not defined" and "Uncaught ReferenceError: openNav is not defined"
Here's the code (it's pretty messy):
function openNav() {
document.getElementById("myFilterTab").style.height = "100px";
}
function closeNav() {
document.getElementById("myFilterTab").style.height = "0%";
}
body {
margin:0;
background-color: white;
color: #a5a5af;
font: 12px/1.4em Arial,sans-serif;
}
#header {
position: relative;
background-color: #77c9d4;
color: #FFF;
height: 11.3%;
}
#header input{
position:absolute;
top: 20px;
padding: 5px 9px;
height: 30px;
margin-left: 700px;
width: 600px;
border: 1px solid #a4c3ca;
background: #FFFFFF;
border-radius: 6px 0px 0px 6px;
}
.SearchBar{
color:black;
}
.SearchBar:focus{
outline:0;
color:black;
}
.SearchButton{
position:absolute;
padding:6px 15px;
left:1300px;
bottom:64px;
border: 1px solid #57BC90;
background-color:#57BC90;
color:#fafafa;
border-radius: 0px 6px 6px 0px;
}
.SearchButton:active{
outline:0;
}
.SearchButton:hover{
background-color:#015249;
border-color: #015249;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 15px;
color:white;
}
ul {
position:relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #57BC90;
}
li {
border-right:1px solid #57BC90;
float:left;
}
#NavBar{
width:455.76px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.Login{
float:right;
text-decoration: none;
}
li a:hover{
color:white;
text-decoration:none;
}
li a:hover:not(.active) {
background-color: #015249;
}
.active {
background-color: #015249;
}
br.clearLeft {
clear: left;
}
* {
margin: 0;
}
.glyphicon-log-in{
right: 4px !important;
}
.openBox{
position:absolute;
width: 50px;
background-color: #57BC90;
top: -24px;
left:926px;
cursor:pointer;
}
.glyphicon-chevron-right{
transform: rotate(-90deg);
font-size:20px;
color:white;
right: -13px;
top: 3px;
}
.glyphicon-remove{
position:absolute;
left: 1865px;
top: 13px;
font-size:20px;
color:white;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
.footer{
background-color:#77c9d4;
}
.ShowBox{
padding:1px;
border: 1px solid gray;
height:108px;
width: 192px;
}
.FilterTab{
transition: 0.5s;
position: fixed;
height: 100px;
width: 100%;
padding: 1px;
background-color: #57BC90;
bottom: 0px;
border-radius: 20px 20px 0px 0px;
}
#media screen and (max-height: 450px) {
.FilterTab {padding-top: 15px;}
.FilterTab a {font-size: 18px;}
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
<!DOCTYPE html>
<html>
<head>
<title>PC Master</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="ScrollBar.css">
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
</head>
<body>
<div id="header">
<div id="logo">PC Master</div>
<form method="get">
<input class="SearchBar" type="text" name="search" placeholder="Cauta.." required>
<button type="submit" Value="submit" class="SearchButton"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul>
<li>Home</li>
<li>Componente</li>
<li>Periferice</li>
<li>Contact</li>
<li class="Login"><span class="glyphicon glyphicon-log-in" ></span>Login</li>
</ul>
<br class="clearLeft" />
</div>
<div class="FilterTab" id="myFilterTab">
</span>
<div class="openBox"><span class="glyphicon glyphicon-chevron-right" onclick='openNav()'></span></div>
</div>
<div class='wrapper'>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class="ShowBox">
</div>
<div class='push'></div>
</div>
<div class='footer' id="logo">PC Master</div>
</body>
</html>
The site is only for full hd monitor so in smaller monitors it won't look ok.

JavaScript is not a stylesheet
<link rel="stylesheet" type="text/javascript" href="ScrollBar.js">
use a script tag like all of the other includes in the page
<script src="ScrollBar.js"></script>

We Keep Coding

JavaScript is the programming language of the Web.

Bootstrap date time picker - javascript

You can simply use <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> Hope it will help you.

Related

Why image not showing while download html to pdf using JavaScript or jquery?

JQuery UI button style not appearing in Dialog box

How to Disable previous dates in JQuery Datepicker

Assigning a CSS Variable using jQuery

Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"

Categories

Resources