6

私はjqueryの日付ピッカーに取り組んでいます。日付を選択する必要がありますが、カレンダーから日付を選択した後、3つの別々のドロップダウンに分割する日付が必要です。1つは日用、1つは月用、もう1つは年用です。これが私のjqueryスクリプトです。

  <script type="text/javascript">
    $(document).ready(function() {

   $(function() {
    $( "#fullDate" ).datepicker({
    onClose: function(dateText, inst) {
       $('#day').val( dateText.split('/')[2] );
       $('#month').val( dateText.split('/')[1] );
   $('#year').val( dateText.split('/')[0] );
    }
 });
});
}); 
</script>

HTML

<div class="demo">

<p>Date: <input id="fullDate" type="text" style="display:block"></p>
day:<select name="day" id="day" style="width:100px">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

 month:<select name="month" id="month" style="width:100px">
 <option>1</option>
 <option>2</option>
  <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>

year:<select name="year" id="year" style="width:100px">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div><!-- End demo -->
4

2 に答える 2

7

実際のデモはここをクリックしてください: ] http://jsfiddle.net/gvAbv/13/ または http://jsfiddle.net/gvAbv/8/

デモでは、テキストボックスをクリックして日付とビンゴを選択すると、ドロップダウンが自動入力されます。

注意すべき点dateText.split('/')[2]は、日ではなく年です:)コードが機能する場所を切り替える場合。

すなわちdateText.split('/')[2]: 年; dateText.split('/')[0]： 月 ; dateText.split('/')[0]: 日休のデモは、それを明確にするのに役立ちます。

デモには余分なビットがありますが、役に立ちます!

コード 

$(function() {
    $("#fullDate").datepicker({
        onClose: function(dateText, inst) {
            $('#year').val(dateText.split('/')[2]);
            $('#month').val(dateText.split('/')[0]);
            $('#day').val(dateText.split('/')[1]);
        }
    });
});

画像クリックの別のデモ: http://jsfiddle.net/zwwY7/

コード

$(function() {
    $("#fullDate").datepicker({
         buttonImage: 'icon_star.jpg',
        buttonImageOnly: true,
        onClose: function(dateText, inst) {
            $('#year').val(dateText.split('/')[2]);
            $('#month').val(dateText.split('/')[0]);
            $('#day').val(dateText.split('/')[1]);
        }
    });
});

​

画像 ここに画像の説明を入力

ここに画像の説明を入力

于 2012-06-04T05:44:45.450 に答える
1

datepicker onselectメソッドを使用して、必要な日付値を取得します :: onselect info

お気に入り：

onSelect: function(dateText, inst) {            
        var datePieces = dateText.split('/');
        var month = datePieces[0];
        var day = datePieces[1];
        var year = datePieces[2];
        //define select option values for
        //corresponding element
        $('select#month').val(month);
        $('select#day').val(day);
        $('select#year').val(year);

}

そういう意味だったんですか

于 2012-06-04T05:42:46.487 に答える