<!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>我想要日期选择器作为倒计时天数的输入。(如果用户从日期选择器中选择日期，那应该是倒计时的输入)。我不想在倒计时中手动输入日期。请帮帮我。我感谢您提供好的解决方案。
最佳答案
你不能这样做，因为你正在使用的库 countdown.js 是这样写的，即使你改变了 targetDate 的内容，它也不会影响定时器。因为 targetDate 是在页面加载时设置的。所以唯一的解决方案是将 countdown.js 的内容添加到您的文件中并相应地进行更改。我建议您必须使用任何其他(好的)库或从头开始编写自己的库。
jQuery.countdown 是一个易于使用的简单 jquery 插件。我已根据您的要求为您创建了一个示例。
<!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> 如果您想要更多自定义，请查看文档。
关于javascript - 日期选择器作为倒计时的输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40757322/