bootstrap-datetimepicker convert selected local date to UTC

Question

im using bootstrap-datetimepicker from http://tarruda.github.io/bootstrap-datetimepicker/ this gives the option to select the datetime in local time, what i cannot understand is how do i convert it to UTC before sending it to the cgi. I need to do this because my server is set at GMT timezone and the input can come in from any timezone.
so i would like the user to select the time in his tz but convert that selection to gmt which sending it to my cgi script.
if there is any other better way of solving this issue also i would appreciate it.

<script type="text/javascript">
    $('#timetime').datetimepicker({
        maskInput: true,
        format: 'yyyy-MM-dd hh:mm',
    });
</script>

it is being called in the form in the below code

<label for="sdate" class="control-label">* Scheduled Date (UTC/GMT)</label>
<div id="timetime" class="controls">
    <input id="sdate" name="sdate" type="text" placeholder="YYYY-MM-DD HH:MM"></input>
    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
</div>

final answer based on the help given by filmor

<script type="text/javascript">
            $('#timetime').datetimepicker({
                            maskInput: true,
                          format: 'yyyy-MM-dd hh:mm',
                          });

$("form").submit(function(){
   // Let's find the input to check
   var $input = $(this).find("input[name=sdate]");
   if ($input.val()) {
  // Value is falsey (i.e. null), lets set a new one, i have inversed this, input  should be truthy
  //$input.val() = $input.val().toISOString();
    var d = $input.val();
    var iso = new Date(d).toISOString();
  //  alert(iso);
    $input.val(iso);
   }
 });
          </script>

further update to work on both firefox and chrome

<script type="text/javascript">
    $("form").submit(function(){
    // Let's find the input to check
    var input = $(this).find("input[name=sdate]");
    if (input.val()) {
            var picker = $('#timetime').data('datetimepicker');
    //      alert(input.val());
    //      alert(picker.getLocalDate().toISOString());
            input.val(picker.getLocalDate().toISOString());
            }
    });
</script>

possible duplicate of [How do you convert a JavaScript date to UTC?](http://stackoverflow.com/questions/948532/how-do-you-convert-a-javascript-date-to-utc) — filmor, Aug 05 '13 at 07:21
thanks for that link, there is just one more thing i dont understand, where do i convert the date after the user has selected the the date/time, so that it is sent in the get request.? — Allan Pinto, Aug 05 '13 at 07:25
http://stackoverflow.com/questions/9943968/change-input-text-value-with-js-or-jquery-before-submit-if-value-is-null :) — filmor, Aug 05 '13 at 07:30
Just a side note, `` do not have closing tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input — Passerby, Aug 05 '13 at 07:45
filmor, thanks for all the tips. its working now, its a bit roundabout i think , but i hardly know any javascript. im pasting the code here, if anyone else needs it with regards to the bootstrap-datetimepicker — Allan Pinto, Aug 05 '13 at 08:12
hi filmor, the code which i pasted above works in chrome but not in firefox, i even updated and checked and used the shim also for lower versions as mentioned in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString. my version of firefox (23) works for this example http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_toisostring but does not work with my code. any idea what i could be doing wrong. — Allan Pinto, Aug 07 '13 at 05:49

score 8 · Answer 1 · answered Mar 18 '14 at 16:26

8

Just use momentjs.

http://momentjs.com/

function getUTCDate() { return moment($('#sdate').val()).utc().format('YYYY-MM-DDTHH:mm:ssZZ'); }

answered Mar 18 '14 at 16:26

glade

89
1
2

score 2 · Answer 2 · answered Aug 05 '13 at 13:11

<script type="text/javascript">
    $('#timetime').datetimepicker({
                   maskInput: true,
                   format: 'yyyy-MM-dd hh:mm',
    });

$("form").submit(function(){
    var input = $('#sdate').val(); 
    var input = convertToUtc(input);
});


    function convertToUtc(str) {
        var date = new Date(str);
        var year = date.getUTCFullYear();
        var month = date.getUTCMonth()+1;
        var dd = dategetUTCDate();
        var hh = date.getUTCHours(); 
        var mi = date.getUTCMinutes();
        var sec = date.getUTCSeconds();

        // 2010-11-12T13:14:15Z

        theDate = year + "-" + (month [1] ? month : "0" + month [0]) + "-" + 
                  (dd[1] ? dd : "0" + dd[0]);
       theTime = (hh[1] ? hh : "0" + hh[0]) + ":" + (mi[1] ? mi : "0" + mi[0]);
        return [ theDate, theTime ].join("T");
     }

</script>

Thomas Dijoux · Answer 3 · 2015-07-15T11:56:47.343

0

I'm facing the same issue, my datepicker convert 14/07/2015 00:00 GMT(PARIS) to 13/07/2015 22:00 UTC.

I use this for a workaround as i only want to use the date and not time.

var dt = new Date($scope.END_DATE.value);
dt.setUTCHours(1); //set to utc 1 a.m.
$scope.holidays.END_DATE= dt;

The date is stored as 14/07/2015 01:00 in database.

Hope it helps

edited Jul 15 '15 at 11:56

answered Jul 15 '15 at 09:46

Thomas Dijoux

161
5

score 0 · Answer 4 · answered Aug 02 '16 at 14:03

This is the conversion between utc to IST an vice versa https://jsfiddle.net/wmhmgrjs/6/

//2016-08-02 12:55:19.743-- UTC <==> 2016-08-02 6:25:19.743 PM --IST

var date = new Date('8/02/2016 12:55:48 AM UTC'); //2016-07-29 07:02:40.323
var s=date.toString();
alert(s);

var d = new Date('8/02/2016 6:25:00 PM GMT+0530');
//var d = new Date("August 2, 2016 18:26:00");
var n = d.toUTCString();
alert(n);

bootstrap-datetimepicker convert selected local date to UTC

4 Answers4