Jeevan RL Jeevan RL - 16 days ago 6
HTML Question

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.

Answer

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