I would like to some specific days in the HTML calendar. But I am facing the problem like below. The calendar with the blue box is not allowed the changes. However, another calendar that is on the backside can be changed by JavaScript code. I wonder why I cannot change anything on the first calendar.
For example, the first day can be changed on the backside but cannot in the default calendar.
Here is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>The selected date is as follows: <input type="date" class="disableFuturedate"></p>
<script>
$(document).ready(function () {
var currentDate = new Date();
$('.disableFuturedate').datepicker({
format: 'dd/mm/yyyy',
autoclose:true,
firstDay :3
});
});
</script>
</body>
</html>
Related
Is it possible to change the dropdown height that shows the years in jQuery UI? In the snippet below you can see that when you click the years dropdown, it shows 20 items but it's too long. I could not find a way to shrink this dropdown because the package seem to override everything with JS
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Display month & year menus</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
I have this kind of bootstrap popover from W3 schools site and edited code for my situation (see onPopoverHtmlLoad() function):
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
Question is, how can I change HTML data content of popover after I hit
popover button/trigger, please? Is there some function like
onHtmlDomPopoverLoad?
I appreciate solutions in Javascript, but accept JQuery help too. I was looking for similar issues but didn't find anything yet.
You can replace onPopoverHtmlLoad with:
function onPopoverHtmlLoad(){
$("#inpopover_button").text("true")
}
And attach the event handler with:
$('[data-toggle="popover"]').on('shown.bs.popover', onPopoverHtmlLoad)
See the codepen: https://codepen.io/anon/pen/MxXwQe
read about bootstrap popover events here :
https://getbootstrap.com/docs/4.0/components/popovers/#events
$('#myPopover').on('hidden.bs.popover', function () {
// do something…
})
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover()
.on('shown.bs.popover', onPopoverHtmlLoad);
});
//how to ensure to run this function on popoverHtmlDomLoad?
function onPopoverHtmlLoad(){
document.getElementById("inpopover_button").innerHTML = "true"
}
</script>
</body>
</html>
My popup content variable looks like below and I would like to add the data source as an anchor tag(url) inside the popup content. I tried a lot but always get syntax error.
var popupContent = "<p class='infowindow'> Estimated Population in 2018 in the state of "+feature.properties.State+" was: " + feature.properties.Pop_2018 +"</p>";
Im not really sure what do you want. but may i guess i can help you with this solution.
var title = "Population Census";
var State="chicago";
var Pop_2018="3847599";
var Data_Source="http://worldpopulationreview.com/us-cities/chicago-population/";
var popupContent='Estimated Population in 2018 in the state of '+State+' was: '+ Pop_2018 +' DataSource: census.gov';
$('[data-toggle="popover"]').popover();
$("#popUp2").attr({"data-original-title": title, "data-content": popupContent});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
popup
</body>
</html>
I would like to create a simple web page, where user can select a picture by choosing date in datepicker. The picture filenames consist date string. For example: img-2018-06-24.png. So far, I could get work this datepicker example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<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>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
//selecting the button and adding a click event
$("#alert").click(function() {
//alerting the value inside the textbox
var date = $("#datepicker").datepicker("getDate");
alert($.datepicker.formatDate("dd-mm-yy", date));
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<p>Alert the value: <button id="alert">Alert!</button>
</body>
</html>
which popups the selected date after clicking on the button. Instead, I would like to put a picture according to selected date. So, I need to somehow pass the date to filename string and use it in :
<img src= filename alt="myimage">
But, so far no luck...
Does following code work?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<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>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
//selecting the button and adding a click event
$("#alert").click(function() {
//alerting the value inside the textbox
var date = $("#datepicker").datepicker("getDate");
if(date) {
var imgSrc = 'img-' + $.datepicker.formatDate("dd-mm-yy", date) + '.png';
$('#show-image').show().attr('src', imgSrc);
}
});
});
</script>
</head>
<body>
<img src='' alt="myimage" id="show-image" style="display:none;">
<p>Date: <input type="text" id="datepicker"></p>
<p>Alert the value: <button id="alert">Alert!</button>
</body>
</html>
You need to set src attribute of img inside the click event like this -
$("img").attr("src",$.datepicker.formatDate("dd-mm-yy", date));
If you want to change the alt attribute as well, you can do it the same way -
$("img").attr("alt",$.datepicker.formatDate("dd-mm-yy", date));
See working Fiddle
This how you can add src on image
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<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>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker(); //selecting the button and adding a click event
$("#alert").click(function() { //alerting the value inside the textbox
var date = $("#datepicker").datepicker("getDate");
alert($.datepicker.formatDate("dd-mm-yy", date));
var src= $.datepicker.formatDate("dd-mm-yy", date);
$("#image").attr("src",src+".jpg").show();
});
});
</script> </head> <body>
<img id="img" src="" style="display:none;">
<p>Date: <input type="text" id="datepicker"></p> <p>Alert the value: <button id="alert">Alert!</button> </body> </html>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<script>
$( function() {
$( "#datepicker" ).datepicker({ dateFormat: 'yy/mm/dd' });
} );
</script>
<script language="JavaScript">
TargetDate ="2016/11/25";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "Expired!";
</script>
<body>
<h1>My First JavaScript</h1>
<p>Date: <input type="text" id="datepicker"></p>
<script language="JavaScript" src="//scripts.hashemian.com/js/countdown.js"></script>
</body>
</html>
I want date picker as input to countdown days.(If user selects the date from date picker,that should be an input for countdown).I don't want to put date manually in countdown.Please help me out.I would appreciate for your good solutions.
You can't do this because the library countdown.js you are using is written in such a way that even if you change the content of targetDate it will not affect the timer. because targetDate is set on page load. so only solution is to bring the contents of countdown.js to your file and change it accordingly. I suggest you have to use any other(good) library or write your own from scratch.
jQuery.countdown is an easy to use simple jquery plugin for the same. I have created an example for you as per your requirement.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
<script>
$(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker({ minDate:1,dateFormat: 'yy/mm/dd' });
});
// on changing date initilize the countdown again
$("#datepicker").change(function(){
init($(this).val());
})
function init(dt){
$('#clock').countdown(dt).on('update.countdown', function(event) {
var $this = $(this).html(event.strftime(''
+ '<span>%-w</span> week%!w '
+'<span>%-d</span> day%!d '
+ '<span>%H</span> hr '
+ '<span>%M</span> min '
+ '<span>%S</span> sec'));
});
}
//initilize counter on load with some default date
init("2016/11/25");
});
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p>Date: <input type="text" id="datepicker"></p>
<!-- div which shows the result -->
<div id="clock"></div>
</body>
</html>
If you want more customization please have a look at the documentation.
http://hilios.github.io/jQuery.countdown/documentation.html
Datepicker has onSelect event, you can do your stuff there eg:
$("#sample").datepicker({
picker: "#paymentDate",
onSelect : function(y, m, i){
// your code goes here
},
});
You didn't made an event for date selection, I have edited the code, hope things are upto your expectations. (Y)
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<body>
<script>
$( function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy/mm/dd',
onSelect: function()
{
var date=$(this).val().toString();
//alert('on select triggered '+date);
TargetDate = date;
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "Expired!";
document.write("<script src='//scripts.hashemian.com/js/countdown.js'><\/script>");
},
});
});
</script>
<h1>My First JavaScript</h1>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>