How can I adjust for timezone using javascript/jQuery in a jQuery date and time picker?

Question

Query:

How can I adjust a user-specified date and time in their local timezone to either UTC or some other given timezone using jQuery, Javascript, or a plugin in either of the two?

Background:

I am using the bootstrap-datetimepicker plugin on an html form text field. Users may specify a date and time in the future (to schedule an event, namely a telephone call). They will specify the date and time in their own timezone, and will not be asked to specify the timezone (meaning that all they will see is a calendar and clock on which they will choose the desired date and time). I need to be able to adjust this time (and date if applicable) to either UTC or to some other time zone (specifically EST/EDT depending upon whether DST applies). The user must not be aware that this adjustment is being made. As such their timezone must be somehow detected. As I am using bootstrap-datetimepicker the moment.js plugin is available. I may include whatever javascript/jQuery plugin or libraries I see fit (pageload time is not a consideration that I must make). I can, of course, add a hidden field to the page so as to submit the adjusted time.

Requirements/Restrictions:

• I must use bootstrap-datetimepicker for the input.
• I cannot ask the user for their local timezone.
• I cannot ask the user for their location.
• I cannot display the adjusted timezone to the user.
• I cannot edit the PHP which receives the form data and stores it in a mySQL database.
• I must use javascript or jQuery to accomplish this (unless there's some HTML/CSS magic I don't know about, this should be a given).

Code:

I'm not sure if it's helpful or not, but here is my code:

  $(function() { if (parseInt($(window).width()) < 768) { $('#datetimepicker1').datetimepicker({ inline: true, useCurrent: false, daysOfWeekDisabled: [0, 6], defaultDate: false, showClear: true, showTodayButton: true }); } else { $('#datetimepicker1').datetimepicker({ inline: true, sideBySide: true, useCurrent: false, daysOfWeekDisabled: [0, 6], defaultDate: false }); } }); 

 <!-- BEGIN NEEDLESSLY LARGE NUMBER OF EXTERNAL LIBRARIES --> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/locales.min.js"></script> <!-- END NEEDLESSLY LARGE NUMBER OF EXTERNAL LIBRARIES --> <!-- BEGIN LIKELY IRRELEVANT CODE --> <form action="some.php" method="post" enctype="multipart/form-data" class="grid-form"> <label>Optimal Date and Time (optional)</label> <input class="hidden" type="text" name="time" id="datetimepicker1"> <div class="datetimeplaceholder"></div> <br> <br> <button type="submit" class="btn btn-primary">Send Message</button> </form> <!-- END LIKELY IRRELEVANT CODE --> 

In case SO's snippet is unwieldy it is also available on Codepen: codepen.io/anon/pen/gpBgBz

Notes:

I apologize for the verbosity. I have looked and seen similar entries on SO. This is almost certainly what could be considered a duplicate; however, I did not really understand the answers provided. I'm not very good with jQuery, or JS in general. Despite that, I do recognize that this is a poor way of going about this problem. Arbitrary requirements overcomplicate this greatly.

Answer 1

The picker exports a moment.js moment. I figured out how to find a UTC time and date from that moment.

$("form").submit(function() {
    var datetime1 = $('#datetimepicker1').data("DateTimePicker").date();
    var correctdatetime = datetime1.utc();
    $('#datetimepicker1').val(correctdatetime);
}

This accomplishes what I want.