Vue AutoViewGrid Date input not localised

ServiceStack VS Vue
1

I’m getting an with Date picker using the AutogridView with AutoForm (it also happens with TextInput with the type Date) not sure what I need to add to make it work

  <AutoQueryGrid
      type="ServiceMaintenanceRepairEntry"
  />

With this Type (cut short for brevity)

{
    [AutoIncrement] [PrimaryKey] public int Id { get; set; }

    [Index] public Enums.SMRType SmrType { get; set; }

    [IntlDateTime(DateStyle.Medium, TimeStyle.Short, Locale = "en-GB")]
    [Index]
    public DateTime EntryDate { get; set; }
}

Displays the date correctly in the grid but not in the AutoForm date picker

Screenshot 2025-07-09 at 21.24.16
Screenshot 2025-07-09 at 21.24.162578×934 241 KB

Removing the IntlDateTime picker doesn’t help either

image
image2574×516 74.3 KB

This is what it looks like in the db

image
image504×352 15.1 KB

Thanks

2

The UI Components (or Web UIs) doesn’t include any additional support for localization above what’s provided in Web Browsers by default. If you submit a feature request for it, please include an example of what a localized control should be rendered as instead.

https://servicestack.net/ideas

Just so its clear, the only effect of the declarative formatting functions e.g. [IntlDateTime] is to change how the results are displayed as seen in your screenshot, they have no effect on the Form Input control that’s rendered. For that you can use the [Input] attribute which should allow changing most of the HTML Input attributes.

3

Surely I’m not the first one to have this issue? I’m trying to get features shipped and keep having to go on side quests for things such as this.

I love what you are doing with ServiceStack and it can do with more testing especially with these kind of scenarios for your international developers.

4

What HTML Input are you exactly trying to render? If it’s missing from the [Input] attribute we can look at adding it.

5

The html input I’m trying to render is a date picker.

The picker input on the AutoForm is fine its just the value and it looks like if you don’t change the date value on AutoForm and click save it sends back the date with the incorrect value.

6

Yes but what HTML are you trying to render, e.g. <input ...>

7

Not sure what you mean, it’s what ever AutoForm is using for DateTime

is this what you are after?

<input type="date" name="entryDate" id="entryDate"  placeholder="Entry Date" aria-invalid="false" aria-describedby="entryDate-error" step="any" value="2021-05-31">
8

Right, that’s what’s being used, what do you want it to use instead? and is there something missing in the [Input] attribute to change it?

9

Not sure what’s missing tbh

Would be good to pass the correct date value to the input in the first instance.

Would the function dateInputFormat have something to do with it? For a Date only field we shouldn’t try and get the etc time which is causing the issue?

https://github.dev/ServiceStack/servicestack-vue/blob/37e19daca9fdb308b1970a13b799ae2051dbf36c/src/use/utils.ts#L9-L15

something like this does the trick

function dateInputFormat(value: Date | string | Object) {
  if (value == null || typeof value == 'object') return ''
  const d = toDate(value)
  if (d == null || d.toString() == 'Invalid Date') return ''
  // Use local time to format for input[type=date]
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}
10

The issue for me looks like it can be resolved by using the postgresql Date type instead of timestamp and using the type DateOnly for the dto.

[CustomField("DATE")] 
public DateOnly EntryDate { get; set; }

Is there a way to get a given provider to use the Date column type for all DateOnly types without having to use the CustomField attribute?

11

See OrmLite Type Converters for how to change how OrmLite handles different .NET Data Types.

E.g. you can subclass an existing PostgreSQL Converter and change the column definition it should use with:

public class MyPostgreSqlDateOnlyConverter : PostgreSqlDateOnlyConverter
{
    public override string ColumnDefinition => "DATE";
}

Which then needs to be registered with your PostgreSqlDialect Provider, e.g:

PostgreSqlDialect.Provider.RegisterConverter<DateOnly>(
    new MyPostgreSqlDateOnlyConverter());
1 Like