日期选择器作为倒计时的输入

时间:2016-11-23 06:16:19

标签: javascript jquery html



result<-data.frame(table(DATA[!is.na(DATA$col1),]$col2))
result

  Var1 Freq
1   AT    1
2  AT1    0
3  AT2    1
4  AT3    2
5  AT4    4
&#13;
&#13;
&#13;

我希望日期选择器作为倒计时天的输入。(如果用户从日期选择器中选择日期,那应该是倒计时的输入)。我不想手动将日期倒计时。请帮帮我我很感激你的好解决方案。

3 个答案:

答案 0 :(得分:1)

Datepicker有onSelect事件,你可以在那里做你的东西,例如:

$("#sample").datepicker({
    picker: "#paymentDate", 
    onSelect : function(y, m, i){  
        // your code goes here 
    },
});

答案 1 :(得分:1)

您无法执行此操作,因为您使用的库countdown.js是以这样的方式编写的,即使您更改targetDate的内容,它也不会影响计时器。因为targetDate是在页面加载时设置的。因此,只有解决方案是将countdown.js的内容带到您的文件中并相应地进行更改。我建议您必须使用任何其他(好)库或从头开始编写自己的库。

jQuery.countdown是一个易于使用的简单jquery插件。我已根据您的要求为您创建了一个示例。

&#13;
&#13;
<!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>    
&#13;
&#13;
&#13;

如果您想要更多自定义,请查看文档。

http://hilios.github.io/jQuery.countdown/documentation.html

答案 2 :(得分:0)

你没有为日期选择做过活动,我编辑了代码,希望事情符合你的期望。 (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>