bootstrap-datepicker : how to close only when clicking outside - javascript

I want to make datepicker close only if click outside.
To prevent closing before clicking outside, I delete hide function like this:
$('#datepicker').data('datepicker').hide = function () {};
But if I do this, it's not able to close datepicker.
How do I fix this?
Code below:
<input type="text" name="datepicker" id="datepicker" class="form-control" value='<%=selectDate%>' onchange="hide()">
<script>
$('#datepicker').datepicker({
dateFormat : 'yyyy-mm-dd',
autoclose: false
});
$('#datepicker').data('datepicker').hide = function () {};
</script>

just add the class datetimepicker-input ej.
<input type="text" class=" datetimepicker-input" id="datetimepicker4" data-toggle="datetimepicker" data-target="#datetimepicker4" dir="auto" required="" readonly >
when de jquery is
$('#datetimepicker4').datetimepicker();
I found this page to explain the details https://tempusdominus.github.io/bootstrap-4

<input type="text" name="datepicker" id="datepicker" class="form-control" value='<%=selectDate%>' onchange="hide()">
<script>
$('#datepicker').datepicker({
dateFormat : 'yyyy-mm-dd',
autoclose: false
});
$('#datepicker').data('datepicker').hide = function () {};
</script>
on this code, onSelect func didn't work and couldn't use hide() func
so changed this into by using
.on("changeDate", function (e) {
$('.datepicker').show();
}
it worked for me

Related

onchange function is triggered twice

I want to use the values from a JQuery multi datepicker for a different purpose, but for some reason when I did a test on the values I got, I kept getting the same thing twice. Am I missing something?
My Code :
$('.date').datepicker({
multidate: true,
format: 'dd-mm-yyyy'
});
function printDates() {
var dates = document.getElementById("date_input").value;
console.log(dates);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js'></script>
<input type="text" name="dates" class="form-control date" id="date_input" placeholder="Pick the dates " onchange="printDates()">
Use changeDate insstead of onchange as below
$('.date').datepicker({
multidate: true,
format: 'dd-mm-yyyy'
})
.on('changeDate', function(e) {
printDates(); // `e` here contains the extra attributes
});
;
function printDates() {
var dates = document.getElementById("date_input").value;
console.log(dates);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js'></script>
<input type="text" name="dates" class="form-control date" id="date_input" placeholder="Pick the dates " >
https://bootstrap-datepicker.readthedocs.io/en/latest/events.html
Use the change event provided in bootstrap datepicker.

Datepicker - close when clicking outside

Datepicker doesn't close when clicking outside
and if I select 10/09 and current date is 10/ 11 and refresh browser,
then it shows current date 10/11 on <input> tag,
but the selected date on datepicker keep showing 10/09
How do I fix this?
My code is below:
<div class="form-inline" align="right">
<input type="text" name="datepicker" id="datepicker" class="form-control" value='<%=selectDate%>' onchange="hide()">
<script>
$input = $("#datepicker");
$('#datepicker').datepicker({
dateFormat: 'yyyy-mm-dd'
});
$input.data('datepicker').hide = function() {};
</script>
</div>
When I refresh the browser,
Does changing type="text" to type="date" work? Like this JSFiddle

Regarding a Date Picker in php/javascript

On add more click i am generating multiple date picker but its not working
please help me code is bellow
Html Code
<input type="text" name="end_date[]" class="form-control pull-right" id="datepicker" required>
<input type="text" name="start_date[]" class="form-control pull-right" id="datepicker1" required>
javascript code
$(function () { $("#datepicker").datepicker( {format: 'yyyy-mm-dd'}); });
$(function () { $("#datepicker1").datepicker({format: 'yyyy-mm-dd'}); });
As you have mention that you are creating dynamic text field so you have to use .on function:
Here is the solution:
$(function (){
$('body').on('focus',"#datepicker", function(){
$(this).datepicker({format: 'yyyy-mm-dd'});
});​
$('body').on('focus',"#datepicker1", function(){
$(this).datepicker({format: 'yyyy-mm-dd'});
});​
});
Feel free to ask if you have any query.

JQuery Datepicker: show on input group addon button click

I have the following div:
<div class="input-group">
<input type="hidden" id="datepicker">
<input type="text" id="input_date" class="form-control" value="" readonly='readonly'>
<span class="input-group-addon" id="input_btn_calendar"><i class="fa fa-calendar"></i></span>
</div>
And the following JQuery call:
var today = new Date();
$("#input_date").datepicker({
changeYear: false,
numberOfMonths: 1,
altFormat: "yy-mm-dd",
altField: "#datepicker",
minDate: today,
onSelect : function () {
var inputdate = $.datepicker.parseDate('yy-mm-dd', $("#datepicker").val());
}
}).datepicker("setDate",today);
This makes the datepicker appear correctly when I press the text field. However, I also want it to show up when I click the input_btn_calendar button inside the accompanying span.
I've tried this:
$("#input_btn_calendar").click(function() {
$("input_date").datepicker('show')
});
But unfortunately, that does nothing. What am I missing?
You have an invalid selector of $('input_date').
Try this instead,
$("#input_btn_calendar").click(function() {
$("#input_date").datepicker('show')
});

ChangeDate - Date Picker Bootstrap

I am trying to call ajax on DatePicker bootstrap changeDate event but after trying every possible way I am failed. Please help me. For testing I use console.log.
Script :
$( document ).ready(function() {
$('.date-picker').datepicker();
$('.date-picker').on('changeDate', function() {
var date = $('#date-picker').val();
console.log(123);
return false; // for testing...
});
});
HTML :
<p class="_50">
<label for="TitleID"><strong>Date </strong></label>
<input name="date-picker" id="date-picker" value="" class="date-picker"" type="text" class="required" readonly="readonly"/>
</p>
Be sure that the input has been loaded and then initialize the plugin.
Try on window.load:
$(window).load(function() {
$('.date-picker').datepicker().
.on('changeDate', function() {
// Your ajax call
});
});
Change "changeDate" to "change" simply:
<p>Date:
<input id="datepicker" type="text">
</p>
$("#datepicker").datepicker().on('change', function() {
alert("changed");
});
Demo Fiddle

Categories

Resources