Change date format? - Githubissues

wlathamIP commented 3 months ago

Is there any way to set a format for how a date is displayed? We've only been able to get it to use MM/DD/YYYY HH:MM:SS but for the data we're working with the timestamp isn't necessary.

ADefWebserver commented 3 months ago

You may want to try a Custom Renderer https://github.com/anmcgrath/BlazorDatasheet/blob/main/src/BlazorDatasheet.SharedPages/Pages/CustomRenderer.razor

https://github.com/ADefWebserver/BlazorDatasheet/commit/0630a0c2b112b7a79d9302afc8f732fcfdc767cd

anmcgrath commented 3 months ago

@wlathamIP you could do as @ADefWebserver suggests and use a custom renderer.

Just added the ability to format dates with the format.NumberFormat. It formats numbers too.

E.g

        Sheet.Cells[3, 4].Format = new CellFormat()
        {
            NumberFormat = "yyyy-MM-dd"
        };

ADefWebserver commented 3 months ago

@anmcgrath - That is so cool that you added that because it is what a lot of people will need 👍🏽The Custom Render is not needed in that case. However, I do need a TimeOnly to use when binding to a "time" field in my underlying database. It will probably take me a few days to get this fully working, but, so far the ability to create your own Custom Renderers is very promising...

https://github.com/ADefWebserver/BlazorDatasheet/commit/7bee41f9fd78f51f04c0f641dfad277f1053bc0f

ADefWebserver commented 3 months ago

Finally got this working...

Use it like this:

        <!-- CustomCellTypeDefinitions is for the TimeEditorComponent and TimeRenderer -->

        <Datasheet @ref="_datasheet"
                   CustomCellTypeDefinitions="CustomTypes" 
                   Sheet="sheet"
                   CanUserMergeRows="false"
                   ShowColHeadings="true"
                   ShowRowHeadings="true"
                   CanUserInsertRows="true"
                   CanUserRemoveRows="true"
                   CanUserInsertCols="false"
                   CanUserRemoveCols="false"
                   CanUserSort="false" />
    </div>

    // For the TimeEditorComponent and TimeRenderer
    private Dictionary<string, CellTypeDefinition> CustomTypes { get; } = new();

    protected override async Task OnInitializedAsync()
    {
        // For the TimeEditorComponent and TimeRenderer
        CustomTypes.Add("time", CellTypeDefinition.Create<TimeEditorComponent, TimeRenderer>());

        // Create a new datasheet
        sheet = new Sheet(numRows: 100000, numCols: 20000);

        await base.OnInitializedAsync();

        // Wait 1 second before loading the table data
        // to join the UI thread
        await Task.Delay(1000);
    }

Set a cell to be the 'time' type like this:

sheet.Cells[2, 2].Type = "time";

ADefWebserver commented 3 months ago

@anmcgrath - Can you close this?

anmcgrath / BlazorDatasheet

Change date format? #80