Date format not working

Thank you team,

verything is working perfectly now as per Kumar's code

Hello Jignesh Kumar,

This is the current update.

 function dateParser(input) {
            input = input.replace('/Date(', '');
            return new Date(parseInt(input, 10));
           
        }
     
        function GetAllBookingPDFReport() {
            $http.get('/Booking/GetAllBookingHistoryPDF')
           .then(function (response) {
               var data = response.data;
               // Parse dates if needed
               data.forEach(function (item) {
                   if (item.BookingFrom) {
                       item.BookingFrom = dateParser(item.BookingFrom);
                   }
                   if (item.BookingTo) {
                       item.BookingTo = dateParser(item.BookingTo);
                   }
               });

               $scope.PrintBookingRecordList = data;
               sumOfSalesDetails($scope);
           })
           
        }

Could you please share your updated code here? This will help us better understand what might be wrong with it.

Thank you Team for your support so far, but just that nothing is working.

Any further help will be greatly appreciated

Hello Jignesh Kumar

It is not working please

Instead doing it your own, we have several date library which makes code easier. Please refer some of open source datatime libraray Moment.js, Datejs 

Refer this article for more info
https://phrase.com/blog/posts/best-javascript-date-time-libraries/#:~:text=across%20the%20globe.-,Datejs,formatting%2C%20and%20processing%20DateTime%20objects.

Hello Emmmanuel , 

To convert the /Date(1728086400000)/ format into the 'dd-MM-yyyy' format in your JavaScript function, you can modify the parseJsonDate function to include formatting logic. Here’s the updated function:

// Helper function to parse and format JSON dates
function parseJsonDate(jsonDate) {
    // Extract the timestamp from the JSON date string
    var timestamp = parseInt(jsonDate.match(/\/Date\((\d+)\)\//)[1], 10);
    var date = new Date(timestamp);

    // Format the date to 'dd-MM-yyyy'
    var day = String(date.getDate()).padStart(2, '0');
    var month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
    var year = date.getFullYear();

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

Hello Jignesh Kumar

The date format is isn't wroking

Hello Emmmanuel , 

Please use this updated version. It may be / not removed in that so it's giving null.

function GetAllBookingPDFReport() {
    $http.get('/Booking/GetAllBookingHistory')
        .then(function (response) {
            var data = response.data;

            // Parse dates in the format "/Date(1728086400000)/"
            data.forEach(function (item) {
                if (item.BookingFrom) {
                    item.BookingFrom = parseJsonDate(item.BookingFrom);
                }
                if (item.BookingTo) {
                    item.BookingTo = parseJsonDate(item.BookingTo);
                }
            });

            $scope.PrintBookingRecordList = data;

            // Calculate sales details
            sumOfSalesDetails($scope);
        })
        .catch(function (error) {
            console.error("Error fetching booking history:", error);
        });
}

// Helper function to parse JSON dates
function parseJsonDate(jsonDate) {
    // Extract the timestamp from the JSON date string
    var timestamp = parseInt(jsonDate.match(/\/Date\((\d+)\)\//)[1], 10);
    return new Date(timestamp);
}

Hello Jayraj Chhaya,

Please this is the error, message that came.

Hello Amit Mohanty

Please this is the date format that came which isn't what I'm looking for.

I want something like dd-MM-yyyy

Hello Jignesh Kumar

Please when I use your code, this is the result that I got

Thank you team,

Please I will check it out and revert as soon as possible. 

Hello Emmmanual,

If you are encountering issues with the date format, you can apply the following code in your application's front-end JavaScript., It should resolve your issue,

function GetAllBookingPDFReport() {
    $http.get('/Booking/GetAllBookingHistory')
        .then(function (response) {
            var data = response.data;

            // Parse dates if needed
            data.forEach(function (item) {
                if (item.BookingFrom) {
                    item.BookingFrom = new Date(item.BookingFrom);
                }
                if (item.BookingTo) {
                    item.BookingTo = new Date(item.BookingTo);
                }
            });

            $scope.PrintBookingRecordList = data;

            // Calculate sales details
            sumOfSalesDetails($scope);
        })
        .catch(function (error) {
            console.error("Error fetching booking history:", error);
        });
}

Format the dates into a standard format before returning them as JSON. For example

public ActionResult GetAllBookingHistory(string RoomNumber, string sDate = null, string eDate = null)
{
    DateTime? startDate = null;
    if (!string.IsNullOrEmpty(sDate))
        startDate = Convert.ToDateTime(sDate);
    DateTime? endDate = null;
    if (!string.IsNullOrEmpty(eDate))
        endDate = Convert.ToDateTime(eDate);
    
    var bookingList = objHotelDbEntities.RoomBookings.Join(objHotelDbEntities.Rooms,
                      booking => booking.AssignRoomId,
                      room => room.RoomId,
                      (booking, room) => new { booking = booking, room = room });

    var modifiedData = bookingList.GroupBy(x => new { x.booking.BookingFrom, x.booking.BookingTo, x.booking.BookingId }).Select(x => new RoomBookingViewModel
    {
        CustomerName = x.FirstOrDefault().booking.CustomerName,
        Address = x.FirstOrDefault().booking.Address,
        PhoneNo = x.FirstOrDefault().booking.PhoneNo,
        BookingFrom = x.Key.BookingFrom,
        BookingTo = x.Key.BookingTo,
        BookingId = x.FirstOrDefault().booking.BookingId,
        RoomNumber = x.FirstOrDefault().room.RoomNumber,
        NoOfMembers = x.FirstOrDefault().booking.NoOfMembers,
        numberOfDays = System.Data.Entity.DbFunctions.DiffDays(x.Key.BookingFrom, x.Key.BookingTo).Value,
        RoomPrice = x.FirstOrDefault().room.RoomPrice,
        TotalAmount = x.FirstOrDefault().booking.TotalAmount,

    }).ToList();

    if (startDate != null)
    {
        modifiedData = modifiedData.Where(a => a.BookingFrom >= startDate).ToList();
    }
    if (endDate != null)
    {
        modifiedData = modifiedData.Where(a => a.BookingFrom <= endDate).ToList();
    }

    var responseData = modifiedData.Select(a => new
    {
        a.CustomerName,
        a.Address,
        a.PhoneNo,
        BookingFrom = a.BookingFrom?.ToString("yyyy-MM-ddTHH:mm:ss"), // Format to ISO 8601
        BookingTo = a.BookingTo?.ToString("yyyy-MM-ddTHH:mm:ss"),     // Format to ISO 8601
        a.BookingId,
        a.RoomNumber,
        a.NoOfMembers,
        a.numberOfDays,
        a.RoomPrice,
        a.TotalAmount
    }).ToList();

    return Json(responseData, JsonRequestBehavior.AllowGet);
}

On client side, ff you prefer keeping the /Date(timestamp)/ format on the server, parse it in JavaScript using a function. For example:

function parseJsonDate(jsonDate) {
    const timestamp = parseInt(jsonDate.replace(/\/Date\((.*?)\)\//, '$1'));
    return new Date(timestamp);
}

function GetAllBookingPDFReport() {
    $http.get('/Booking/GetAllBookingHistory')
        .then(function (response) {
            var data = response.data;

            // Parse dates in the response data
            data.forEach(booking => {
                booking.BookingFrom = parseJsonDate(booking.BookingFrom);
                booking.BookingTo = parseJsonDate(booking.BookingTo);
            });

            $scope.PrintBookingRecordList = data;
            sumOfSalesDetails($scope);
        });
}

Hi @Emmmanuel FIADUFE,

The date format issue you are encountering, where dates are represented as /Date(1728086400000)/, is typically related to how dates are serialized in JSON. This format is a JSON representation of a .NET DateTime object, which can be confusing when consumed in JavaScript.

To resolve this, ensure that the dates are properly formatted before being sent to the client. You can modify your GetAllBookingHistory action to convert the DateTime objects to a more JavaScript-friendly format, such as ISO 8601.

var modifiedData = bookingList.GroupBy(x => new { x.booking.BookingFrom, x.booking.BookingTo, x.booking.BookingId })
    .Select(x => new RoomBookingViewModel
    {
        // Other properties...
        BookingFrom = x.Key.BookingFrom.ToString("o"), // ISO 8601 format
        BookingTo = x.Key.BookingTo.ToString("o"),
        // Other properties...
    }).ToList();

In your JavaScript function, you can then parse these dates easily:

function GetAllBookingPDFReport() {
    $http.get('/Booking/GetAllBookingHistory')
    .then(function (response) {
        var data = response.data;
        data.forEach(function(item) {
            item.BookingFrom = new Date(item.BookingFrom); // Convert to Date object
            item.BookingTo = new Date(item.BookingTo);
        });
        $scope.PrintBookingRecordList = data;
        sumOfSalesDetails($scope);
    });
}

JS Function

function GetAllBookingPDFReport() {
            $http.get('/Booking/GetAllBookingHistory')
           .then(function (response) {
               var data = response.data;
               $scope.PrintBookingRecordList = data;
               sumOfSalesDetails($scope);
           });
        }