web-dev-qa-db-ja.com

JQUERY datepickerから値を取得する

JQUERY UI datepickerを$("div#someID").datepicker()のようなDIVにアタッチしてインラインで表示したい場合-選択した日付にアクセスするにはどうすればよいですか？ INPUTにバインドされていない場合、フォームでは送信されません。

フォローアップとして、INPUT要素にバインドする必要がある場合、INPUT要素に対するdatepickerの位置を制御する方法はありますか？日付ピッカーを要素の下ではなく要素の上または側に表示したい場合、どうすればよいですか？

この答えが本当に明白などこかにあるなら、私を許してください。

jqueryjquery-uijquery-ui-datepicker
29
David Grenier

ユーザーが選択した日付を取得したい場合、これを行うことができます：

$("#datepicker").datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate'); 
    }
});

質問の2番目の部分についてはわかりません。しかし、スタイルシートと相対配置を使用してみましたか？

48
chapa

getDateメソッドを使用できます。

var d = $('div#someID').datepicker('getDate');

これにより、dのDateオブジェクトが得られます。

位置決めのオプション ポップアップはありませんが、必要に応じてCSSまたはbeforeShowイベントを使用して何かを実行できる場合があります。

9
mu is too short
$('div#someID').datepicker({
   onSelect: function(dateText, inst) { alert(dateText); }
});

入力要素のみにバインドする必要があります

6
run

この入力のname属性を削除して、送信されないようにすることができます。

このコントロールの値にアクセスするには：

$("div#someID").datepicker( "getDate" )

そして、あなたは http://jqueryui.com/demos/datepicker/ のドキュメントを見るかもしれません

5
Bright

次のように行うことができます-日付ピッカーが要素にバインドされていることを確認するためだけに検証します。

var dt;

if ($("div#someID").is('.hasDatepicker')) {
    dt = $("div#someID").datepicker('getDate');
}
2
John Gathogo

選択した要素が1つではない場合、次の方法を使用する必要があります。

$('[type="date"]').datepicker();
$('[type="date"]').change(function() {
    var date = $(this).datepicker("getDate");
    console.log(date);
});
1
evan.z

入力フィールドの横に日付ピッカーを配置するには、次のコードを使用できます。

$('#datepicker').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({marginLeft: input.offsetWidth + 'px'});
    }
});
0
TeeDeJee