bootstrap-datetime-pickerプラグインから日付オブジェクトを取得するにはどうすればよいですか？

Question

私はtempusdominus-datetimepicker-3を利用して、自分のhtml形式で日時選択を作成しようとしています。

ただし、選択した日付を取得する必要があります。プラグインにはdateというオプションがあります。これは、ドキュメントに従ってモーメントオブジェクトまたはnullを返す必要があります。ここではしかし、私はdateオプションにアクセスするのに苦労しています が

を設定されていない場合は、コンポーネントのモデル現在の日付、momentオブジェクトまたはnullを返し文書は、このオプション

について言う何をされています。またDOC

注からすべてのオプションは、例えばdata属性を介してアクセスされる

$('#datetimepicker').datetimepicker(OPTION, ARGUMENT)

だから私は日付オプションにアクセスしようとしました。

from = $('#datetimepicker').datetimepicker('date'); 
from = $('#datetimepicker').datetimepicker('data', 'date'); 
from = $('#datetimepicker').datetimepicker('data').date; 
from = $('#datetimepicker').datetimepicker(function(e){ 
    return e.date; 
}); 

しかし、上記のいずれもオブジェクトを返すものではありません。どのように日付オブジェクトにアクセスできますか？

このような素敵なプラグインは、getDate()、setDate(date)、getFomat()、setFormat(...)などの読みやすいオプションがあると思います。イベントの例がありますが、これはこのような質問を排除すべきですが、残念ながらそれはありません。ここで

Answer 1

は、イベントにアクセスするための正しいコードです：

$(function() { 
    $('#datetimepicker').datetimepicker(); 
    $('#datetimepicker').on("change.datetimepicker", function (e) { 
     console.log(e.date); 
    }); 
}); 

あなたも、この使用して日付を取得することができます：

var date = $('#datetimepicker').datetimepicker('viewDate') 

日付を操作するための完全なフィドル：https://jsfiddle.net/10xzksm0/2/

Answer 2

たぶん私はを間違っているが解釈する方法"すべてのオプションはデータ属性" "を介してアクセスされます。あなたはそれがdata属性を経由して、それはare accessible言い、すべてのこれらの機能を印刷していることがわかりますconsole.log($("#YOU_SELECTOR").data('DateTimePicker'));

にしようとした場合のフォーマット

$("#YOU_SELECTOR").data('DateTimePicker').FUNCTION();

以下、いくつかは、私が

{ 
    "destroy": function() { 
     H(), I(), i.widget.remove(), i.element.removeData("DateTimePicker"), i.component && i.component.removeData("DateTimePicker") 
    }, 
    "show": function (a) { 
     if (!l().prop("disabled")) { 
      if (i.options.useCurrent && "" === l().val()) { 
       if (1 !== i.options.minuteStepping) { 
        var c = b(), 
         d = i.options.minuteStepping; 
        c.minutes(Math.round(c.minutes()/d) * d % 60).seconds(0), i.setValue(c.format(i.format)) 
       } else i.setValue(b().format(i.format)); 
       o("", a.type) 
      } 
      a && "click" === a.type && i.isInput && i.widget.hasClass("picker-open") || (i.widget.hasClass("picker-open") ? (i.widget.hide(), i.widget.removeClass("picker-open")) : (i.widget.show(), i.widget.addClass("picker-open")), i.height = i.component ? i.component.outerHeight() : i.element.outerHeight(), n(), i.element.trigger({ 
       type: "dp.show", 
       date: b(i.date) 
      }), G(), a && B(a)) 
     } 
    }, 
    "disable": function() { 
     var a = l(); 
     a.prop("disabled") || (a.prop("disabled", !0), H()) 
    }, 
    "enable": function() { 
     var a = l(); 
     a.prop("disabled") && (a.prop("disabled", !1), F()) 
    }, 
    "hide": function() { 
     var a, c, d = i.widget.find(".collapse"); 
     for (a = 0; a < d.length; a++) 
      if (c = d.eq(a).data("collapse"), c && c.transitioning) return; 
     i.widget.hide(), i.widget.removeClass("picker-open"), i.viewMode = i.startViewMode, E(), i.element.trigger({ 
      type: "dp.hide", 
      date: b(i.date) 
     }), I() 
    }, 
    "setValue": function (a) { 
     b.locale(i.options.language), a ? i.unset = !1 : (i.unset = !0, K()), a = b.isMoment(a) ? a.locale(i.options.language) : a instanceof Date ? b(a) : b(a, i.format, i.options.useStrict), a.isValid() ? (i.date = a, K(), i.viewDate = b({ 
      y: i.date.year(), 
      M: i.date.month() 
     }), t(), x()) : p(a) 
    }, 
    "getDate": function() { 
     return i.unset ? null : b(i.date) 
    }, 
    "setDate": function (a) { 
     var c = b(i.date); 
     i.setValue(a ? a : null), o(c, "function") 
    }, 
    "setDisabledDates": function (a) { 
     i.options.disabledDates = O(a), i.viewDate && q() 
    }, 
    "setEnabledDates": function (a) { 
     i.options.enabledDates = O(a), i.viewDate && q() 
    }, 
    "setMaxDate": function (a) { 
     void 0 !== a && (i.options.maxDate = b.isMoment(a) || a instanceof Date ? b(a) : b(a, i.format, i.options.useStrict), i.viewDate && q()) 
    }, 
    "setMinDate": function (a) { 
     void 0 !== a && (i.options.minDate = b.isMoment(a) || a instanceof Date ? b(a) : b(a, i.format, i.options.useStrict), i.viewDate && q()) 
    } 
    .............. and more, 

の下に印刷しています下記のリンクをクリックしてデモのgetDate()を呼び出してください。確認する日付を変更した後で確認することができます。

$(document).ready(function() { 
 
    var picker = $('#datetimepicker7').datetimepicker(); 
 

 
    //console.log(picker.datetimepicker('data-view-date')); 
 
    //console.log($('#datetimepicker7').datetimepicker('data-show')); 
 

 
    $("#tog").on('click', function() { 
 
    //console.log($('#datetimepicker7').data('DateTimePicker')); 
 
    console.log($('#datetimepicker7').data('DateTimePicker').getDate()); 
 
    }) 
 

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.css" rel="stylesheet" /> 
 

 

 

 

 
<div class="container"> 
 
    <div class='col-md-5'> 
 
    <div class="form-group"> 
 
     <div class="input-group date" id="datetimepicker7" data-target-input="nearest"> 
 
     <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker7" /> 
 
     <span class="input-group-addon" data-target="#datetimepicker7" data-toggle="datetimepicker"> 
 
        <span class="glyphicon glyphicon-calendar"></span> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <a href="#." id="tog">toggle</a> 
 
</div>