I face this problem today when I try to show datepicker on Bootstrap Modal.
I'm using bootstrap-datepicker as datepicker library.
Here is my modal form :
<div class="form-group">
<label for="message-text" class="control-label">Start Date</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date">
</div>
</div>
And here is my datepicker script :
$('#datepicker2').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
zIndexOffset: 10000
});
I already using zIndexOffset but it's not working, the calendar still shown behind the modal.
Can anyone suggest the solution ?
Thank you.
You should try adding the date picker container inside the modal div. You could give the modal an id like this:
<div class="form-group" id="myModalWithDatePicker">
<label for="start_date" class="control-label">Start Date</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date">
</div>
</div>
Then you can use the container option like the following:
$('#datepicker2').datepicker({
autoclose: true,
container: '#myModalWithDatePicker',
format: 'yyyy-mm-dd'
});
I used this option to fix.
.modal-open .ui-datepicker{z-index: 2000!important}
this option has been applied when modal open (class modal-open added to body)
Related
In my form I have below code to display the date picker. I am using bootstrap
<div class="form-group row">
<label for="Quantity" class="col-sm-3 col-form-label">Required Date</label>
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
<div class="input-group-addon">
<i class="fas fa-calendar-alt"></i>
</div>
</div>
</div>
</div>
The date format I get is MM/DD/YYYY. But the format I need is DD/MM/YYYY. How can I change this? If I can add attribute to the form field that is better instead of javascript of jquery.
You need to define the format once in jQuery.
// here assumed that `datepicker` is the class name for using date picker
$('.datepicker').datepicker({
format: 'DD/MM/YYYY'
});
// as per your code, you can update for specific id
$('#date').datepicker({
format: 'DD/MM/YYYY'
});
i'm working to make a simple booking form that redirect to an staah booking engine using GET (they dont have any apis or embedded widget).
the booking engine only accept "dd M yyyy" date format (eg 19 Apr 2018)
i have search SO but dont find any working solution, recently i found working fiddle and i have edit that fiddle for my need (you would know what i want to achieve in the fiddle). you can see it here : https://jsfiddle.net/k5zookLt/1929/
but the problem is they have a different approach on the HTML code and i have tried to modifying the js code for my html but it doesn't work. i dont have any skill in javascript. i dont know why this fiddle doesn't work in my html code
my code
<div class="col-md-2 col-sm-3">
<div class="input-group date" >
<input type="text" class="jaraksmall sm-form-control form-control from " id="from" name="from" required>
</div>
</div>
<div class="col-md-2 col-sm-3">
<div class="input-group date">
<input type="text" class="jaraksmall sm-form-control form-control to" id="to" name="to" required>
</div>
fiddle html code :
<div class="line col-sm-4">
<div class="form-group">
<label>First check in:</label>
<input type="text" class="form-control form-control-1 input-sm"placeholder="CheckIn" >
</div>
<div class="form-group">
<label>First check out:</label>
<input type="text" class="form-control form-control-2 input-sm" placeholder="CheckOut">
</div>
</div><!--line-->
how to make the js code from fiddle working well in my html code?
sorry for my bad english
That's because selector for .each and selector to find input element is not finding the required element. You need to :
1) to remove each statement.
2) modify datepicker input element selectors to use classes that you have added(to and from).
var startDate = new Date();
var fechaFin = new Date();
var FromEndDate = new Date();
var ToEndDate = new Date();
$(".from").datepicker({
autoclose: true,
startDate: "+0d",
format: 'd M yyyy'
}).on('changeDate', function(selected){
startDate = new Date(selected.date.valueOf());
startDate.setDate(startDate.getDate(new Date(selected.date.valueOf()))+1);
$('.to').datepicker('setStartDate', startDate);
});
$('.to').datepicker({
autoclose: true,
format: 'd M yyyy'
}).on('changeDate', function(selected){
FromEndDate = new Date(selected.date.valueOf());
FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
$('.from').datepicker('setEndDate', FromEndDate);
});
Working Demo
You can also replace the html code as below
<div class="line" style="width:100%">
<div class="col-md-2 col-sm-3" style="display: inline-block">
<div class="input-group date" >
<input type="text" class="jaraksmall sm-form-control form-control-1 form-control from " id="from" name="from" required>
</div>
</div>
<div class="col-md-2 col-sm-3" style="display: inline-block">
<div class="input-group date">
<input type="text" class="jaraksmall sm-form-control form-control-2 form-control to" id="to" name="to" required>
</div>
</div>
</div>
jsfiddledemo
I have the below code, how can I hide the calendar when I pick the month?
<div class="col-lg-3 col-sm-3" id="div_monthly_cal" style="display:none;">
<div data-date-minviewmode="months" data-date-viewmode="months" data-date-format="mm-yyyy" data-date="" class="input-append date dpMonths" id="dtpk2">
<input name="month_pick" id="month_pick" type="text" value="<?php echo date('m-Y'); ?>" class="form-control" readonly="readonly" />
<span class="input-group-btn add-on">
<button class="btn btn-primary" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
If you are using jquery calendar, than you can use below code :-
$('#example1').datepicker().on('changeDate', function (ev) {
$('#example1').Close();
});
Update 1:
You can also use the autoclose option, shown below :-
$('#dp1').datepicker({
format: 'mm-dd-yyyy',
autoclose: true
});
Update 2: Another option
$('#dp1').datepicker()
.on('changeDate', function(ev){
$('#dp1').datepicker('hide');
});
The select date seem to be empty when I added startDate: '+1d' into the javascript. Otherwise, it is just displaying today's date. I need it to display one day ahead and in some situations, two days ahead as well.
Javascript below:
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: false,
startDate:'+1d',
dateFormat: 'dd-mm-yy'
}).datepicker('update', new Date());
HTML Code below:
<div class="form-group">
<div class="col-sm-2"></div>
<label for="inputName" class="col-sm-3 control-label">Select Date Range</label>
<div class="col-sm-4">
<div class='col-sm-6'>
<div class="form-group">
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
<input class="form-control" type="text" readonly id="start"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div id="datepicker2" class="input-group date" data-date-format="dd-mm-yyyy">
<input class="form-control" type="text" readonly id="end"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
</div>
</div>
you can use moment.js for this type of date/time manipulation
var tomorrow = moment().add(1, 'day').format('DD/M/YYYY');
outputs
03/11/2016
see jsbin:
here is the full working jsfiddle: https://jsbin.com/haxamaxaqe/edit?html,output
$('#txtDate').datepicker('setDate', "+1d");
So this is the markup of the datepicker:
<div class="form-group row">
<div class="col-xs-3 col-md-offset-9">
<label class="control-label">Pick Date</label>
<div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly="" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
Actually, it looks like this:
However, when I click the calendar icon there's no table-look-a-like date picker showing.
I've included the following css and js:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<script type="text/javascript"src="js/jquery-2.0.3.js"></script>
<script type="text/javascript"src="js/bootstrap.js"></script>
<script type="text/javascript"src="js/bootstrap-datepicker.js"></script>
I also have called the function at <head></head> and at the end of the <body></body> just to make sure. But, still no response when I click the button.
<script type="text/javascript">
$(document).ready(function() {
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
$(window).on('load',function(){
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
</script>
I have changed some of the CSS JS code because of the Bootstrap 3 updated code, source: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/
So, I want to have a table-look-a-like datepicker when I click the calendar button. Any help? Thanks.
I ran into a similar issue - in my case in the jQuery wiring $('#someid').datepicker() 'someid' was the id of the 'input' and where it should have been of the container div. which means - it worked when you click the input box but not the glyphicon button.
I have a working copy fiddle is here :
jsfiddle
The jsfiddle code is here : (Note: the reference to jQuery 2.0.2 and also the external reosurces tab in jsFiddle editor)
http://jsfiddle.net/Lro8kxjx/6/
<div class="col-xs-6 ">
<div class="form-group ">
<div class='input-group date' id='datepicker'>
<input type="text" id="processdate" class="form-control" placeholder="Processing Date..." name="processdate" /> <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
$(document).ready(function () {
$('#datepicker').datepicker({
startDate: '-180d',
endDate: '+1d',
autoclose: true
}); });