Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I get date object from a bootstrap-datetime-picker plugin?

I am trying to utilize tempusdominus-datetimepicker-3 to create a date-time picker in my html-forms.

However, I need to be able to get the selected date from it. The plugin has an option called date which according to the document should return a moment object or null. Here is what the document say about this option

Returns the component's model current date, a moment object or null if not set

However, I am struggling to access the date option.

Also from the doc

Note All options are accessed via the data attribute e.g. $('#datetimepicker').datetimepicker(OPTION, ARGUMENT)

So I tried the following to access the date option.

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

But none of the above is returning the object. How can I access the date object?

I would think a nice plugin like this one will have more readable option like getDate(), setDate(date), getFomat() and setFormat(...) etc; or event examples, which should eliminate questions like this one, but unfortunately it does not.

like image 698
Jaylen Avatar asked Nov 25 '17 20:11

Jaylen


People also ask

What is Bootstrap date picker?

Bootstrap Date Picker Bootstrap date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code. This documentation may contain syntax introduced in the MDB 4.17.0 and can be incompatible with previous versions. For old Date Picker documentation please follow the link.

How to override default classes in DateTimePicker bootstrap plug-in?

The datetimepicker Bootstrap plug-in also includes a CSS file that specifies the default look and feel of the calendar / time picker. By picking the specific classes and modifying the default properties as per need, you may override the default classes.

How to add a DateTimePicker to a form?

A datetimepicker will be added to the “#form_datetime” input field. Also, all earlier dates will be disabled for preventing user select a previous date. Once the form is submitted, the event name and event date & time will be inserted into the database with PHP and MySQL.

How to close the DateTimePicker once the user selects a date?

Once the user selects a date & time, the datetimepicker will be closed automatically. The Today link will appear under the datetimepicker to select today’s date and the current time. Bootstrap DateTime Picker has various options for datetimepicker method, you can get the details from here.


1 Answers

Here is the correct code to access events :

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

You can get date using this too :

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

Complete fiddle to manipulate the date : https://jsfiddle.net/10xzksm0/2/

like image 69
Vincent Decaux Avatar answered Oct 11 '22 14:10

Vincent Decaux