Develop Reference

jQuery/bootstrap show datepicker when button is clicked and assign value to variable without input text

Quite new to jQuery so please bear with me...
I would like to show the datepicker when I click a button. The datepicker should appear as a popup and assign the selected date to a variable.
My attempt so far
<button type="button" class="btn btn-primary" onclick='snapshot_btn()'>
Snapshot
</button><input type="hidden" id="button_snapshot" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
and in the main.js
function snapshot_btn() {
$("#button_snapshot").datepicker({
showOn: 'both',
onSelect: function () {
var dateObject = $(this).datepicker('getDate');
alert(dateObject);
}
});
}
but the datepicker does not show when I click the button.
It shows normally on other input boxes.

EDIT
Since in your original question you didn't say that it was bootstrap datepicker, not jQuery datepicker, I made this answer using jQuery datepicker.
You need to add the two libraries (jquery and then jquery UI, check the snippet to get the links), after that,
just use the code below and in the onSelect function, get the date as parameter, it already contains the selection.
I made a slight change, removing the input type='hidden', and adding an empty div, that way the calendar will appear inline.
My example also makes the calendar disappear and reappear on click, take a look.
function snapshot_btn() {
var btnOpenCalendar = $("#btnOpenCalendar");
if (btnOpenCalendar.hasClass('calendar-open')){
btnOpenCalendar.removeClass("calendar-open");
$("#button_snapshot").datepicker("destroy");
}else{
btnOpenCalendar.addClass("calendar-open");
$("#button_snapshot").datepicker({
showOn: 'both',
onSelect: function (date) {
alert(date);
}
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button type="button" id='btnOpenCalendar' class="btn btn-primary" onclick='snapshot_btn()'>
Snapshot
</button>
<div id="button_snapshot"></div>

With bootstrap-datepicker, add autoHide:true inside datepicker() and .datepicker("show"); right after. When use click the button, the modal will show up, and hide when you click outside
<button type="button" class="btn btn-primary" onclick='snapshot_btn()'>Snapshot </button>
<input type="hidden" id="button_snapshot" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
JS
function snapshot_btn() {
$("#button_snapshot").datepicker({
autoHide:true,
showOn: 'both',
onSelect: function () {
var dateObject = $(this).datepicker('getDate');
alert(dateObject);
}
});
$("#button_snapshot").datepicker("show");
}

jQuery datepicker only loads for first item added by JavaScript

I'm trying to load a jQuery datepicker for input fields which are added using append();
The datepicker is loading fine for the first input field, but for any additional ones added it does not load, see JSFiddle for an example here: https://jsfiddle.net/exsupjy2/1/
HTML:
<button class="add-seasonal-filter button-primary" type="button">Add Date</button>
<div class="seasonal-filter-wrapper-outer"></div>
<div class="seasonal-filter-wrapper" style="display:none;">
<input type="text" name="seasonal-date-from" class="datepicker" />
</div>
JS:
$(document).ready(function() {
"use strict";
function load_datepicker() {
$(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
$(".datepicker").attr("readonly", true);
}
function add_seasonal_filter() {
$(".add-seasonal-filter").on( "click", function() {
$(this).parent().find(".seasonal-filter-wrapper-outer").append($(".seasonal-filter-wrapper").html());
load_datepicker();
});
}
add_seasonal_filter();
});

You just need to update JavaScript 100% working:
Need to removeClass('hasDatepicker') before adding..
See here:
$(".datepicker").removeClass('hasDatepicker').datepicker({dateFormat: "yy-mm-dd"});
JavaScript:
$(document).ready(function() {
"use strict";
function load_datepicker() {
$(".datepicker").removeClass('hasDatepicker').datepicker({dateFormat: "yy-mm-dd"});
$(".datepicker").attr("readonly", true);
}
function add_seasonal_filter() {
$(".add-seasonal-filter").on( "click", function() {
$(this).parent().find(".seasonal-filter-wrapper-outer").append($(".seasonal-filter-wrapper").html());
load_datepicker();
});
}
add_seasonal_filter();
});

$(document).ready(function() {
$('#btnadddate').click(function(){
$('#content').append('<br>a datepicker <input class="datepicker_recurring_start"/>');
});
$('body').on('focus',".datepicker_recurring_start", function(){
$(this).datepicker();
});
});
<button id="btnadddate">add a datepicker</button>
<div id="content">
Add Date <input class="datepicker_recurring_start" name="seasonal-date-from"/>
</div>

Bootstrap datepicker in modal not working

I've tried to google and search SO for a similar question, but haven't found anything as of yet.
I have an issue where I create and open a modal from jquery and try to access a date picker, however it doesn't activate the datepickers JS.
$("[id=add]").click(function () {
$("#myModal .modal-header h4").html("Request for Change");
$("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
$("#myModal").modal("show");
});
(Apologies about the long line length, however I have removed as much as I can - just showing the code which relates to the problem now.)
I have these scripts referenced at the top:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="~/Scripts/jquery.tablesorter.min.js"></script>
And in the same <script> </script> tag as the jquery function above, at the very top I have:
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
I have this code used in an similar way (except no jquery modal - simply on a cshtml page) that works correctly. I don't know why this way won't work. I've used developer tools to try to trace an issue, but there are no errors - the scripts load correctly however when clicking the Date Required it doesn't fire to the jquery for datepicker.
Am I using the Jquery html wrong to create the modal?
Cheers

The datepicker is hiding behind the modal.
Set datepicker's z-index above the modal's which is 1050.
Additionally wrap your datepicker code in bootstrap's modal shown event.
$('#myModal').on('shown.bs.modal', function() {
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true,
container: '#myModal modal-body'
});
});
$("[id=add]").click(function() {
$("#myModal .modal-header h4").html("Request for Change");
$("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></form>');
$("#myModal").modal("show");
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>
<div class="well">
<button type="button" id="add">Add</button>
</div>
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4></h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Note: I added bootstrap v3.3.6 CSS and removed the local reference to the tablesorter script for the demo.

well you have to call the datepicker after modal loaded:
$("[id=add]").click(function() {
$("#myModal .modal-header h4").html("Request for Change");
$("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
$("#myModal").modal("show");
$('#myModal').on('shown.bs.modal', function(e) {
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
});
});

$('#myModal').on('shown.bs.modal', function (e) {
$('.date').datepicker();
});

It works for me!
$('#modal_form_horizontal').on('shown.bs.modal', function() {
$('.daterangepicker').css('z-index','1600');
});

In a style label, put the following and it worked. The z-index of the modal exceeds that of the datepicker. so place the z-index of the datepicker at 9999
.ui-datepicker {
z-index: 9999 !important;
}

You need to initiate the date picker on the Modal shown event

When using bootstrap (tested with bootstrap 4.3.1) And jquery (3.4.1) jquery ui (1.12.1) for the datepicker and modal. The datepicker will work fine in a modal.
Except if u are also using the class form-control (bootstrap) in your element input.
The css from bootstrap will set the input with the css position: relative. At this moment the datepicker will no longer will be visible.
A other fix to this issue wil be:
.form-control.datepicker {position:unset}
or not using the form-control class

$(document).on('click','#add',function(){
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
})

It is caused by the z-index,
By now you can set manually the z-index of the date picker in your styles.css
/*Date picker container*/ bs-datepicker-container { z-index: 3000; }

By default, modal z-index is 2050. Your datepicker z-index should be more than modal z-index.
Like:
.datepicker {
z-index: 2051 !important;
}

Toggle hide and show

I have tried everything to get it to toggle show and hide but every time I add hide in the function, it stops working or I can get hide to work flawlessly while show doesn't work at all. Any help would be appreciated.
<div class="ShowHideClicker clear" >
<img src="something.gif"></div> <div class="ShowHideList">
<div class="ui-widget" id="SearchBar">
<label for="tags">Search:</label>
<input id="tags">
<button class='clear' id="ClearButton"> Clear</button>
</div>
<div id="Result"></div>
</div>
$(document).ready(function(){
$('.ShowHideList').hide();
$('.ShowHideClicker').click(function(){
$(this).next().show('drop', {direction: 'left'}, 1000);
});
});

Here is the simple solution with toggleClass:
$('.ShowHideClicker').on('click', function(){
$(this).next().toggleClass('hidden');
});
http://jsfiddle.net/LcYLY/

You should be using the .toggle() this way: JSFIDDLE and make sure you have included jQuery and jQuery UI in your header ("drop" is a jQuery UI feature)
jQuery:
$(document).ready(function(){
$('.ShowHideClicker').click(function(){
$('.ShowHideList').toggle('drop', 1000);
});
});
CSS:
.ShowHideList { display: none; }

Individual jquery actions for each div

Here is the original structure:
<div class="out">
<div class="in">
</div>
</div>
<div class="out">
<div class="in">
</div>
</div>
<div class="out">
<div class="in">
</div>
</div>
and I add jquery to toggle the "in" div.
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in").slideToggle(100);
});
});
see FIDDLE DEMO
However, it controls all the objects, and I don't know how to perform them individually.
Thanks!

Use context selector
$(".in", this).slideToggle(100);
Code
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in", this).slideToggle(100);
});
});
Check Fiddle

Make the .in selector relative to this:
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(this).find(".in").slideToggle(100);
});
});
Corrected fiddle

Try this
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(this).children(".in").slideToggle(100);
});
});
updated jsFiddle File

Use this as the context selector in the call to jQuery, like this:
$(".in",this)
Full code:
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in",this).slideToggle(100);
});
});
Fiddle: http://jsfiddle.net/kfBDJ/5/