We Keep Coding

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 ''.

Why is that Jquery for datepicker is not closing onclick, outside of it?

I use datepicker Jquery to select date and below is my code:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery( "#datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
jQuery("#datepicker").blur(function(e) {
jQuery(this).datepicker("hide");
});
});
</script>
It works when I use .blur function. But, I am not able to change the month. When I change the month, it hides. How can I resolve this problem ?

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

Toggle onClick jquery

I am new to web-designing. I have this sample code which toggles a div when we click anywhere on the window.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
</script>
</body>
</html>
How can I add an image and change the image for show and hide? I have an '>' icon. When I click on it, div should appear and '>' should change to '<'

$('#buttonid').on('click', function () {
$('#toggle').toggle('slide');
});
add a button with an unique id like this
<button id="buttonid">click to toggle </button>

I think you can do as follow
<img src='source:<' id='imageid' data-othersource='source:>' />
You can declare an image like that with the two sources and then switch the src in jQuery.
//wait for the document to be fully loaded to execute
$(document).ready(function(){
//use event delegation
$(document).on('click','#imageid',function(){
var $this= $(this);
$('#toggle').toggle('slide',function(){
//swap src of the image on toggle is completed
var imgsrc = $this.attr('src');
$this.attr('src',$this.data('othersource'));
$this.data('othersource',imgsrc)
});
});
});
This way if for some reasons, you have to change the images, you don't need to get back to script, you just need to change the html.
http://jsfiddle.net/AmqcY/
Note: event delegation is not necessary in this case, but still i think it's important you read about that part for furthur use.

instead of registering the click handler to document, register it to a button
if you have a button with id mybutton then
//dom ready handler so that the script is executed after the dom is loaded
jQuery(function(){
//register the click handler to an element with id mybutton
$('#mybutton').click(function () {
$("#toggle").toggle("slide");
});
})
Demo: Fiddle

By id:-
<button id="button_id">click to toggle </button>
$('#button_id').click(function() {
$( "#toggle" ).toggle( "slide" );
});
By class:-
<button class="button_class">click to toggle </button>
$('.button_class').click(function() {
$( "#toggle" ).toggle( "slide" );
});

Try like this
$('#yourbuttonId').click(function () {
$("#toggle").toggle("slide");
});

Demo
Try this Code
$('body').on('click',function(){
$('#toggle').toggle('slide');
});

JavaScript works in JSFiddle but not in html file on a browser

I'm trying hook up a checkbox check event with additional events (such as a dialog display). However, I can't seem to get the click event working when I'm testing my html file in a browser. It does work in JSFiddle, though, which is very strange.
http://jsfiddle.net/rEgAX/1/
My HTML:
<label><input type="checkbox" name="checkbox-0" id="myCheckbox" /> Completed </label>
My JavaScript:
var countChecked = function() {
if ($("#myCheckbox").is(":checked"))
{
alert('checked!');
}
};
$( "input[type=checkbox]" ).on( "click", countChecked );
The html file that I wrote:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
// On clicking of the completed checkbox, we want to pop up a dialog for confirmation.
var checkboxClicked = function() {
if ($("#myCheckbox").is(":checked")) {
alert('checked!');
console.log('checked!')
}
};
$( "input[type=checkbox]" ).on( "click", checkboxClicked );
</script>
</head>
<body>
<label><input type="checkbox" name="checkbox-0" id="myCheckbox" /> Completed </label>
</body>
</html>

You must place your code inside
$(document).ready(function(){
...
});
Since your script comes before your checkbox is rendered.
EDIT
You might run unto a problem with my first answer. Thanks to Omar's comment and reference
It should be this way rather than .ready() function:
$(document).on('pageinit') {
...
});

By default, jsFiddle will wrap your code in an load handler.
Try wrapping your code in:
$(window).load(function(){
var countChecked = function() {
if ($("#myCheckbox").is(":checked"))
{
alert('checked!');
}
};
$( "input[type=checkbox]" ).on( "click", countChecked );
});