2017-08-12 19 views
0

私は、ブートストラップのdatepickerコンポーネントから日付を選択し、選択した値をローカルストレージに保存したいと考えています。ユーザが選択を完了すると、ボタンを選択して、ajax呼び出しがローカルストレージを使用するようにすることができます。ブートストラップ日付ピッカーとローカルストレージ

現時点では、ローカルストレージに値を設定するためにdatepickerコンポーネントを取得できません。ユーザーがisを選択し、ユーザーの選択が入力フィールドの値になると、日付ピッカーコンポーネントがレンダリングされます。ここで

マークアップです:

<form> 
    <div class="form-group"> 
     <label for="edge-name" class"control-label">Start:</label> 
     <input type="text" class="form-control" id="filterStart"> 
    </div> 
</form> 

そして、私はジャバスクリプトを通して様々な場所ではconsole.logを挿入したが、コードは私がそのためのコンソールへの書き込みを行うことはありませんジャバスクリプト

$(document).ready(function(){ 
    $('#filterStart').datepicker(); 
    $('#filterStart').on('changeDate' function(){ 
     var newValue = $('#filterStart').datepicker('getFormattedDate') 
     localStorage.setItem('filterStart',newValue); 
     }); 

それがローカルストレージに書き込まれていないことを知っている。私はコードの他の部分を使用しているので、ローカルストレージが動作していることを知っています。

さらに、この方法を改善する方法についてのご意見をいただければ幸いです。

答えて

1

あなたはこのbootstrap-datepickerを使用している場合は、次のjsfiddleに見てみることができます。

$('#filterStart').datepicker(); 
$('#filterStart').on('changeDate', function (e) { 
    var newValue = $('#filterStart').datepicker('getFormattedDate') 
    localStorage.setItem('filterStart', newValue); 
}); 
$('#btn').on('click', function(e) { 
    $('#logMsg').val('Value saved in local storage is: ' + 
    localStorage.getItem('filterStart')); 
}) 
+1

これは私が使用答えが、ルートであります私のコードが正常に機能しない原因は、自分のhtmlに以下を含めるのを忘れたことです:https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js – ForgottenKahz

1

メソッド 'getFormattedDate'は存在しますが、そのための標準getDateメソッドがあります。ちなみに、newValueの定義行にセミコロンがありません。

0

changeDateイベントで新しい日付ピッカーをインスタンス化している可能性があります。あなたは.dataからフォーマットされた日付を取得してみてください:

var newValue = $('#filterStart').data('datepicker').getFormattedDate('yyyy-mm-dd'); 
関連する問題