Bootstrap Datepicker 4.15.35 works well with Bootstrap 3.3.7, jQuery 1.11.0, and Moment 2.10.6.
But I would like to base my project on Bootstrap 4.0.0 and jQuery 3.1.1.
Does anyone now a combination that works?
Here you go..
$('#datepicker').datepicker();
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div class="container">
<div class="input-group date">
<input type="text" class="form-control" id="datepicker" placeholder="MM/DD/YYYY">
</div>
</div>
Hope this help you good luck..
even this simple code will do:
<form action="/yourpage.php">
Birthday:
<input type="date" name="bday">
<input type="submit">
</form>
Related
I am trying to get a simple Dragula implementation but it is refusing to work. My code:
<head>
<link href='drag3.css' rel='stylesheet' type='text/css' />
<link href='css/dragula.css' rel='stylesheet' type='text/css' />
<script src='drag3.js'></script>
</head>
<div class="container">
<h1>Drag & Drop</h1>
<p>Trying out <code>dragula.js</code>. Source here.</p>
<div class="left">
<div id="drag-elements">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>
<div id="drop-target">
</div>
</div>
<div class="right">
<div id="display">Display</div>
</div>
</div>
<script src='js/dragula.js'></script>
<script src='js/example.min.js'></script>
Not sure what I am doing wrong, any help would be gratefully received!
The live code is here:
Dragula Implementation
OK so I fixed it by simply moving the
<script src='drag3.js'></script>
to the end of the page.
Indeed :
There's a caveat to dragula. You shouldn't include it in the head of your web applications. It's bad practice to place scripts in the head, and as such dragula makes no effort to support this use case.
Place dragula in the body, instead.
...according to https://github.com/bevacqua/dragula
I am using materializecss for the first time in my web application and
I am struggling with datepicker. It is not working at all.
I imported materialize.css and js file and use the code
<div>
<input type="date" class="datepicker" />
</div>
and added script code
$(document).ready(function() {
$('select').material_select();
window.picker = $('.datepicker').pickadate({
selectYears: 16, // Creates a dropdown of 15 years to control year
format: 'yyyy-mm-dd'
});
});
but nothing worked, it shows a disabled text box.
Also I want to know how to add timepicker in materializecss?
I had the same problem. My problem was solved with downgrading jquery to 2.1.4. It seems, that on some reason the datetimepicker and jquery 2.2.1 are not working together.
cheers
Thomas
First to know, you need to check the version of your Materialize css and javascript version, also don't forget to check jquery version and use the initialization code in your custom init javascript.
check my code in init.js for initialization, CSS and JS Materialize via cdn
$(document).ready(function() {
$('.modal').modal();
//this are my init
$('#dtp').datepicker();
$('#dtp').setDate(new Date());
});
<html>
<head>
<!-- this is my CSS via cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
<div class="row">
<form class="col s12 m6 card">
<div class="row center">
<h4>Materialize DateTime Picker</h4>
<div class="input-field col s12 m12">
<input id="dtp" type="text" class="datepicker">
<label for="dtp">Birthday</label>
</div>
</div>
</form>
</div>
<!-- this is my JS via cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</body>
</html>
Check the documentation from Materialize website, it is always helpful for programmers like me.
Hope this answer help you
Try to run my Code Snippet
<div class="row">
<div class="input-field col s12">
<input id="idate" type="text" name="idate" class="datepicker" >
<label for="idate">Issue Date</label>
</div>
</div>
$('.datepicker').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});
How can I perfectly align and space my inline inputs forms in bootstrap
<div class="form-group col-lg-12">
<div class="col-lg-6">
<input type="text" class= "form-control" value="First Name">
</div>
<div class="col-lg-6">
<input type="text" class= "form-control" value="Last Name">
</div>
</div>
Use col-xs instead of col-lg
see this for a try
And keep all your input inside the
`<div class="form-group col-xs-12">`
I don't quite understand our question very well, maybe a picture to illustrate what you want to achieve would be helpful.
I have basically wrapped everything with a column-xs-12 so its perfectly aligned. Also included an example if you want to place two input forms on one line. I have made a plunk to help you out, hope it helps.
<div class="col-xs-12"> </div>
http://plnkr.co/edit/lj866U6QlvbLKhF4jujI?p=preview
I have tried to make the submit button outside with this code it works on normal browser as firefox. Is there somebody who got a good solution for this?
<label for="submit-form" id="upload_yes_cursor" onClick="parent.location='edit_note.php'">Yes</label>
<div id="edit_note_box_wrapper">
<div id="edit_note_box_inner">
<form action="insert.php" method="post" onSubmit="this.color.value = document.form2.color.value; this.color.value = document.form2.color.value;" name="form1">
<input type="text" class="edit_note_title" placeholder="Title" name="title">
<div data-role="fieldcontain">
<label for="textarea"></label>
<textarea name="textarea" id="textarea" placeholder="Description" data-role="none"></textarea>
</div>
<div id="check">
<input type="hidden" name="color">
</div>
<div id="submit_hidden">
<input type="submit" id="submit-form"/>
</div>
</form>
Your using Javascript in your button submition. Many mobile browsers are not able to use javascript. So, yeah xD
I want to use html input elements in twitter bootstrap. I have a label on the left and an input element on the right. I pretty much used the example given in the bootstrap documentation. But my problem is that I don't have IDs for every input element and so I can't specify the "for"-value of the labels.
My solution in previous projects was wrapping the input element with a label, but this results in a wrong styling when I use bootstrap.
<div class="control-group">
<label class="control-label">MyTitle:
<div class="controls">
<input type="text" value="..." />
</div>
</label>
</div>
Will this work for you?
<div class="control-group">
<div class="controls">
<label class="control-label">MyTitle:
<input type="text" value="..." />
</label>
</div>
</div>