I am using multiDatesPicker for calendar which works fine with default calendar options.
In my case I am appending an extra span tag to calendar dates so after appending the span tag, it is not selecting the dates on click.
here is how I am appending the span tag
$(function() {
$('#custom-date-format').multiDatesPicker({
dateFormat: "y-m-d"
});
$('.ui-state-default').prepend($('<span>A</span> <span>B</span>'));
});
Demo
You have element <a class="ui-state-default">NUMBER</a> where datepicker script gets the value of this tag, i.e. NUMBER. When you add span elements into a tag, the content becomes invalid number, that's why date selection doesn't work on click. As solution you can play with css for example:
.ui-state-default::before {
content: 'A B ';
}
You could avoid using prepend($('<span>A</span> <span>B</span>')). Another thing, why are you using <span> when you can pick multidates without using it.
$(function() {
$('#custom-date-format').multiDatesPicker({
dateFormat: "y-m-d"
});
$('.ui-state-default');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<div id="page">
<div id="demos">
<ul id="demos-list">
<li class="demo">
<div id="custom-date-format" class="box"></div>
</li>
</ul>
</div>
</div>
Related
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
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" />
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));
}
I would like the popup to automatically set on and not have to click to make the event. Can you help?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#open').click(function(){
// enter code here
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
return false;
});
$('#close').click(function(){
$('#popup').fadeOut('slow');
$('.popup-overlay').fadeOut('slow');
return false;
});
});
</script>
</head>
<body>
<div id="content">
<div id="column-right">click aqui</div>
</div>
<div id="popup" style="display: none;">
<div class="content-popup">
<div class="close"><img src="images/close.png"/></div>
<div> enter code here
<h2>Contenido POPUP</h2>
</div>
</div>
Means whenever the page is loaded the pop up automatically opens without any client side event.
Just take the code out of the click() event:
And remove the div with .popup-overlay class. It's useless
$(document).ready(function(){
$('#popup').fadeIn('slow');
$('#popup').height($(window).height());
});
You may need to fade the #popup also.
$(document).ready(function(){
$('#popup').fadeIn('slow');
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
});
I have the java script code.But i want to add some thing more.
I would like to highlight a date & add message to that date when I drag the mouse on it.
the code is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DatePicker</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="Js/JScript1.js" type="text/javascript"></script>
<script src="Js/JScript2.js" type="text/javascript"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
$("#datepicker").datepicker({ minDate: 0 });
// $("#datepicker").datepicker({ minDate: -60, maxDate:0 });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 220px">
<div style="height: 191px; width: 1156px">
<asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
</div>
</div>
</form>
</body>
</html>
I want it should display a message on the date. Ex:- We declared that 15th july is a holiday.When I hover the mouse on the 15th in the calender,a small message will display(ex:-today is holiday)when I remove the mouse the message will dis appear.
You should handle the hover event of the element you want to drag your cursor on. In the handler you can change the style of other elements, as you need.