I have a razor pages web application that shows DateTimes throughout the application. Everything works great on a desktop browser at all media sizes (including mobile). But when I view the application on my iPhone (using Safari or Google Chrome) the DateTime formats do not show the same as they would on desktop.

For example, a DateTime value of 2024-06-15 11:25:54 PM on Desktop, will show as 2024-06-15 11:25:54 p.m on mobile.

This is my program.cs file:

// Early init of NLog to allow startup and exception logging, before host is built
var logger = NLog.LogManager.Setup().LoadConfigurationFromAppSettings().GetCurrentClassLogger();

try
{
    var builder = WebApplication.CreateBuilder(args);

    builder.Configuration.AddEnvironmentVariables();

    CultureInfo culture = new CultureInfo("en-CA");
    culture.DateTimeFormat = new DateTimeFormatInfo
    {
        ShortDatePattern = "yyyy-MM-dd",
        LongDatePattern = "yyyy-MM-dd hh:mm:ss tt",
        ShortTimePattern = "hh:mm:ss tt",
        LongTimePattern = "hh:mm:ss tt",
        FullDateTimePattern = "yyyy-MM-dd hh:mm:ss tt",
        DateSeparator = "-",
        TimeSeparator = ":"
    };

    builder.Services.Configure<RequestLocalizationOptions>(options =>
    {
        var supportedCultures = new[]
         {
        new CultureInfo("en-CA"),
    };
        options.DefaultRequestCulture = new RequestCulture(culture, culture);
        options.SupportedCultures = supportedCultures;
        options.SupportedUICultures = supportedCultures;
    });

    builder.Services.AddRazorPages();

    // Authorization services...

    // Configuration services...

    // Other application services...

    // Identity services...

    // Logging configuration

    var app = builder.Build();

    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    var localizationOptions = app.Services.GetService<IOptions<RequestLocalizationOptions>>().Value;
    app.UseRequestLocalization(localizationOptions);

    app.UseAuthentication();
    app.UseAuthorization();

    app.UseMiddleware<LogMiddleware>();
    app.UseMiddleware<OnboardingMiddleware>();

    app.MapRazorPages();

    // Static files will not load in any environment except Development without this.
    StaticWebAssetsLoader.UseStaticWebAssets(app.Environment, app.Configuration);

    logger.Info($"Application starting in environment: {app.Environment.EnvironmentName}");
    app.Run();

} catch (Exception ex)
{
    logger.Fatal(ex, "Stopped program because of exception");
    throw;
}
finally
{
    // Ensure to flush and stop internal timers/threads before application-exit (Avoid segmentation fault on Linux)
    NLog.LogManager.Shutdown();
}

To fix the problem where AM and PM show as a.m and p.m, I modified the DateTimeFormat as follows:

    CultureInfo culture = new CultureInfo("en-CA");
    culture.DateTimeFormat = new DateTimeFormatInfo
    {
        ShortDatePattern = "yyyy-MM-dd",
        LongDatePattern = "yyyy-MM-dd hh:mm:ss tt",
        ShortTimePattern = "hh:mm:ss tt",
        LongTimePattern = "hh:mm:ss tt",
        FullDateTimePattern = "yyyy-MM-dd hh:mm:ss tt",
        DateSeparator = "-",
        TimeSeparator = ":",
        AMDesignator = "AM",
        PMDesignator = "PM"
    };

This had no affect on how DateTimes were displayed on mobile. In short, it seems as though the DateTimeFormatInfo configuration has no effect when viewing the application from a mobile device. My application is deployed on IIS.