Wie bekomme ich ein Date-Objekt von einem Bootstrap-Datetime-Picker-Plugin?

Question

Ich versuche tempusdominus-datetimepicker-3 zu verwenden, um eine Datum-Uhrzeit-Auswahl in meinen HTML-Formularen zu erstellen.

Allerdings muss ich in der Lage sein, das ausgewählte Datum von ihm zu bekommen. Das Plugin hat eine Option namens date, die laut dem Dokument ein Moment-Objekt oder Null zurückgeben soll. Hier ist, was das Dokument sagen, über diese Option

das Modell aktuelles Datum der Komponente Kosten, ein moment Objekt oder null wenn nicht gesetzt

Allerdings ist ich kämpfen, um die date Option zuzugreifen.

Auch aus dem doc

Hinweis Alle Optionen über das data Attribut zugegriffen werden z.B. $('#datetimepicker').datetimepicker(OPTION, ARGUMENT)

Also habe ich versucht, die nach dem Datum Option zuzugreifen.

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

Aber keine der oben genannten gibt das Objekt zurück. Wie kann ich auf das Datumsobjekt zugreifen?

würde ich denken, ein schönes Plugin wie dieses wird besser lesbar Option wie getDate(), setDate(date), getFomat() und setFormat(...) etc; oder Event-Beispiele, die solche Fragen ausschließen sollten, aber leider nicht.

Answer 1

ist hier der richtige Code für den Zugriff Ereignisse:

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

Sie können auch Datum mit diesem erhalten:

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

komplette Geige, das Datum zu manipulieren: https://jsfiddle.net/10xzksm0/2/

Answer 2

Vielleicht bin ich falsch, aber die Art, wie ich interpretiere "Hinweis Alle Optionen sind über das Datenattribut" es heißt, auf die Funktionen in der zugreifen folgende Format

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

wenn Sie versuchen, console.log($("#YOU_SELECTOR").data('DateTimePicker'));

Sie werden sehen, dass es all diese Funktionen druckt, die es are accessible über data Attribut sagt, bin Drucken ein paar ich unter

{ 
    "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, 

siehe unten unter getDate() in der Demo mit einem Klick auf einen Link. Sie können nach dem Ändern des zu überprüfenden Datums prüfen.

$(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>