Bootstrap datepicker in modal not working - javascript

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;
}

Related

How to set min and max time for Materialize Time Picker

I am using materializecss for my project. I have inserted Time Picker. Here i want to set the min and max time dynamically using JS.
For Datepicker
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15,
today: 'Today',
clear: 'Clear',
close: 'Ok',
min: new Date(2017,9,20),
max: new Date(2017,10,10),
closeOnSelect: false
});
Is working fine.
For TimePicker
$('.timepicker').pickatime({
fromnow: 0,
twelvehour: true,
donetext: 'OK',
canceltext: 'Cancel',
minDate: new Date(2017,9,20,12,0),
maxDate: new Date(2017,10,10,18,0),
aftershow: function(){}
});
Also i tried
min: [7,30],
max: [14,0]
But didn't helped.
Well, i faced the same issue in my project, and found out that materialize doesn't have this feature yet,
So the only way possible is to edit the official Materialize CSS and JS files
<input type="text" class="timepicker" id="modified-timepicker">
Refer this pen for timepicker : Materialize Timepicker min/ max CodePen by Dev Sware
<div id="wrapper1" class="col s5 input-field">
<input type="date" id="start1" class="datepicker-start" />
<label for="start1">Start Date</label>
</div>
<div id="wrapper2" class="col s5 input-field">
<input type="date" id="end1" class="datepicker-end" />
<label for="end1">End Date</label>
</div>
Refer this pen for datepicker : Materialize Datepicker range CodePen by Dreamh
replace/ add these CSS and JS from the pen to your project, and do change the min/ max time and date range.
Hope this solves your problem. 😃

Insert label inside bootstrap datetimepicker

Is there a way to add hour/minute label to eonasdan's bootstrap datetimepicker like shown in the screenshot?
As ceejayoz stated in comments, the datetimepicker does not include this kind of functionality. The library is open source and you can customize the code and the look & feel as suggested.
Another appoach is to add dinamically a row under hours and minutes row when the picker is shown. You can add a listner to dp.show event and then use jQuery to manipulate picker HTML.
Here a working sample:
$('#datetimepicker1').datetimepicker({
format: 'HH:mm'
});
$('#datetimepicker1').on('dp.show', function(){
// Check timepicker is visible
if( $('.timepicker').is(':visible') ){
// Get rows of the timepicker
var rows = $('.timepicker>.timepicker-picker>table>tbody>tr');
// Create html for custom text
var tr = '<tr class="customText"><td>hours</td><td class="separator"></td><td>minutes</td></tr>';
// Add custom HTML inside component
$(rows[1]).after(tr);
}
});
.bootstrap-datetimepicker-widget table tr.customText td {
height: 24px;
line-height: 24px;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<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>
The datetimepicker has the debug option that, if set to true:
Will cause the date picker to stay open after a blur event.

Bootstrap datepicker setDatesDisabled not working on button click

Trying to setDatesDisabled on button click for bootstrap datepicker, however it's not working.
HTML:
<div id="container">
<div id="date-range">
<div class="range-start"></div>
<div class="range-end"></div>
</div>
<button id="button" class="btn btn-warning">Disable Dates</button>
</div>
JavaScript:
$(function() {
$('#date-range').datepicker({
inputs: $('.range-start, .range-end'),
format: 'yyyy-mm-dd',
datesDisabled: ['2016-04-21', '2016-04-20', '2016-04-13']
});
$('#button').click(function() {
$('#date-range').datepicker('setDatesDisabled', ['2016-04-29', '2016-04-30']);
});
});
Fiddle: https://jsfiddle.net/kaygee79/953zk742/
Use the inputs specified while initializing the datepicker.
$(function() {
$('#date-range').datepicker({
inputs: $('.range-start, .range-end'),
format: 'yyyy-mm-dd',
datesDisabled: ['2016-04-21', '2016-04-20', '2016-04-13']
});
$('#button').click(function() {
$('.range-start').datepicker('setDatesDisabled', ['2016-04-29', '2016-04-30']);
$('.range-end').datepicker('setDatesDisabled', ['2016-04-29', '2016-04-30']);
});
});
Working fiddle:
https://jsfiddle.net/f50ga49j/

Add content besides datepicker based on hoover

Im working on a datepicker so when a user hoover over a date it shows date on top of the input bar
Here is the jfiddle im working on http://jsfiddle.net/JGM85/1/
<div class="demo">
<h1></h1>
<p>Date: <input type="text" id="datepicker"></p>
But I am trying to display it content on the side of the datepicker rather than on the top.
Something like this
Imgur Link
You can use beforeshow for datepicker and call your own function.
https://jsfiddle.net/JGM85/272/
Please check this code with your fiddle :
$(function() {
$("#datepicker").datepicker({
//The calendar is recreated OnSelect for inline calendar
onSelect: function (date, dp) {
updateDatePickerCells();
},
onChangeMonthYear: function(month, year, dp) {
updateDatePickerCells();
},
beforeShow: function(elem, dp) { //This is for non-inline datepicker
updateDatePickerCells();
}
});
updateDatePickerCells();
function updateDatePickerCells(dp) {
/* Wait until current callstack is finished so the datepicker
is fully rendered before attempting to modify contents */
setTimeout(function () {
$('.ui-datepicker-calendar').after('<p>Fajr Sunrise Zuhr Asr Magrib Isha</p><div class="className"></div>');
}, 0);
}
$(".ui-state-default").live("mouseenter", function() {
$('.className').html($(this).text()+"."+$(".ui-datepicker-month",$(this).parents()).text()+"."+$(".ui-datepicker-year",$(this).parents()).text());
});
});
You can just make the <p> and the <h1> into : display: inline
<p style="display: inline">
Date: <input type="text" id="datepicker">
</p>
<h1 style="display: inline"></h1>

Bootstrap Datepicker is displaying behind popover

I'm trying to display a datepicker in a popover (using bootstrap and bootstrap-datepicker extension) and having some issues,
first I had a problem with displaying the datepicker and found this topic : Datepicker in Popover Won't display
,but now it's displaying behind my popover so it's not fully visible
Here is the HTML code :
<button type="submit" class="btn btn-primary pop_doleance" rel="popover" data-original-title="Ajouter doléance">Ajouter doléance</button>
<div style="display: none" class="pop_doleance_content">
<form class="well form-inline form_doleance">
<label for="date">Date : </label>
<input id="date" type="text" class="input-medium">
</form>
And the Javascript code :
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function (){
tmp.call(this);
if (this.options.callback) {
this.options.callback();
}
}
$(function (){
$(".pop_doleance").popover({
placement:'bottom',
html : true,
content: function(){return $('.pop_doleance_content').html();},
callback: function(){$('#date').datepicker();}
});
});
Any ideas ?
set popup's z-index to a lower value.
.popup { z-index : 900; }
and set datepicker's container z-index to a higher value like in case of jquery ui datepicker set
.ui-datepicker-div { z-index: 999; }
In the css I added:
.datepicker {
z-index: 999 !important;
}
Note the "!important". It did not work without this.

Categories

Resources