3

Androidに日付ピッカーを実装しようとしました。データを取得してテキスト形式で表示したい

  <html>
  <head>
    <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="datePickerPlugin.js"></script>
  <script type="text/javascript" charset="utf-8">

  function dateTest() {
      var myNewDate = new Date();

      window.plugins.datePicker.show({
          date : myNewDate,
          mode : 'date', // date or time or blank for both
          allowOldDates : true
      }, function(returnDate) {
        var newDate = new Date(returnDate);
            currentField.val(newDate.toString("dd/MMM/yyyy"));

            // This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
            currentField.blur();
      });
  }
</script>
</head>
<body bgcolor="#ffffff">
<hr>DatePicker Test<hr><br>
     <input type="button" onClick ="dateTest()" value ="Today's Date!!" />
     <div id="view"></div>
</body>
</html>

アラートとして取得しています...しかし、同じページに文字列として保存できません

4

5 に答える 5

7

なぜあなたの頭を緩めるのですか？

A<input type="date">は常にデバイスの解釈に依存し、一部の Android デバイスでは機能しません。

たくさんのプラグイン、アドオンなどがあります。

私は個人的に好きで、mobiscroll を使用しています:リンク

編集: Mobiscrollは有料になりましたが、無料のフロントエンド モバイル フレームワークがたくさんあり、おそらくそれらすべてにjQuery Mobile-datepickerなどの日付ピッカーがあります。

于 2013-06-21T09:06:40.430 に答える
2

私がやりたいことは単純です - 特定のフィールドをクリックしたときに日付ピッカーを表示したいだけです。

ただし、Aleks と同じように、html に何を入力すればよいか、html で使用する方法がわかりません。また、入力時に datepicker を呼び出すには、html に何を入力すればよいかわかりません。

プラグインのドキュメントは不完全です。

このテストプロジェクトから解決策を見つけました。手順は次のとおりです。

  1. 前提条件: phonegap/cordova-cli がインストールされている
  2. Cordova のデバイスプラグインをインストールします。$ cordova plugin add org.apache.cordova.device
  3. Dirk のdatepickerプラグインをインストールします。$ cordova plugin add https://github.com/DURK/cordova-datepicker-plugin
  4. テスト プロジェクトからnativedatepicker.jsをコピーし、プロジェクトのjsフォルダーに配置します。このファイルにはshowDatePicker(), showDateTimePicker()便利な機能があります。
  5. ff を追加します。index.htmlコードする:

注: ブラウザーでテストすると、datepicker は表示されません。

....
    <div class="form-group">
      <label>Appointment</label>
      <input type="text" class="form-control datepicker" id="appointment">
    </div>
....
<script src="js/nativedatepicker.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript">
    (function($){
        $(document).ready(function () {
            $(document).on('click', '.datepicker', function () {
                showDatePicker($(this), 'date');
            });

            $(document).on('click', '.timepicker', function () {
                showDatePicker($(this), 'time');
            });

            $(document).on('click', '.datetimepicker', function () {
                if (device.platform === "Android")
                    showDateTimePicker($(this));
                else
                    showDatePicker($(this), 'datetime');
            });
        });
    })(jQuery);
</script>
于 2014-09-25T05:02:43.193 に答える
1

利用可能な日付ピッカーがあるのに、なぜカスタムの日付ピッカーを実装したいのでしょうか?

<input type="date">一般的に知られている iOS 日付ピッカーを作成するために使用するだけです。

モバイル デバイスの入力フィールドの詳細については、http: //blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experienceをお勧めします。

于 2013-06-21T08:24:12.353 に答える
1

これは私の実用的な実装です。入力タイプはテキスト、読み取り専用です。

$('.nativedatepicker').focus(function(event) {
        var currentField = $(this);
        var myNewDate = new Date();
        window.plugins.datePicker.show({
            date : myNewDate,
            mode : 'date',
            allowOldDates : true
        }, function(returnDate) {
            var array = returnDate.split("/");
            var day = array[2], month = array[1];
            if (day <= 9)
                day = "0" + day;
            if (month <= 9)
                month = "0" + month;
            currentField.val(array[0] + "/" + month + "/" + day);
            currentField.blur();
        });
    });
于 2013-06-21T08:17:28.483 に答える