select picture by choosing date in datepicker - javascript

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>

Related

Date picker as input to countdown

<!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>

Displaying Datepicker when i click the button

I would like to display the datepicker when i click on the button. I have tried but i couldn't make it work. I am using Materialize Css. I have tried to use input type text but i don't want it.
<div class="container">
<div class="row center">
<i>Date</i>
<button class="btn waves-effect waves-light datepicker" type="submit" name="action">PICK DATE</button>
</div>
</div>
jQuery:
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15
});
In order to show the datepicker from a button, you need to invoke the show option.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jDatapicker JQuery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
function show_dp(){
$( "#datepicker" ).datepicker('show'); //Show on click of button
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<button onclick="show_dp();">Show Datepicker</button>
</body>
</html>
Another option to make it so you don't need an input field:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jDatapicker JQuery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
function toggle_dp() {
dp = $("#datepicker");
if (dp.attr('datepicker')) {
dp.datepicker('destroy');
dp.removeAttr('datepicker');
} else {
dp.datepicker();
dp.attr('datepicker', 1);
}
}
</script>
</head>
<body>
<div id="datepicker"></div>
<button id="button" onclick="toggle_dp();">Toggle Datepicker</button>
</body>
</html>
I think a better way is to only show the picker when the button is clicked and not when the input is clicked. This enables the user to edit the input manually as well.
My trick is to use a hidden input to connect the picker to:
<div class="input-field datepicker-prefix">
<i class="material-icons prefix">perm_contact_calendar</i>
<input type="hidden" class="datepicker" />
<input />
</div>
And then setup the click even to show the picker:
$('.datepicker-prefix .prefix').click(function () {
$(this).parent().find('.datepicker').datepicker('open');
});
See my complete solution for both date and time pickers
https://codepen.io/dnote/pen/jXQNpg?editors=1010#0
You can use this code created by me
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jDatapicker JQuery</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

How to disable the date (tomorrow date) in jquery

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

My Jquery datepicker NOT working

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
My code is not working .when i click my input box that time the onclick calender not appear.I think there may be use onclick() function .But i can not . Please help me. :(
Here is a basic example and look at the script needed include both jQuery and jQuery-ui. (source: http://www.tutorialspoint.com/jqueryui/jqueryui_datepicker.htm)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-13" ).datepicker();
$( "#datepicker-13" ).datepicker("show");
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type="text" id="datepicker-13"></p>
</body>
</html>

Datepicker not working when using google api

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<!--<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" type="text/javascript"></script>-->
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
My date picker works if I comment out the ajax.google line. I thought the date picker is part of the jquery UI. what am I doing wrong or missing?
I obviously can't tell what's in your local jQuery files, but Google's copy of 1.8.18 works just fine:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<div class="demo">
<input type="text" id="datepicker">
</div>
http://jsfiddle.net/eqd4x1rq/2/

Categories