DateTime Format ToString("MMMM yyyy");

[brase]

Description

Formating DateTime behaves differently on server and client.

Repro code

Repl

Expected and actual results

Expected Result: "October 2018"
Actual Result: "10 2018"

[voronoipotato]

Microsoft (R) F# Interactive version 10.2.3 for F# 4.5
Copyright (c) Microsoft Corporation. All Rights Reserved.

For help type #help;;

> # silentCd @".";;
- # 1 @"Untitled-1"
- ;;
> let x = System.DateTime.Now;;
val x : System.DateTime = 10/5/2018 10:53:26 PM

> x.ToString("MMMM yyyy");;
val it : string = "October 2018"

Reproduced expected result in FSI.

Fable/src/js/fable-core/Util.ts

Line 202 in e7954a0

function dateToStringWithCustomFormat(date: Date, format: string, utc: boolean) {

I believe is the function with the incorrect code.

here is the full implementation

https://github.com/dotnet/corefx/blob/9bec7bb7d67ff579287aa341ae7cb9cd5682d444/src/Common/src/CoreLib/System/Globalization/DateTimeFormat.cs

[voronoipotato]

https://momentjs.com/ might be a good thing to use here once we get to localization, though we would have to translate from .net's patterns to moment-js patterns. I'm aware we may not fully replicate DateTime.ToString here but a little probably goes a long way.

     Customized format patterns:
     P.S. Format in the table below is the internal number format used to display the pattern.
     Patterns   Format      Description                           Example
     =========  ==========  ===================================== ========
        "h"     "0"         hour (12-hour clock)w/o leading zero  3
        "hh"    "00"        hour (12-hour clock)with leading zero 03
        "hh*"   "00"        hour (12-hour clock)with leading zero 03
        "H"     "0"         hour (24-hour clock)w/o leading zero  8
        "HH"    "00"        hour (24-hour clock)with leading zero 08
        "HH*"   "00"        hour (24-hour clock)                  08
        "m"     "0"         minute w/o leading zero
        "mm"    "00"        minute with leading zero
        "mm*"   "00"        minute with leading zero
        "s"     "0"         second w/o leading zero
        "ss"    "00"        second with leading zero
        "ss*"   "00"        second with leading zero
        "f"     "0"         second fraction (1 digit)
        "ff"    "00"        second fraction (2 digit)
        "fff"   "000"       second fraction (3 digit)
        "ffff"  "0000"      second fraction (4 digit)
        "fffff" "00000"         second fraction (5 digit)
        "ffffff"    "000000"    second fraction (6 digit)
        "fffffff"   "0000000"   second fraction (7 digit)
        "F"     "0"         second fraction (up to 1 digit)
        "FF"    "00"        second fraction (up to 2 digit)
        "FFF"   "000"       second fraction (up to 3 digit)
        "FFFF"  "0000"      second fraction (up to 4 digit)
        "FFFFF" "00000"         second fraction (up to 5 digit)
        "FFFFFF"    "000000"    second fraction (up to 6 digit)
        "FFFFFFF"   "0000000"   second fraction (up to 7 digit)
        "t"                 first character of AM/PM designator   A
        "tt"                AM/PM designator                      AM
        "tt*"               AM/PM designator                      PM
        "d"     "0"         day w/o leading zero                  1
        "dd"    "00"        day with leading zero                 01
        "ddd"               short weekday name (abbreviation)     Mon
        "dddd"              full weekday name                     Monday
        "dddd*"             full weekday name                     Monday
        "M"     "0"         month w/o leading zero                2
        "MM"    "00"        month with leading zero               02
        "MMM"               short month name (abbreviation)       Feb
        "MMMM"              full month name                       Febuary
        "MMMM*"             full month name                       Febuary
        "y"     "0"         two digit year (year % 100) w/o leading zero           0
        "yy"    "00"        two digit year (year % 100) with leading zero          00
        "yyy"   "D3"        year                                  2000
        "yyyy"  "D4"        year                                  2000
        "yyyyy" "D5"        year                                  2000
        ...
        "z"     "+0;-0"     timezone offset w/o leading zero      -8
        "zz"    "+00;-00"   timezone offset with leading zero     -08
        "zzz"      "+00;-00" for hour offset, "00" for minute offset  full timezone offset   -07:30
        "zzz*"  "+00;-00" for hour offset, "00" for minute offset   full timezone offset   -08:00
        "K"    -Local       "zzz", e.g. -08:00
               -Utc         "'Z'", representing UTC
               -Unspecified ""
               -DateTimeOffset      "zzzzz" e.g -07:30:15
        "g*"                the current era name                  A.D.
        ":"                 time separator                        : -- DEPRECATED - Insert separator directly into pattern (eg: "H.mm.ss")
        "/"                 date separator                        /-- DEPRECATED - Insert separator directly into pattern (eg: "M-dd-yyyy")
        "'"                 quoted string                         'ABC' will insert ABC into the formatted string.
        '"'                 quoted string                         "ABC" will insert ABC into the formatted string.
        "%"                 used to quote a single pattern characters      E.g.The format character "%y" is to print two digit year.
        "\"                 escaped character                     E.g. '\d' insert the character 'd' into the format string.
        other characters    insert the character into the format string.
    Pre-defined format characters:
        (U) to indicate Universal time is used.
        (G) to indicate Gregorian calendar is used.
        Format              Description                             Real format                             Example
        =========           =================================       ======================                  =======================
        "d"                 short date                              culture-specific                        10/31/1999
        "D"                 long data                               culture-specific                        Sunday, October 31, 1999
        "f"                 full date (long date + short time)      culture-specific                        Sunday, October 31, 1999 2:00 AM
        "F"                 full date (long date + long time)       culture-specific                        Sunday, October 31, 1999 2:00:00 AM
        "g"                 general date (short date + short time)  culture-specific                        10/31/1999 2:00 AM
        "G"                 general date (short date + long time)   culture-specific                        10/31/1999 2:00:00 AM
        "m"/"M"             Month/Day date                          culture-specific                        October 31
(G)     "o"/"O"             Round Trip XML                          "yyyy-MM-ddTHH:mm:ss.fffffffK"          1999-10-31 02:00:00.0000000Z
(G)     "r"/"R"             RFC 1123 date,                          "ddd, dd MMM yyyy HH':'mm':'ss 'GMT'"   Sun, 31 Oct 1999 10:00:00 GMT
(G)     "s"                 Sortable format, based on ISO 8601.     "yyyy-MM-dd'T'HH:mm:ss"                 1999-10-31T02:00:00
                                                                    ('T' for local time)
        "t"                 short time                              culture-specific                        2:00 AM
        "T"                 long time                               culture-specific                        2:00:00 AM
(G)     "u"                 Universal time with sortable format,    "yyyy'-'MM'-'dd HH':'mm':'ss'Z'"        1999-10-31 10:00:00Z
                            based on ISO 8601.
(U)     "U"                 Universal time with full                culture-specific                        Sunday, October 31, 1999 10:00:00 AM
                            (long date + long time) format
                            "y"/"Y"             Year/Month day                          culture-specific                        October, 1999
    

[MangelMaxime]

Fable does not support Globalization/Localization in general.

For localization support, we added DateFormat in Fable.PowerPack.

[Zaid-Ajaj]

There is also Fable.DateFunctions binding for date-fns that covers most functions and has localization support, although the formatting patterns are a bit different in date-fns

Also, it hasn't been ported to Fable 2 yet, but that should be easy to do

Edit: just ported to Fable 2 stable and it ready to use

[MangelMaxime]

Ah yes thank you for pointing this one too 😊

[anchann]

Given that PowerPack was conveniently split into multiple libraries, is there a plan to split date formatting into its own library too? I tried looking for it thinking it may already be done, but didn't find anything.

[MangelMaxime]

@anchann It has already be done: https://github.com/fable-compiler/fable-date

The package is called Fable.Date

[anchann]

@MangelMaxime thank you!

[severisv]

Is there documentation on how to use Fable.Date anywhere?

[MangelMaxime]

It was a part of Fable.PowerPack so you can find the documentation here however, it seems like the styles is broken.

I created an issue fable-compiler/fable-date#2

[alfonsogarciacaro]

Closing for now, please reopen if necessary.