2016-11-22 11 views
0

私がしようとしているのは、Bootstrap Datetimepickerの日付を選択した後、入力フィールドに値がロードされるはずですが、その方法はわかりません。私のJSFiddleがあります。ブートストラップdatetimepickerから選択して入力フィールドに日付をロードする

は、これは私がすべての入力のためにそれを使用する必要がある、または他の言葉で、最も近い入力フィールドのDateTimePicker

$(function() { 
    $('.datetimepickerinline').datetimepicker({inline: true}); 
}); 

のための私のjQueryのです。

答えて

1

が希望のソリューションです:jsfiddle

$('.datetimepickerinline').on('change dp.change', function(e){ 
    $('input').val($(this).data('date')); 
}); 

がさらによりhere

を参照してください、私はあなたがmoment.js

を使いたいということに気づきました

カスタムフォーマットを使用して、このようなものを使用することができます。

$('.datetimepickerinline').on('change dp.change', function(e){ 
    $('input').val(moment($(this).data('date')).format('DD/MM/YYYY, h:mm')); 
}); 
+0

だけの素敵な作品:)感謝の男:) –

+0

どういたしまして! –

+0

私は複数の入力がある場合、それはすべての入力値に加算されます。それを変更するには? –

1

入力フィールドに 'datetimepickerinline'クラスを適用する必要があります。

<input id="" placeholder="press to show calendar" class="input datetimepickerinline"> 

このバイオリンを試してください: - あなたが入力フィールドに日付ピッカークラスを追加する必要がありますhttps://jsfiddle.net/ekm0on2a/11/

1

 <link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
     <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"> 

     <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
     <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
      <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
      <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> 

<div id="container"> 
<div class="my-example"> 
    <input id="datepicker" placeholder="press to show calendar" class="input input-datepicker"> 
    <div class="dropdown"> 
    <div class="datetimepickerinline"> 
    </div> 
</div> 
</div> 

</div> 

//スクリプトここ

$(function() { 
    $('#datepicker').datetimepicker({inline: true}); 
}); 
2

あなたは非常に多くの不必要なライブラリと呼ばれます。このブートストラップデートピッカーを試してみてください。あなたのためにこの作品が欲しいです。

$(document).ready(function(){ 
$('#datepicker').datepicker({ 
    format: 'dd/mm/yyyy', 
    autoclose: true, 
    todayHighlight: true, 
    forceParse: false, 
    }); 
}); 

demo

関連する問題