0

I'd like to clean up how my date & time is visualized on my website using DayJs. The date is coming from the javascript native datetime-local in a form and redisplays like Sat Feb 19 2022 21:40:00 GMT-0600 (Central Standard Time).

How do I format it like MM/DD/YYY HH:MM CST on my page?

<div class="row">
    <div class="col-8 offset-2">
        <div class="card mb-3 shadow">
          <div class="card-body mb-4">
            <div class="card-body">
              <h5 class="card-title"><%= event.event_name %></h5>
              <p class="card-text"><%= event.description %></p>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item fw-bold">Artist: 
            <a class="fw-normal" href="/artists/<%=event.artist.id%>/"><%= event.artist.username %></a>
            </li>

           // format on this row 

          <li class="list-group-item fw-bold">Start: 
              <span class="fw-normal"><%= event.event_start %></span>
            </li>

           // and on this row 

          <li class="list-group-item fw-bold">End: 
            <span class="fw-normal"><%= event.event_end %></span>
            </li>
        </ul>
      </div>
</div>

I tried setting the row as below but I keep receiving error: SyntaxError: missing ) after argument list

 <span class="fw-normal"><%= Date(event.event_start).toString("MM/DD/YYYY" "HH:MM") %></span>

Any ideas what I'm doing wrong?

econobro
  • 315
  • 3
  • 17
  • When *Date* is called as a function (i.e. without *new*) it returns a string that represents the current date and time as if `new Date().toString()` had been called. It doesn't take any arguments. DayJS (which has been mostly dormant since 2007) adds methods to the built–in *Date* and *Date.prototype* objects. If you want to use its functionality, you have to call those methods. Likely you want `new Date(event.event_start).toString("MM/DD/YYYY" "HH:MM")`, assuming *event.event_start* is in a supported format (there are only two). – RobG Feb 23 '22 at 02:45
  • Ah, interesting - thank you for the context @RobG . Someone recommended dateJs over momentJs as moment was depreciated.. would your advice be to try and structure using native JS and just skip one of these outdated packages? – econobro Feb 23 '22 at 04:01
  • Moment.js is not deprecated, it's still supported. Luxon is recommended for new projects that might be considering moment.js. Whether you use a library or built–in functionality is a decision only you can make after considering the functionality you require. If it's just to generate a particular format then a simple formatting function is likely a better choice than a library. See [*How to format a JavaScript date*](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date?r=SearchResults&s=1|2741.4426), which has 59 answers. There are many similar questions and answers. – RobG Feb 23 '22 at 05:18

1 Answers1

0
import moment from 'moment';
const DATE_FORMAT = 'YYYY-MM-DD';

const currentDate = moment(new Date()).format(DATE_FORMAT);

    alert(currentDate)';
Umesh Gera
  • 31
  • 2
  • While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Luca Kiebel Mar 03 '22 at 12:17