How to Convert String to Date in Javascript in dd-mmm-yyyy Format

Every modern website or application interacts with dates in one way or another. Whether it’s a birthday entry or a post’s publish date, understanding date manipulation is crucial.

In JavaScript, the ‘Date’ object provides numerous functionalities for date and time operations.

Basic String to Date Conversion

Before diving into custom formats, it’s essential to grasp the basics:

let dateStr = "2023-09-20";
let dateObj = new Date(dateStr);
console.log(dateObj);

Executing the above code will give you a JavaScript Date object for the given date.

Custom Formatting: The dd-mmm-yyyy Format

Now, let’s tackle our main objective – converting the Date object to the dd-mmm-yyyy format:

function formatDate(dateObj) {
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    let day = dateObj.getDate();
    let month = months[dateObj.getMonth()];
    let year = dateObj.getFullYear();

    return `${day}-${month}-${year}`;
}

let formattedDate = formatDate(dateObj);
console.log(formattedDate);  // Outputs: 20-Sep-2023

This function ‘formatDate’ does the magic. It first fetches the day, month, and year from the Date object and then returns a string in our desired format.

Best Practices

1. Validation: Always validate date strings before converting them to prevent unexpected results.
2. Libraries: For extensive date operations and formats, consider libraries like moment.js for more straightforward and powerful date manipulation.
3. Time Zones: Be cautious with time zones. If your application caters to a global audience, make sure you handle time zones appropriately.

Conclusion

Date manipulation is a core part of many JavaScript applications. Converting strings to custom date formats like dd-mmm-yyyy can be achieved with the standard JavaScript Date object, but always be sure to follow best practices to ensure accurate and efficient results. Happy coding!