web-dev-qa-db-ja.com

Bootstrap Datepickerを使用しながら、選択した日付値を取得する方法は？

JqueryとBootstrap Datepickerを使用して、Bootstrap Datepickerを使用して選択した新しい日付値を取得するにはどうすればよいですか？参考までに、Rails 3とCoffescriptを使用しています。

以下を使用してデータピッカーをセットアップします。

<input id="startdate" class="span2 datepicker" type="text" value="" name="startdate" default="2013-05-21" data-date="2013-05-21" data-behavior="datepicker">
<%= submit_tag 'Get Data using date', :id => 'get_data' %>

$(".datepicker").datepicker
      endDate: new Date
      format: "yyyy-mm-dd"
      autoclose: true
      minViewMode: 1
      todayBtn: "linked"

ユーザーがその横にある[日付を使用してデータを取得]ボタンをクリックすると、jQueryを使用してdatepickerによって設定された新しい日付値を取得し、フォームが送信しないようにし、その日付値を使用してajaxリクエストを実行します。正しい新しい日付値を取得することを除いて、すべてのajaxは正常に動作しています。次の両方を試してみましたが、新しい日付は表示されず、最初に設定したデフォルト値のみが返されます。

sd1 = $('#startdate').attr('value')
console.log sd1

sd2 = $('#startdate').attr('data-date'))
console.log sd2

本当にばかげていると感じていますが、bootstrap datepickerで設定された新しい日付値を取得する方法がわかりません。

jqueryruby-on-railsjquery-uitwitter-bootstrapdatepicker
43
Ryan

これを試すことができます

$('#startdate').val()

または

$('#startdate').data('date')
46
Sushanth --

bootstrap datepickerには次を使用できます。

$("#inputWithDatePicer").data('datepicker').getFormattedDate('yyyy-mm-dd');
56
Matias

ブートストラップ日付ピッカー（bootstrap datepickcer検索の最初の結果）には、選択した日付を取得するメソッドがあります。
http://bootstrap-datepicker.readthedocs.org/en/release/methods.html#getdate

getDate：
選択範囲の最初の日付ピッカーの内部日付オブジェクトを表すローカライズされた日付オブジェクトを返します。
複数日付ピッカーの場合、選択された最新の日付を返します。

$('.datepicker').datepicker("getDate")

または

$('.datepicker').datepicker("getDate").valueOf()
29
Luca Rasconi

一般的に言えば、

$('#startdate').data('date')

なぜなら最高だから

$('#startdate').val()

日付ピッカーが「インライン」の場合は機能しません

10
Lodato L

これはインラインdatepicker（およびその他）で動作します

$('#startdate').data('datepicker').date
3
Shady

すでにハイライトされた日付がすでにあるで最後にクリックされた日付を特定するをしたい場合は、以下が必要です：

$('#startdate').data('datepicker').viewDate

viewDateはJavaScript日付オブジェクトを返すため、それに応じて処理する必要があります。

2
Bern

フルテキスト文字列形式で日付を変更したくない場合は、次のようにします。

$('#your-datepicker').data().datepicker.viewDate
2
Pedro Martins

次のようなHTMLを使用してこれを試してください。

var myDate = window.document.getElementById("startdate").value;
1
user3475960

上記の答えを試しましたが、うまくいきませんでした。したがって、user3475960が言及したように、私は$('#startdate').html()を使用してhtmlテキストを提供したため、必要に応じて使用しました。

0
SalindaKrish

ここには多くの解決策がありますが、おそらく最良の解決策です。使用するスクリプトのバージョンを確認してください。

少なくとも私はあなたに私の100％実用的なソリューションを与えることができます

バージョン：4.17.45

bootstrap-datetimejs https://github.com/Eonasdan/bootstrap-datetimepicker Copyright（c）2015 Jonathan Peterson

JavaScript

var startdate = $('#startdate').val();

出力は次のようになります：12.09.2018 03:05

0
Developer