Wyświetlanie krótkiej nazwy miesiąca w aktualnej dacie formularza

Jednak muszę się poradzić, bo sam tego nie rokminę.
Mam skrypt pokazujący aktualną datę w inpucie o id="date-form-1".

var dateObj = new Date();
var month = ('0' + (dateObj.getMonth() + 1)).slice(-2);
var date = ('0' + dateObj.getDate()).slice(-2);
var year = dateObj.getFullYear();
var d = date + ' ' + month;



document.getElementById("date-form-1").innerHTML = d;

Skrypt inicjujący wyświetlanie daty

<script>document.getElementById('date-form-1').value = d;

W css zmieniłem wielkość liter odnosząc się do identyfikatora, ale chciałbym, żeby miesiąc wyświetlał się krótką nazwą 'Sty', 'Mar' itd.
Jak zmodyfikować powyższy skrypt żeby formularz wyświetlał datę 30 PAŹ?

Znalazłem taki przykład ale nie wiem jak połączyć jedno z drugim

var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
var monthShortNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];

function dateFormat1(d) {
  var t = new Date(d);
  return t.getDate() + ' ' + monthNames[t.getMonth()] + ', ' + t.getFullYear();
}

function dateFormat2(d) {
  var t = new Date(d);
  return t.getDate() + ' ' + monthShortNames[t.getMonth()] + ', ' + t.getFullYear();
}

http://kursjs.pl/kurs/super-podstawy/tablice.php

Coś takiego wymyśliłem, ale wynik nie wyświetla się. Innym razem wyświetla się 30 Undefined

<script>
function myFunction() {
    var month = new Array();
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";

var dateObj = new Date();
var month = ('0' + (dateObj.getMonth() + 1)).slice(-2);
var date = ('0' + dateObj.getDate()).slice(-2);
var year = dateObj.getFullYear();
var d = date + ' ' + month[d.getMonth()];
    
    document.getElementById("date-form-1").innerHTML = d;
} 

</script>

Gdzie zrobiłem błąd?

Skąd Ty wytrzasnąłeś new Array? Jak przeczytasz link, który Ci podesłałem, to znajdziesz odpowiedź. Jeżeli zadajesz pytanie na forum, to spróbuj skorzystać z odpowiedzi, których Ci udzielamy..

var d = date + ' ' + month[d.getMonth()];

debugowałeś tą linię w chrome? Sprawdzałeś co zwróci: d.getMonth()?

@Qumpan:

var now = new Date();
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var month = months[now.getMonth()];
var date = now.getDate().toString().padStart(2, '0');
var formattedDate = '<strong>' + date + '</strong> ' + month;

document.getElementById("date-form-1").innerHTML = formattedDate;

Chodziło mi o to co pokazuje ci debugger w chrome... piszesz, że debugowałeś ale chyba nie debugowałeś :P no dobra, napiszę ci o co mi chodzi...

Najpierw przypisujesz do "month" tablicę i dodajesz wartości, potem do month przypisujesz coś innego a na końcu chcesz z month odczytać miesiąc. Tylko, że pod month już nie masz tablicy bo nadpisałeś tą zmienną czymś innym a po drugie wywołujesz d.getMonth() ale w tym miejscu jeszcze nie masz przecież zmiennej "d".

Naucz się korzystać z debuggera to szybko wychwycisz takie błędy.

są gotowe skrypty w różnych formach wystarczy google-Datepicker i dołączyć