Javascript 通过在日期选择器中选择日期来选择图片_Javascript_Jquery_Html

Javascript 通过在日期选择器中选择日期来选择图片

javascript jquery html

Javascript 通过在日期选择器中选择日期来选择图片,javascript,jquery,html,Javascript,Jquery,Html,我想创建一个简单的网页，用户可以通过在datepicker中选择日期来选择图片。图片文件名由日期字符串组成。例如：img-2018-06-24.png。到目前为止，我可以在这个日期选择器示例中找到工作： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Default functionality<

我想创建一个简单的网页，用户可以通过在datepicker中选择日期来选择图片。图片文件名由日期字符串组成。例如：img-2018-06-24.png。到目前为止，我可以在这个日期选择器示例中找到工作：

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


jQuery UI日期选择器-默认功能
$（函数（）{
$（“#日期选择器”）.datepicker（）；
//选择按钮并添加单击事件
$（“#警报”）。单击（函数（）{
//警告文本框内的值
变量日期=$（“#日期选择器”）。日期选择器（“getDate”）；
警报（$.datepicker.formatDate（“dd-mm-yy”，日期））；
});
});
日期：
警告值：警告！

单击按钮后弹出所选日期。相反，我想根据选定的日期放一张图片。因此，我需要以某种方式将日期传递给文件名字符串，并将其用于：

但是，到目前为止没有运气

这是如何在图像上添加src的

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


jQuery UI日期选择器-默认功能
$（函数（）{
$（“#datepicker”）.datepicker（）；//选择按钮并添加单击事件
$（“#警报”）。单击（函数（）{//警报文本框内的值
变量日期=$（“#日期选择器”）。日期选择器（“getDate”）；
警报（$.datepicker.formatDate（“dd-mm-yy”，日期））；
var src=$.datepicker.formatDate（“dd-mm-yy”，日期）；
$（“#image”）.attr（“src”，src+“.jpg”）.show（）；
});
}); 
日期：警报值：警报！

您需要在单击事件中设置

img

的

src

属性，如下所示-

$("img").attr("src",$.datepicker.formatDate("dd-mm-yy", date));

如果还想更改alt属性，可以使用相同的方法-

$("img").attr("alt",$.datepicker.formatDate("dd-mm-yy", date));

参见工作

以下代码是否工作

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


jQuery UI日期选择器-默认功能
$（函数（）{
$（“#日期选择器”）.datepicker（）；
//选择按钮并添加单击事件
$（“#警报”）。单击（函数（）{
//警告文本框内的值
变量日期=$（“#日期选择器”）。日期选择器（“getDate”）；
若有（日期）{
var imgSrc='img-'+$.datepicker.formatDate（“dd-mm-yy”，date）+'.png'；
$（'#show image'）.show（）.attr（'src'，imgSrc）；
}
});
});
日期：
警告值：警告！