[SOLVED] jquery DateTimePicker - Grab day of week in selection

jquery DateTimePicker - Grab day of week in selection

I'm trying to add a hidden field when a user selects a date to show the day that it rests on. I looked in the documentation on using the dateFormat but can't seem to render this. So the date shows up in the field like: 01/01/2024, but I want the option to either add the day in the field value or have it as a hidden field and I can display it elsewhere. IE: 01/01/2024 Monday

https://jqueryui.com/datepicker/ The jQuery DateTimePicker

$("input.Date").datepicker({
    onSelect: function (dateText, inst) {
        $("#" + this.id + "_month").attr("value", new Date(dateText).getMonth() + 1);
        $("#" + this.id + "_day").attr("value", new Date(dateText).getDate());
        $("#" + this.id + "_year").attr("value", new Date(dateText).getFullYear());
        $("#" + this.id + "_changeTime").val(Date.now()).trigger('change');
    },
    changeMonth: true,
    changeYear: true,
    yearRange: '1900:2050',
    showButtonPanel: true,
    showOn: 'both',
    buttonText: 'Date',
    buttonImageOnly: true,
    closeText: 'Close',
    showAnim: '',
    dayNamesShort: true
});

Solution

Combining answers from this question and applying to the jquery-ui datepicker, you can get the weekday name two ways: using an array or toLocaleTimeString()

Giving updated snippet, using both methods:

$("input.date").datepicker({
  onSelect: function(dateText, inst) {
    $("#" + this.id + "_changeTime").val(Date.now()).trigger('change');

    var currentDate = $(this).datepicker("getDate");

    var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    var day = days[currentDate.getDay()];
    var month = months[currentDate.getMonth()];

    $("#" + this.id + "_day").attr("value", day);
    $("#" + this.id + "_month").attr("value", month);

    var options = {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    };
    $("#" + this.id + "_date").attr("value", currentDate.toLocaleTimeString('en-us', options));
  },
  changeMonth: true,
  changeYear: true,
  yearRange: '1900:2050',
  showButtonPanel: true,
  showOn: 'both',
  buttonText: 'Date',
  buttonImageOnly: true,
  closeText: 'Close',
  showAnim: '',
  dayNamesShort: true
});

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<input class='date' id='dt'>
<input id='dt_month'>
<input id='dt_day'>
<input id='dt_date'>
<input id='dt_changeTime'>

Although it can be harder to configure initially, I'd suggest using toLocaleTimeString with options as you can then change the locale simply by changing the locale string and don't have to add your own translations.