日付ピッカーが入力日をカウントダウンするように私は、日付ピッカーをしたい

<!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ドン（ユーザーが日付ピッカーから日付を選択した場合、それはカウントダウンのために入力する必要があります）私はあなたの良い解決に感謝したいと思います。

出典

2016-11-23 Jeevan RL

あなたはこれを行うカントタイマー。 targetDateはページの読み込み時に設定されるためです。唯一解決策は、 'countdown.js'の内容をファイルに持ってきてそれに応じて変更することです。 –

Thanx.Iは、ユーザー入力のためのカウントダウン日に他のコードがありますか？ –

私は例を挙げて私の答えをチェックしてください。 –

あなたはこれを行うことはできませんので、あなたは内容を変更してもあるように書かれている使用しているライブラリcountdown.jstargetDateの場合、タイマーには影響しません。ページロード時に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>

あなたはより多くのカスタマイズをしたい場合はドキュメントを見てください。

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

出典

2016-11-23 08:08:47

トンのおかげで使用することができます。それは多くの助けになりました。 –

私はinit（ "/ /"）から開始すべきカウントダウンの日は欲しくない。しかし、私はdatepickerからユーザーが選択した日付から開始する必要があるカウントダウンをしたい。事前のおかげで –

日付ピッカーがにonSelectイベントがあり、あなたがそこに自分のものを行うことができます。例：

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

出典

2016-11-23 06:20:56 Ashish451

日付ピッカーが正常に動作しています。ユーザーが日付ピッカーからカウントダウン「TargetDate」に入力する必要がある日付を選択するとどうなりますか？ –

基本的に、ユーザーがDatepickerで選択したDateを選択する必要があります。あなたがそれを持った後、ロジックを追加することができます。つまり、カウントダウンの入力として渡すことができます。それを行うには、onSelectイベント – Ashish451

あなたは日付選択のためのイベントを行っていなかった、私は、コードを編集した、希望のものは、あなたの期待件までです。使用しているcountdown.js`ライブラリは `あなたがtargetDateの内容を変更しても、それは影響を与えないような方法で書かれているので、（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>

出典

2016-11-23 11:58:16

日付ピッカーが入力日をカウントダウンするように私は、日付ピッカーをしたい

答えて

関連する問題