3

Web ビューで起動する HTML5/JQuery に基づく Android アプリケーションのプログラミングで、Eternicode の bootstrap-datepicker を使用しています。ところで、私はJquery 1.9.1とBootstrap 2.3.2をbootstrap-responsiveで使用しています。

ピッカーは正常に動作していますが、残念ながら現時点では解決できなかった 2 つの問題が発生しています。

  • ピッカーのテーマが尊重されず、一部の日付が読み取れません (添付の図を参照)。日付ピッカーのフォントが白い背景に白く表示されるなど、css の競合があるものもあります。
  • 単独の行を保持するなど、日付ピッカー フィールドのサイズを小さくすることはできません。

表示の問題がある日付ピッカー

私のマークアップコードは次のとおりです。

<div class="row-fluid" style="margin-right:0px!important">
  <label id="dateId" class="span6">One Date</label>
  <div id="datePurchase" class="input-append date">
    <input data-format="yyyy-MM-dd" type="text" />
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
  </div>
</div>

Javascript で日付ピッカーを初期化します。

    $("#dateId").datetimepicker({
        pickTime: false,
        format: "dd/MM/yyyy",
        startDate: startDate,
        endDate: endDate,
        autoclose: true
    });
    $("#dateId").on("changeDate", onChangeDate);

これらの問題について何か分かりますか？どうもありがとう

4

1 に答える 1

2

DateTimePicker.bootstrap-datetimepicker-widgetクラスの背景色を上書きすることで、テキストが読めないという問題を解決できました。

onShowDatePicker()日付ピッカーの表示イベントが発生したときに JavaScript を使用して、関数内の CSS を上書きします。

$("#myDateControl").datetimepicker({
        pickTime: false,
        format: "dd/MM/yyyy",
        startDate: startDate,
        endDate: endDate,
        autoclose: true
    });
    $dateItem.on("changeDate", onChangeDate);
    $dateItem.on("show", onShowDatePicker);
    }

function onShowDatePicker(event)
{
    if(event) {
        //overwrite the backbground color of the date picker such as the text is readable
        $(".bootstrap-datetimepicker-widget").css("background-color", "#3c3e43");
    }    
}
于 2013-11-08T09:51:20.930 に答える