I have the following piece of code in my front end. I couldn't get the timepicker to show up. Any help please?
<!DOCTYPE HTML>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.js"></script>
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" />
<script type="text/javascript">
$(() => {
$('#timepicker1').timepicker();
});
</script>
</head>
<body>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" type="text" class="form-control input-small">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</body>
<html>
I have all the required source files in my the correct path as mentioned in the code above. Also, I am not seeing any errors in the browser logs. Please help me fix this.
Thank you all
EDIT: I have now used the direct cdn links for all the source files as provided in jsfiddle.
To use the time picker on bootstrap. You must use the datetimepicker component. And use the format property to allow only hours and minutes to be captured
<!DOCTYPE HTML>
<html>
<head>
<link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap-3.3.7/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="bootstrap-3.3.7/js/jquery-1.11.3.min.js"></script>
<script src="bootstrap-3.3.7/js/moment.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap-datetimepicker.min.js"</script>
<script src="bootstrap-3.3.7/js/transition.js"></script>
<script src="bootstrap-3.3.7/js/collapse.js"></script>
</head>
<body>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" type="text" class="form-control input-small">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
<script type="text/javascript">
$(function () {
$('#timepicker1').datetimepicker({
format: 'HH:mm'
});
});
</script>
</body>
<html>
rel="stylesheet" was missing in one of the css tags. That was the issue.
Related
I have a collapsible that I mocked up on jsfiddle at https://jsfiddle.net/1gsqxo26/
It works fine there.
Same exact code on google apps script, nadda. What do I need to change to make this work properly there?
test4.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<base target="_top">
</head>
<body>
<div data-role="collapsible-set" id="set">
<div data-role="collapsible" data-collapsed="false" data-mini="true" class="stuff">
<h3>Stuff</h3>
<button type="button" id="submit" data-mini="true">Submit</button>
</div>
</div>
<?!= include('test4JS'); ?>
</body>
</html>
test4JS:
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$('#submit').on('click', collapse);
function collapse(sender) {
$("#set").children(":first").collapsible( "collapse" );
//$(".stuff").collapsible("collapse");
//$("#set").children(":first").trigger( "collapse" );
//$(".stuff").trigger("collapse");
//none of these work
}
</script>
I'm having a problem with the Eonasdan Bootstrap datetimepicker. I copied and pasted the code from his website (minus the row and container because it made the layout of my panel messy). I suspect that the calendar is buried and not visible for some reason. I was hoping you guys could give me a hand!
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control active" />
<span class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#datepicker').off('focus').datepicker().click(
function () {
$(this).datepicker('show');
}
);
</script>
and here are my reference files so that you can see that I'm loading them properly.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="js/bootstrap.min.js">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="js/bootstrap-datetimepicker.min.js">
<link href="js/moment.min.js">
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
I hope you can give me a hand! Thanks.
Firstly, you need to call jquery before all js files.
Second, the click function is working and you can see some part os calendar or you can't view nothing?
i don't know why you are using
$('#datepicker').off('focus')
try this out.
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
locale: 'ru'
});
});
</script>
I'm getting an error that says "Tag start is not closed" in the following HTML code after the input tag. I can't seem to figure out why since I am using the Handlebars syntax properly. Can someone help me out please?:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="todo">
</div>
<script id="item-template" type="text/x-handlebars-template">
// Your code goes here
<div>
<input id="todo-complete" type="checkbox" {{#if completed}} "checked" {{/if}}>
<label>{{title}}</label>
</div>
</script>
<script src= "underscore.js"> </script>
<script src="handlebars-v1.3.0.js"> </script>
<script src="backbone.js"> </script>
<script src="jquery-1.11.1.js"> </script>
<script src="main.js"> </script>
</body>
You IDE doesn't understand Handlebars syntax, hence reporting a Error, which you should ignore.
I'm facing a weird problem in which I'm unable to close bootstrap tags.
Below is my html code,
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tagsinput.min.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
I'm using Bootstrap V3.0.
Below is the screen shot of the tags,
As you can see from the image that 'x' used to close the tags is not displayed. Any idea why??
Thanks in advance.
You're probably missing this css file:
<link href="bootstrap-tagsinput.css" rel="stylesheet">
This is my Source and it works with the closing x:
<html>
<head>
<link href="bootstrap-tagsinput.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tagsinput.js"></script>
</head>
<body>
<input type="text" id="searchTags" data-role="tagsinput"/>
</body>
</html>
(I didn't took care of nice use of js/css folders)
Let me know if this helps
I'm trying to create a datebox with dateFormat, but it looks like dateFormat won't work.
It gives day/month/year, but I want only month/year.
this is my jsp:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
</head>
<body>
<div data-role="page">
<input type="date" name="date" data-role="datebox" data-options='{"mode":"calbox","dateFormat":"%m/%Y"}' />
</div>
</body>
</html>
I saw this thread, but still I don't understand why it's not working.
It seems like there's an issue in the code that you've provided:
http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js
Contains some hidden characters in between "js". Normally, it would be a hex of 6a73, but in your case, it is 6ae2808ce2808b73 for some reason, so change that link to
http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.calbox.min.js
Proof
However, to answer your question, try using:
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<div data-role="page">
<input type="date" name="date" data-role="datebox" data-options='{"mode":"datebox","overrideDateFormat":"%m/%Y","overrideDateFieldOrder": ["m", "y"],"calUsePickers": true, "calNoHeader": true,"calShowDays": false,"calMonthMode": true}' />
</div>
To force a month/year selection only
Live Demo | Source