2

2 つの HTML 入力要素があります。1 つ目は選択した月と年を表示する読み取り専用のテキスト入力で、2 つ目は選択した日付を保存する非表示の入力です。

<input type="text" id="MonthDisplay" readonly="readonly" />
<input type="hidden" name="Month" />

目標は、選択された実際の日付を非表示フィールドに格納することですが、月と年のみを可視の MonthDisplay フィールドに表示することです。

日付ピッカーを初期化するコードは次のとおりです。

$('#MonthDisplay')
    .datepicker({
        'dateFormat'  : 'MM yy',
        'changeMonth' : true,
        'changeYear'  : true,
        'yearRange'   : '2010:'+new Date().getFullYear(),
        'altField'    : "input[type=hidden][name=Month]",
        'altFormat'   : "m/d/yy"
    });

ユーザーが初めて日付を選択すると、すべてがうまく機能します。表示フィールドと非表示フィールドの両方が正しく設定されています。しかし、ユーザーが表示フィールドを 2 回目にクリックすると、日付ピッカーは選択された月にデフォルト設定されません。代わりに、デフォルトで今日の月になります。コントロールが日付を解析できないため、これが起こっていると確信しています.dateFormatに日を含めるように設定すると（フォーマット文字列を使用"dd MM yy"）、うまく機能します。しかし、ユーザーへの表示にその日を含めたくありません。

だから私の質問は、日付ピッカーが使用している日付を2回目にインターセプトするにはどうすればよいですか?日付は選択された前の月を覚えていますか?

または、別の質問として、日付ピッカーまたは別のコントロールで日付を選択せず​​に月と年のみを選択する方法はありますか?

4

2 に答える 2

2

@Muthukumarが選択した月を「覚えている」と述べたSOの質問から例を取得しました（jQuery .data（）を使用）。JSFiddle ここ

HTML:

<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />

JS:

$(function() {
  $('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    beforeShow: function(elem, inst) {
      var $this = $(this);
      // set the datepicker date
      $this.datepicker('option', 'defaultDate', $this.data('date'));
      // set the input date
      $this.datepicker('setDate', $this.data('date'));
    },
    onClose: function(dateText, inst) { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      var date = new Date(year, month, 2);
      $(this).datepicker('setDate', date)
             .data('date', date); // remember the selected date
    }
  });
});

ただし、@CharlieKilian、読み取り専用入力でコードをまったく機能させることができませんでした。私はあなたのコードと html (コメント付き) をフィドルに入れたので、必要に応じてそれをいじることができます。

于 2013-10-21T17:14:10.057 に答える
-1

次のリンクは、日付を選択せず​​に月と年のみを選択するように日付ピッカーを実装する方法についてのアイデアを提供するはずです。

月年のみを表示するjQuery UI DatePicker

于 2013-01-25T18:16:12.427 に答える