web-dev-qa-db-ja.com

ブートストラップ日時ピッカーで時間を無効にする

私は自分のWebアプリケーションで、PHP/HTML5とJavaScriptで作られたブートストラップの日時ピッカーを使っています。私は現在ここから1つを使用しています。 http://tarruda.github.io/bootstrap-datetimepicker/

私は時間なしでコントロールを使用しているとき、それは動作しません。空白のテキストボックスが表示されるだけです。

日付時刻ピッカーから時刻を削除したいだけです。これに対する解決策はありますか？

<div class="well">
    <div id="datetimepicker4" class="input-append"> 
        <input data-format="yyyy-MM-dd" type="text"></input> 
        <span class="add-on"> 
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> 
        </span> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(function() { 
        $('#datetimepicker4').datetimepicker({ pickTime: false }); 
    }); 
</script>
javascripthtmltwitter-bootstrap
90
Chirag Sudra

下のスニペットをチェックしてください

<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker4'>
                <input type='text' class="form-control" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function() {              
           // Bootstrap DateTimePicker v4
           $('#datetimepicker4').datetimepicker({
                 format: 'DD/MM/YYYY'
           });
        });      
    </script>
</div>

ドキュメントやその他の機能の詳細については、 http://eonasdan.github.io/bootstrap-datetimepicker/ を参照してください。これでうまくいくはずです。

国際化をサポートするように更新

Moment.jsのローカライズされたフォーマットを使う：

  • 日付のみのL
  • 時間限定のLT
  • 日付と時刻のL LT

Moment.jsのドキュメントで他のローカライズされた形式を参照してください（ https://momentjs.com/docs/#/displaying/format/ ）

121
Ck Maurya

ここに掲載されているすべての解決策を試してみましたが、どれもうまくいきませんでした。私は自分のjQueryでこのコード行を使用して時間を無効にすることができました：

$('#datetimepicker4').datetimepicker({
    format: 'YYYY-MM-DD'
});

これはフォーマットを日付のみに設定し、時間を完全に無効にします。お役に立てれば。

40
Celt

これはのためです： EonasdanのブートストラップDatetimepicker

まず最初に<input>にid属性を指定してから、その<input>に対して直接datetimepickerを初期化します（親コンテナに対してではありません）。

<div class="container">
  <input data-format="yyyy-MM-dd" type="text" id="datetimepicker"/>
</div>
<script type="text/javascript">
  $(function() {
    // Bootstrap DateTimePicker v3
    $('#datetimepicker').datetimepicker({
      pickTime: false
    });
    // Bootstrap DateTimePicker v4
    $('#datetimepicker').datetimepicker({
      format: 'DD/MM/YYYY'
    });
  });
</script>

V3の場合：Ck Mauryaの答えに反して：

  • pickDate: falseは日付を無効にし、時間を選ぶことだけを許可します
  • pickTime: falseは時間を無効にして日付の選択のみを許可します（これがあなたが望むものです）。

V4の場合：Bootstrap Datetimepickerは、時間コンポーネントが存在するかどうかを判断するためにフォーマットを使用するようになりました。時間コンポーネントが存在しない場合は、時間を選択することはできません（そして時計アイコンを非表示にする）。

25
Peter Ilfrich

私はDateTimePickerによる更新のためにこれを理解しようとするのにしばらく時間を費やしました。 moment.jsのドキュメント に基づいた形式で入力します。あなたは他の答えが示したものを使うことができます：

$('#datetimepicker').datetimepicker({ format: 'DD/MM/YYYY' });

あるいは、moment.jsが提供するローカライズ形式のいくつかを使って、日付だけを指定することもできます。

$('#datetimepicker').datetimepicker({locale: 'fr', format: 'L' });

これを使用すると、 ロケールに基づいて時刻（LT）または日付（L）のみを表示 を実行できます。 datetimepickerのドキュメントは、それがmoment.jsフォーマットで提供された入力（日付または時間のみ）に自動的に適応することを私には明らかにしていませんでした。これがまだ見ている人のために役立つことを願っています。

19
ishmael62
$('#datetimepicker').datetimepicker({ 
    minView: 2, 
    pickTime: false, 
    language: 'pt-BR' 
});

それもあなたのために働くなら試してください

9
ImBS

このようにdatetimepickerを初期化します

無効時間について

$(document).ready(function(){
    $('#dp3').datetimepicker({
      pickTime: false
    });
});

無効日について

$(document).ready(function(){
    $('#dp3').datetimepicker({
      pickDate: false
    });
});

日付と時刻の両方を無効にする

$(document).ready(function(){
   $("#dp3").datetimepicker('disable'); 
});

疑問がある場合は、次のドキュメントを参照してください。

http://eonasdan.github.io/bootstrap-datetimepicker/#options

6
muni
<div class="container">
  <input type="text" id="datetimepicker"/>
</div>

<script type="text/javascript">
  $(function() {
    // trigger datepicker
    $('#datetimepicker').datetimepicker({
       pickTime: false,
        minView: 2,
        format: 'dd/mm/yyyy',
        autoclose: true,
    });
  });
</script>
5
wolver

これは日付のみを表示します。

$('#myDateTimePicker').datetimepicker({
        format: 'dd.mm.yyyy',
        minView: 2,
        maxView: 4,
        autoclose: true
      });

主題についての詳細 ここ

3
FrenkyB
    $(function () {
        $('#datetimepicker9').datetimepicker({
            viewMode: 'years',
            format: 'DD/MM/YYYY' /*Add this line to remove time format*/
        });
    });
2
Paul
<script type="text/javascript">
        $(function () {
                  $('#datepicker').datetimepicker({
                     format: 'YYYY/MM/DD'
               });
            });
</script>
1
Viral M

セレクター基準は、DIVタグの属性になりました。

例は...

data-date-format="dd MM yyyy" 
data-date-format="dd MM yyyy - HH:ii p
data-date-format="hh:ii"

そのため、dd mm yyyyのブートストラップの例は次のとおりです。 - 

<div class="input-group date form_date col-md-5" data-date="" 
    data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
..... etc ....
</div>

私のJavascriptの設定は以下のとおりです - 

            var picker_settings = {
                language:  'en',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            };

        $(datePickerId).datetimepicker(picker_settings);

Bootstrap-datetimepicker-masterファイルをダウンロードすれば、これらの実用的な例を見ることができます。それぞれindex.htmlを持つサンプルフォルダがあります。

1
Ato Thejay

これにより、入力フィールドに時間を表示できますが、タイムピッカーボタンは非表示になります。これは、アコーディオンの2番目のli要素です。

.bootstrap-datetimepicker-widget .list-unstyled li:nth-child(2){
    display: none;
}
0
Maxim Radevich

Boostrap datetime pickerで時間を無効にします...

   $(document).ready(function () {
        $('.timepicker').datetimepicker({
            format: "dd-mm-yy",
        });
    });

ブートストラップdatetimepickerで日付を無効にします...

   $(document).ready(function () {
        $('.timepicker').datetimepicker({
            format: "HH:mm A",
        });
    });
0
Mugundhan A
your same code work's fine, just add some link reference

<!DOCTYPE HTML>
<html>
    <head>
        <link href="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" media="screen"
              href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">


    </head>
    <body>
        <div class="well">
            <div id="datetimepicker4" class="input-append"> 
                <input data-format="yyyy-MM-dd" type="text"></input> 
                <span class="add-on"> 
                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> 
                </span> 
            </div> 
        </div> 

        <script type="text/javascript"
                src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script> 
        <script type="text/javascript"
                src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.2/js/bootstrap.min.js">
        </script>
        <script type="text/javascript"
                src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>
        <script type="text/javascript"
                src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4').datetimepicker({pickTime: false});
            });
        </script>

    </body>
    </html>
0
Hrushi

ブートストラップ4バージョンでは、このコードは機能します。

$('#payment-date-time-select').datetimepicker({
    startView:2,
    minView:2,
});
0
Ethem