<!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>
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>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 DatePicker</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input id="datepicker" width="276" />
<script>
$('#datepicker').datepicker({
startDate: '+2d'
});
</script>
</body>
</html>
I want to use satrtDate functionality but I don't want to change the CDN link.
How can I do this?
So, you want to select your date from after two days. Here is your solution
$("#datepicker").datepicker({
minDate: function () {
var date = new Date();
date.setDate(date.getDate() + 2);
return new Date(date.getFullYear(), date.getMonth(),
date.getDate());
},
});
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>
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>
How to disable the next date. I can select the previous date but not the next coming dates. Can any one help me? This is the code I am using.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
You can disable selectability of future dates by specifying 0 for the maxDate option.
Documentation
$( "#datepicker" ).datepicker({
maxDate: 0 // 1 for tomorrow, 2 for day-after, and so on..
});
This will work:
$("#datepicker").datepicker({dateFormat: 'yy-MM-dd',maxDate: 0 });