I have two bootstrap datepickers in my form. The datepicker does not close and when i open the second one it overlaps the first one. How could i solve this?
Here is my code:
<div class="col-sm-10">
<input id="beginn" class="datepicker form-control">
<script>
$(function() {
$('.datepicker').datepicker();
});
</script>
</div>
<div class="col-sm-10">
<input id="end" class="datepicker form-control">
<script>
$(function() {
$('.datepicker').datepicker();
});
</script>
</div>
just delete the first script, because you call datepicker plugin to all elements with class datepicker twice
$(function() {
$('.datepicker').datepicker();
});
check this
Your HTML is fine from what I can tell, but I would use col-sm-12 instead of col-sm-10 to make the inputs fullscreen:
<div class="col-sm-12">
<input id="beginn" class="datepicker form-control">
</div>
<div class="col-sm-12">
<input id="end" class="datepicker form-control">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.datepicker').datepicker({
format: 'yyyy/mm/dd', // Or whatever format you want.
startDate: '2015/01/01' // Or whatever start date you want.
});
});
</script>
Using the document.ready function, the datepicker control should only initialize once, and you shouldn't have the overlapping issue you have now.
Hope that helps!
Related
I am using bootstrap-datetimepicker-0.0.11 on my input type text element.
Date picking works fine but minute functionality is not working.
When incrementing minute arrow, nothing happens, and on decrementing hour values gets decremented instead of minute value.
Here's my html snippet:
<div class="form-group col-md-6">
<label for="date_from">Date From *</label>
<input type="text" readonly name="date_from" class="form-control date_from" id="date_from" placeholder="Enter training start date">
</div>
<div class="form-group col-md-6">
<label for="date_to">Date To *</label>
<input type="text" readonly name="date_to" class="form-control date_to" id="date_to" placeholder="Enter training end date">
</div>
And here's datetimepicker initialization:
$('.date_from, .date_to').datetimepicker({format: 'YYYY-MM-DD HH:MM'});
Anyone happens to know why the plugin is working in unexpected manner?
Try this:
<div class='input-group date' id='datetimepicker1'>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
Try this datetime format:
$('.date_from, .date_to').datetimepicker({format: 'YYYY-MM-DD HH:ii'});
where 'M' and 'm' are the same so you were probably confused by using the month value instead of the minute value. The minute value is declared by 'i'
See more information here: https://www.malot.fr/bootstrap-datetimepicker/demo.php
I have a register form. I just need to load bootstrap form in same page behind the select menu when someone click something from select menu. Should I hide form until someone click that item in select menu right?
This is my code.
<div class="form-group">
<select class="form-control menu">
<option>Select category*</option>
<option>Apartment</option>
<option>Lands</option>
</select>
</div>
I need to load this form someone click Apartment in the menu.
<form>
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="Size(sqft)">
/div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="No of bedrooms">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="No of bathrooms">
</div>
</div>
</div>
</div>
</form>
I tried play with this code. But it redirect to another pages.
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
What method do I need to follow?
Have a look at this jsfiddle:
I gave your wrapper of your apartment an id <div class="col-md-12" id="apartment">.
So I added following jQuery to toggle your html of your apartment:
$('select.menu').change(function(){
// this function runs when a user selects an option from a <select> element
switch($(this).find("option:selected").prop('value')) {
case '1': $('#apartment').show(); break;
default: $('#apartment').hide(); break;
}
});
And don't forget to hide your #apartment:
#apartment {
display: none;
}
window.location.href will redirect you to the new page. You can just hide your form before user make a select change or get it dynamically with jQuery.load() function.
Let's say your HTML,
<div class="form-group">
<select class="form-control menu">
<option>Select category*</option>
<option>Apartment</option>
<option>Lands</option>
</select>
</div>
by default let the form is in display:none.
Jquery,
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
if($(this).val == "Apartment"){
$('form').show();
}else{
$('form').hide();
}
});
</script>
I am working on a project where there are two date fields available that will be used for searching between the dates. What I want to do is when a user chooses a date in the FROM field then all the previous dates in the TO field should be disabled.
Example:
FROM: 2016-03-28
To : 2016-04-10
Here in the above example suppose I want to search between these two given dates then while choosing a date from the date picker in the TO field all the dates till 2016-03-28 should be disabled and the user must not be able to select them. Please help.
jQuery date picker:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="css/jquery-1.10.1.min.js"></script>
<script src="css/jquery-ui.js"></script>
<script>
$(function(){
$('.date').datepicker({ format: 'yyyy-mm-dd'});
});
</script>
HTML:
<div class="form-group col-sm-2">
<label>From</label>
<input type="text" name="fdate" autocomplete="off" class="form-control date" style="height:25px;" value="<?php echo $fdate; ?>" />
</div>
<div class="form-group col-sm-2">
<label>To</label>
<input type="text" name="tdate" autocomplete="off" class="form-control date" style="height:25px;" value="<?php echo $tdate; ?>" />
</div>
You can achieve it like this:
$(function(){
var dateObject;
$("input[name='fdate']").datepicker({
format: 'yyyy-mm-dd',
onSelect: function(dateText, inst) {
dateObject = $(this).datepicker({dateFormat: 'yyyy-mm-dd'}).val();
$("input[name='tdate']").datepicker({
format: 'yyyy-mm-dd',
minDate: new Date(dateObject),
});
}
});
});
Here is the working fiddle
I have three separate fields within the same form. I would like to have the ability to dynamically add/remove blank fields for each one.
Here's the fields and a JQuery segment - that does work for the very first field but not the others. What do I need to do? I've also tried putting the 2nd .append statement into the first one, that did not work either.
I also threw an alert into the 2nd one to see if it would trigger. It does, but the button call does not work.
If I can get the first 2 fields to work, how do I handle the third one? Like I said, the very first one works fine.
Fields
<div class="col-sm-3" id="submitterEmail">
Email<g:field type="email" name="submitterEmail" class="form-control" required="" value="" aria-labelledby="submitterEmail-label"/><button id="add">Add+</button>
</div>
<div class="col-sm-2">
Fax<g:field type="text" name="submitterFax" class="form-control" required="true" value="" aria-labelledby="submitterFax-label"/><button id="add2">Add+</button>
</div>
<div class="col-sm-5">
Specimen<g:select name="specimen" from="" class="form-control" type="text" required="true" class="form-control" aria-labelledby="specimen-label"/>
</div>
JQuery
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the div
$("#submitterEmail").append('<div><g:field type="email" name="submitterEmail" class="form-control" required="" value="" aria-labelledby="submitterEmail-label"/><button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add2").click(function (e) {
//Append a new row of code to the div
$("#submitterFax").append('<div><g:field type="text" name="submitterFax" class="form-control" required="" value="" aria-labelledby="submitterFax-label"/><button class="delete">Delete</button></div>');
alert('this is an alert test)
});
});
});
Try this it will work
<?php ?>// you can remove this tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add").click(function (e) {
//Append a new row of code to the div
$("#submitterEmail").append('<div><input type="text" name="submitterEmail" class="form-control" required="" value="" aria-labelledby="submitterEmail-label"/><button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
$(document).ready(function(){
//when the Add Filed button is clicked
$("#add2").click(function (e) {
//Append a new row of code to the div
$("#submitterFax").append('<div><input type="text" name="submitterFax" class="form-control" required="" value="" aria-labelledby="submitterFax-label"/><button class="delete">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
});
</script>
Html part.
<div class="col-sm-3" id="submitterEmail">
Email<g:field type="email" name="submitterEmail" class="form-control" required="" value="" aria-labelledby="submitterEmail-label"/><button id="add">Add+</button>
</div>
<div class="col-sm-2" id="submitterFax">
Fax<g:field type="text" name="submitterFax" class="form-control" required="true" value="" aria-labelledby="submitterFax-label"/><button id="add2">Add+</button>
</div>
<div class="col-sm-5">
Specimen<g:select name="specimen" from="" class="form-control" type="text" required="true" class="form-control" aria-labelledby="specimen-label"/>
</div>
One of my colleagues in my office also came up with this alternative fix if anyone is interested....maybe a little bit more involved perhaps, but also works nicely with some Bootstrap elements and formatting. If it helps someone (it helped me!), then I'm glad to share it.
var counter = 0;
function addContactEmail(){
$("#submitterEmailTbody").append('<tr id="submitterEmail'+counter+'Row"><td><input type="text" name="submitterEmail" class="form-control" required=""/></td><td><button type="button" class="btn btn-danger" onclick="deleteContactEmail('+counter+')" onkeypress="deleteContactEmail('+counter+'); return false"><span class="glyphicon glyphicon-minus"></span></button></td></tr>');
counter++;
}
function deleteContactEmail(id){
$("#submitterEmail"+id+"Row").remove();
}
function addContactFax(){
$("#submitterFaxTbody").append('<tr id="submitterFax'+counter+'Row"><td><input type="text" name="submitterFax" class="form-control" required=""/></td><td><button type="button" class="btn btn-danger" onclick="deleteContactFax('+counter+')" onkeypress="deleteContactFax('+counter+'); return false"><span class="glyphicon glyphicon-minus"></span></button></td></tr>');
counter++;
}
function deleteContactFax(id){
$("#submitterFax"+id+"Row").remove();
}
I have the following code:
<form>
<div class="form-group">
<div class="col-lg-12">
<input class="form-control" type="text" name="keyword1" placeholder="Keyword #1 "><br>
</div>
<div class="help-block">one two</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input class="form-control" type="text" name="keyword2" placeholder="Keyword #2 "><br>
</div>
<div class="help-block">one two</div>
</div>
</form>
on page load, help-blocks are hidden via jquery. I want them shown soon after someone fills in the input for each one. They should display with the text entered.
Here's the jquery I'm trying to improve:
<script>
$(document).ready(function() {
//hide the boxes where results will be shown
$('.help-block').hide();
$('input:text').blur(function (){
$(this).next().val(this.val());
});
});
</script>
Needless to say i'm still finding my feet with jquery, any pointers?
Problems
Use $(this).val() instead of this.val()
help-block div is sibling of input's parent
If you need to display them use .show()
Use
$('input:text').blur(function (event){
event.preventDefault();
$(this).parent().siblings('.help-block').html($(this).val()).show();
});
DEMO