Bug scheduler AND DateTimeInput on Safari

the date Format received from scheduler is not compatible with Safari

by mogador

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<H2>
  Just double-click somewhere on a cell of the scheduler : a window should appear, explaining on which cell you clicked…
  the jqxdatetimeinput works well on chrome, firefox and edge, but not on SAFARI
</H2>
<div id="jqxWindow" class="hidden">
  <div id="windowHeader">
    <label>You clicked on cell : </label>
  </div>
  <div id="windowContent">
    <p>
      Value Received on CellClick:
    </p>
    <div id='stringReceived'></div>
    <br>
    <br>
    <P>
      Show value in jqxDateTimeInput
    </P>
    <div id='jqxDateTimeInput'></div>
  </div>
</div>


<div id="scheduler"></div>

JavaScript

var sCellClicked;
 
  $("#jqxDateTimeInput").jqxDateTimeInput({
    width: '110px',
    height: '25px',
    formatString: 'HH:mm',
    showTimeButton: true,
    showCalendarButton: false,
    culture: 'fr-FR'
  });

  $('#jqxWindow').jqxWindow({
    autoOpen: false,
    isModal: true,
    height: 400,
    closeButtonSize: 32
  });

  $('#jqxWindow').on('open', function(event) {
    // force timeout
    setTimeout(jqxWindowFill, 200);
  });

  function jqxWindowFill() {
    // initialisation des champs
    $('#stringReceived').text(sCellClicked);

    var oDateTime = new Date(sCellClicked); // Change the string to Date

    $('#jqxDateTimeInput').jqxDateTimeInput('setDate', oDateTime);
  }


  var appointments = new Array();

  var appointment1 = {
    id: "id1",
    description: "",
    location: "",
    subject: "Meeting…",
    calendar: "Room 1",
    start: new Date(2019, 10, 18, 9, 0, 0),
    end: new Date(2019, 10, 18, 12, 0, 0)
  }

  appointments.push(appointment1);

  // prepare the data
  var source = {
    dataType: "array",
    dataFields: [{
        name: 'id',
        type: 'string'
      },
      {
        name: 'description',
        type: 'string'
      },
      {
        name: 'location',
        type: 'string'
      },
      {
        name: 'subject',
        type: 'string'
      },
      {
        name: 'calendar',
        type: 'string'
      },
      {
        name: 'start',
        type: 'date'
      },
      {
        name: 'end',
        type: 'date'
      }
    ],
    id: 'id',
    localData: appointments
  };
  var adapter = new $.jqx.dataAdapter(source);
  $("#scheduler").on('bindingComplete', function(event) {
    var args = event.args;
  });

  $("#scheduler").jqxScheduler({
    date: new $.jqx.date(2015, 11, 23),
    width: 850,
    height: 600,
    source: adapter,
    showLegend: false,
    editDialog: false,
    ready: function() {
      $("#scheduler").jqxScheduler('ensureAppointmentVisible', 'id1');
    },
    resources: {
     ...