how can i close Bootstrap Datepicker on double click? - javascript

$(function(){
$(".datepicker").datepicker();
$(document).on("dblclick", ".datepicker td.day", function (e) {
document.querySelector("#log").innerText += "triggered !\n"
});
});
document.querySelector("#log").innerText += "dblclick Logs here"
.datepicker{
cursor :pointer;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<div id="log"></div>
<input type="text" class="datepicker">
The dblclick event shows on in the chrome event listeners,for some reason does not fire.There is also no dblclick event in the documentation. Could somebody please give me a direction. As I would like to close the datepicker on double click.

Related

KendoUI datetime picker - Calling an on click function when previous/next month is selected

I'd like to trigger an on click event when the user clicks the previous/next month buttons on the Kendo UI date time picker.
The documentation tells me there isn't an event that is triggered when this happens, so I need to make an on click event.
The buttons don't have id's but do have unique classes: k-nav-prev for the previous month button and k-nav-next for the next month button.
However, when I try to put an alert for the on click event for those classes nothing happens.
Would anyone know what I am doing wrong, or if there is a better way to trigger an event when these buttons are clicked?
I have attached a code sample. Thanks for any help.
$(document).ready(function() {
// create DateTimePicker from input HTML element
$("#datetimepicker").kendoDateTimePicker({
value: new Date(),
dateInput: true
});
$(".k-nav-prev").click(function() {
alert("previous month button clicked");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/datetimepicker/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<h4>Remind me on</h4>
<input id="datetimepicker" title="datetimepicker" style="width: 100%;" />
</div>
<p id="test">
Hello world
</p>
</div>
</body>
</html>
The thing is that Kendo is already binding to clicks to those links and intercepting them. You need to use capture to well, capture the event before they do.
The following code will do it, but sometimes it will capture the click on the a.k-nav-prev element, and sometimes on the span with the icon inside:
document.addEventListener('click', function(e) {
console.log(e);
if (!e.target.classList.contains("k-nav-prev") && !e.target.parentNode.classList.contains("k-nav-prev")) {
return;
}
console.log("Do your thing here");
}, true);
Demo: https://dojo.telerik.com/#GaloisGirl/etEwOYEp
More on capture here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Materialize Css Timepicker onSelect doesn't work

I'm trying to use Timepicker of materializecss. I need to use the onSelect event but nothing happens.
This is the html :
<input type="text" name="time" class="timepicker">
This is the javascript :
$(document).ready(function(){
$('.timepicker').timepicker({
onSelect:function(hour,minute){
alert(hour+" "+minute);
}
});
});
The timepicker is working very well but when I select time and hour, nothing happens. No error in console and no alert shown...
I tried with the onCloseEnd event but nothing happens too.
I need help !
Seems the documentation is wrong. I checked the materialize.js and found that timepicker didn't bind any event such as onOpenStart, onSelect and onCloseEnd but datepicker did.
This snippet shows that the same event but only binding to datepicker.
$('.timepicker').timepicker({
onSelect: function(time) {
console.log(time)
}
});
$('.datepicker').datepicker({
onSelect: function(time){
console.log(time)
}
});
.timepicker-modal,
.datepicker-modal{
top: -5% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>
<input type="text" name="time" class="timepicker">
<input type="text" class="datepicker">
Here's a demo, showing that none of the events mentioned in the documentation are triggered (They even didn't be registered cause there is no event options in timepicker.)
timepicker
datepicker
$('.timepicker').timepicker({
onOpenStart: function(){
console.log('onOpenStart')
},
onOpenEnd: function(){
console.log('onOpenEnd')
},
onCloseStart: function(){
console.log('onCloseStart')
},
onCloseEnd: function(){
console.log('onCloseEnd')
},
onSelect: function(){
console.log('onSelect')
},
});
$('.timepicker').on('change', function() {
console.log('change: ' + this.value)
})
.timepicker-modal{
top: -5% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>
<input type="text" name="time" class="timepicker">
The only way success is using change() event.
I try this time picker with on change and doesn't work too
because the input value is equal ''.

JQuery datepicker on click on label

I want a JQuery datepicker to show when I click on a specific label. I have a HTML like this:
<label id="kezd_datum_label">Data</label><input style="display:none;" id="kezd_datum" />
And some following JQueries like these:
$( function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
} );
$("#kezd_datum_label").click(function() {
$("#kezd_datum").datepicker("show");
});
And
$(document).ready(function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
$("#kezd_datum_label").click(function() {
$("#kezd_datum").focus();
});
});
I tried to copy the codes from here jQuery datepicker on click of icon, and it was accepted and everyone says it works, but it does not for some reason. However, if I make input visible, the datepicker appears as it should. Just not if I click on that label.
If a put in a window.alert("something"); into any of the click functions, they also run and appear.
Try to replace display: none to opacity: 0;width: 0 to show the input and use for to point to your input.
$(document).ready(function() {
$("#kezd_datum").datepicker();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="kezd_datum" id="kezd_datum_label">Data</label><input style="opacity: 0; width: 0" id="kezd_datum" />
Well, I just want to clarify why your previous code was not working and how to make it work.
You're doing $("#kezd_datum").focus(); while you div is hidden. So you can't focus on a hidden element. And showing datapicker for that element again. As a result you got nothing.
You just need to show it first and then show the datapicker and this would work
Cheers!
$(document).ready(function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
});
$( function() {
$( "#kezd_datum" ).datepicker({
dateFormat:"yy-mm-dd"
});
} );
$("#kezd_datum_label").click(function() {
$("#kezd_datum").show().focus();
setTimeout(()=>{
$("#kezd_datum").datepicker("show");
},20)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" />
<label id="kezd_datum_label">Data</label><input style="display:none;" id="kezd_datum" />

JQueryUI datepicker with both input and date picker opened

I want to have a JqueryUI date picker with both its input text area and the calendar opened.
I know the two following options:
Use an input element and then the calendar is opened after the input field is clicked.
Use a div element and then there is no input field at all.
How can I get option 1, but with the calendar opened by default?
jsfiddle
$(function() {
$("#inputDatepicker").datepicker();
$("#divDatepicker").datepicker();
});
<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<p>Date with input:
<input type="text" id="inputDatepicker">
</p>
<p>Date with div:
<div id="divDatepicker">
</p>
I can't show you with a fiddle (somehow, this feature does not work) but try to set the focus to the input-field.
Like this
$(document).ready(function() {
$(function() {
$("#inputDatepicker").datepicker();
$("#inputDatepicker").focus();
});
});
Cheers
R
You can use the altField to do it
$(function() {
$("#divDatepicker").datepicker({
altField: '#inputDatepicker'
});
});
<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<input type="text" id="inputDatepicker">
<div id="divDatepicker"></div>
Using altField and onchange event:
http://jsfiddle.net/sexaw2po/
function inputDatepickerChanged(val) {
$("#divDatepicker").datepicker("setDate", new Date(val));
}

How to remove the element's event handler and set it back?

I am learning JQuery and facing some problem.
<html>
<head>
<link rel="stylesheet" href="css/puzzle.css" type="text/css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/test.js" type="text/javascript"></script>
</head>
<body>
<div id="parent">
link1
link2
link3
</div>
<body>
</html>
$(
function() {
$("#parent").on("click", "a", function() {
linkClick(this);
});
function linkClick(link) {
$("#parent a").first().off("click");
console.log(link);
}
}
)
Question1: When the user clicks one of the links, can I remove the link's event haneler?
Question2: If the Question1 has been soled, can I add the onclick event handler back to "the specified link" without affecting other links?
Thanks for your reading.
==
I tried to use $("#parent a").first().off("click"); to unbind the first link's event handler.
But no matter how many times I click the first link, this console still prints data.
How do I remove the link's event handler and then add it back in a few seconds???
Use off
Remove event:
$( "#parent a").first().off( "click" );
Add Event:
$( "#parent a").first().on( "click", function(){
//click event code
})
Use:
//Remove click event for first element
$( "#parent a").first().off("click");
//Bind new event to element:
$( "#parent a").first().bind('click',function(){
//click event code
})

Categories