web-dev-qa-db-ja.com

日付が選択されていない場合、bootstrap-datepickerが入力から既存の値をクリアしないようにするにはどうすればよいですか？

ユーザーの誕生日がphpで事前設定されたdivがあります。

<div id="datepicker" class="input-group date">
    <label for="dob">Date of Birth</label> <input type="text" class="form-control" id="dob" name="dob" value="<?php $date = new DateTime($this->swimmers->dob); echo $date->format('d/m/Y');?>"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

Javascript：

<script>     
    $('.container .input-group.date').datepicker({
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
    });
</script>

ブートストラップはセットアップされ正常に動作しますが、「dob」入力が取得され、日付選択を行わずにフォーカスを失うと、事前入力された値がクリアされます。

ただし、datepickerを介して日付が選択され、入力がフォーカスを取得および失った場合、これは発生しません。

誰かがクリックした場合、事前に入力された値をどのようにフィールドに保持できますか？

編集：初めて日付を選択すると、事前に入力された値は消去されますが、もう一度日付を選択するまで、選択した日付は挿入されません。

更新：作業コードが更新されました！

javascriptphptwitter-bootstrapdatepickerbootstrap-datepicker
18
nikmav

これ以上の例がないと確かにわかりませんが、問題はおそらく、入力に与える_$this->swimmers->dob_文字列がbootstrap-datepickerによって日付形式として認識されないことです。 _data-date-format_属性を入力に追加することで、使用する日付形式を定義できます。

たとえば、MySQL形式の日付またはPHPのDateTimeオブジェクトを$date->format('Y-m-d')で使用している場合、次を使用できます。

_<div id="datepicker" class="input-group date">
    <input type="text" class="form-control" id="dob" name="dob" value="<?php echo $this->swimmers->dob;?>" data-date-format="yy-mm-dd"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
_
3
Steve H

強制解析値をfalseに設定します：forceParse：false

    $(".applyDatepicker").datepicker({
            forceParse: false
    });
37
Datta

PHPでの動作についてはわかりませんが、mvcの場合、Bootstrap=コントロールが日付を選択せず​​にフォーカスを取得し、失うと値が消去されるという同じ問題が発生しました。

Bootstrapは、設定された値を認識しないため、値を消去します

$('#dtControl').val(nextMonth);

私はbootstrap v3.1.1で作業しており、次のコードが私のために働いた

$('#dtControl').datepicker('setDate', nextMonth);

日付ピッカーコントロールを設定します。このようにBootstrapは日付を認識し、コントロールがフォーカスを取得したり失ったりしても日付を消去しません

2
Muhammad Waqas Iqbal

ユーザーが同じ日付を2回クリックしたときに、同様の問題が発生しました。このフィールドは、クリックされた日付と空白のフィールドを「切り替え」ます。私は基本的にどの段階でも空にしたくないので、Waqasの答えのおかげで、それを回避する方法は次のとおりです：

var datepickerContainer = $('#datepicker');

datepickerContainer.datepicker({
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
}).on('show', function() {
    datepickerContainer.datepicker.currentDate = $('input#dob').val(); //update this instance with the current value
}).on('changeDate', function(event) {
    var newDate = $('input#dob').val();
    if (newDate == '' || newDate == null) { //check if the new value is empty - if it is, then just set it back to the last known date for this instance
        datepickerContainer.datepicker('setDate', datepickerContainer.datepicker.currentDate);
    }
});

これは、日付ピッカーのそのインスタンスに最後の日付値を保存することにより、比較的自己完結した状態を維持し、結果として入力がクリアされません。

あなたがこの問題を解決したことは知っていますが、このスニペットは似たような状況にある他の誰かにとって役に立つかもしれません。

2
George Inggs

JQueryがハンドラーを呼び出すとき、thisキーワードは、イベントが配信される要素への参照です。さらに、空でない文字列はtrueと評価されます。これらの事実に基づいて、イベントハンドラーでチェックを行うだけです。以下のサンプルコードを参照してください。

            .find( 'input[name=startDate]' )
                .datepicker( {format: 'dd-mm-yyyy'} )
                .on( 'changeDate', function() {
                    if( this.value ) { 
                        << do something >>
                    }
                });

注：上記のコードサンプルの効率と読みやすさのために、jQueryオブジェクトでthisをラップする代わりに、DOMプロパティvalueがチェックされますそしてval（）を呼び出します（$（this）.val（））。これは小さな改善ですが、できるだけコンパクト/シンプルにすることをお勧めします。

0
Stephan van Hoof

別の解決策は、グローバルレベルでオプションを定義することです。

$('.datepicker').datepicker();
$.fn.datepicker.defaults.format = 'dd/mm/yyyy';
$.fn.datepicker.defaults.startDate = "0";
$.fn.datepicker.defaults.language = "es";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.todayHighlight = true;
$.fn.datepicker.defaults.todayBtn = true;
$.fn.datepicker.defaults.weekStart = 1;

現在、更新メソッドを使用する場合、datepickerはオプションを失いません。

0
track3r