jQuery datepickerは選択された日付をその場で設定します


121

jquery日付ピッカーの選択された日付をその場で動的に変更するにはどうすればよいですか?私はインライン日付ピッカーを作成したと言っています。その後、しばらくしてから、日付ピッカーを最初から再作成せずに別の日付を反映させたいと思います。

setDateメソッドを試しましたが、うまくいきませんでした。また、docにはドキュメントがあまりありません。

ここには別の(拡張?)プラグインがありますが、jquery.ui.all.jsに同梱されているプラ​​グインを使用したいと思います。

回答:


187

どのバージョンのjQuery-UIを使用していますか?私は1.6r6、1.7、および1.7.1で以下をテストしましたが、機能します。

//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );

16
setDateが機能しない場合は、setDateの代わりにdefaultDateを使用します。
bingjie2680 2012

8
しかし、私にとってはどちらの方法でも機能しませんでした。日付が変更されましたが、選択した日付がカレンダーに表示されません。今日だけが強調表示されます。
Prageeth godage 2013年

28

minDateまたはmaxDateオプションが設定されている場合は、設定しようとしている日付が、許可されている日付範囲内にあることを確認してください。


10

この例は、ドロップダウンカレンダーのデフォルト値とテキストボックスの値を使用する方法を示しています。また、デフォルト値を前の日付に設定する方法も示しています。

selectedDateは、カレンダーコントロールの現在の選択日を保持する別の変数です。

    var date = new Date();
    date.setDate(date.getDate() - 1);

    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: date,
        onSelect: function () {
            selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        }
    });

    $("#datepicker").datepicker("setDate", date);

8

キース・ウッド(http://keith-wood.name/datepickRef.html)のDatePickerの場合、次のように機能することに注意してください-デフォルトの日付の設定が最後であることに注意してください。

    $('#datepicker').datepick({
        minDate: 0,
        maxDate: '+145D',
        multiSelect: 7,
        renderer: $.datepick.themeRollerRenderer,
        ***defaultDate: new Date('1 January 2008')***
    });

7

何らかの理由で、場合によっては、setDateを機能させることができませんでした。

私が見つけた回避策は、与えられた入力の値属性を単に更新することです。もちろん、日付ピッカー自体は更新されませんが、探しているのが日付を表示することであれば、問題なく機能します。

var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input

6
数か月間1オフがあるため、(date.getMonth()+ 1)が必要です
Adam

1
初期オプションで設定した場合、setDateは機能しません。後で.datepicker( 'setDate'、...)でチェーンしました
martinedwards

4
$('.date-pick').datePicker().val(new Date()).trigger('change')

最後に、ここ数時間私が探しているもの!テキストフィールドの日付だけでなく、変更を開始する必要があります。


2
それはすべきで.datepicker()はない.datePicker()
Arslan Tabassum

3

これは古いスレッドですが、私が使用した方法についていくつかの情報を提供したいだけです。今日の日付を設定したい場合は、以下のように適用するだけです。

 $("#datepickerid").datepicker("setDate", "0");

現在の日付の前後数日を設定したい場合は、-/+以下のように希望する日数のシンボルシンボルを使用します。

 $("#datepickerid").datepicker("setDate", "-7");
 $("#datepickerid").datepicker("setDate", "+5");

2

setDateは、jquery UIで使用されるインライン日付ピッカーの問題であるように見えますが、特定のエラーはInternalErrorです:再帰が多すぎます。



2

HTMLでは、このような日付ピッカーで入力フィールドを追加できます

<input class="form-control date-picker fromDates" id="myDate" type="text">

次に、javaスクリプトで、datepickerを初期化し、値を次のように日付に設定します。

$('.fromDates').datepicker({
                maxDate: '0',
                dateFormat: "dd/mm/yy",
                changeYear: true,
                changeMonth: true,
                yearRange: "-100:+0"
            });

var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );

(ここではfromdate属性は現在の日付の前の日付を示しています)


0
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...

スタックオーバーフローでは問題の解決方法が説明されていないため、コードのみの回答は推奨されません。回答を編集して、コードの機能と質問への回答を説明してください。これにより、OPだけでなく他のユーザーにも役立ちます。
FluffyKitten

-1

setDateメソッドにも多くの問題がありました。v1でのみ機能するようです。ただし、機能しているように見えるのは、dpSetSelectedメソッドを使用する場合です。

    $("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());

幸運を!


-1

またはあなたは単に持つことができます

$('.date-pick').datePicker().val(new Date()).trigger('change')

1
.datepicker()ないはず.datePicker()です。
FlorinFrătică2017年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.