Localization does not worked with abp-date-range-picker

abpframework / abp

Open Source Web Application Framework for ASP.NET Core. Offers an opinionated architecture to build enterprise software solutions with best practices on top of the .NET and the ASP.NET Core platforms. Provides the fundamental infrastructure, production-ready startup templates, application modules, UI themes, tooling, guides and documentation.

https://abp.io

GNU Lesser General Public License v3.0

12.31k stars 3.32k forks source link

Localization does not worked with abp-date-range-picker #17515

Closed weiwxg closed 8 months ago

weiwxg commented 8 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Description

Some element in abp-date-range-picker does not localized automatically as bellow

In addition, how do I remove clear button in date range selection panel?

Reproduction Steps

Here is my code with abp-date-range-picker:

<abp-column size-sm="_12" size-md="_6" size-lg="_4" size-xl="_3">
    <label class="form-label" for="OccuredTime">@L["OccuredTime"]</label>
    <abp-date-range-picker id="OccuredTime"
                           auto-update-input="true"
                           asp-for-start="StartDate"
                           asp-for-end="EndDate"
                           suppress-label="true"
                           clear-button="false"
                           date-format="YYYY/MM/DD"
                           max-span="@new{month = 1}" />
</abp-column>

Expected behavior

No response

Actual behavior

No response

Regression?

No response

Known Workarounds

No response

Version

ABP Framwork V7.3.1

User Interface

MVC

Database Provider

MongoDB

Tiered or separate authentication server

None (Default)

Operation System

Linux

Other information

No response

weiwxg commented 8 months ago

@salihozkara

salihozkara commented 8 months ago

Hi @weiwxg, does it localize properly when you switch to a different language? (You can try Turkish as an example)

weiwxg commented 8 months ago

Hi @weiwxg, does it localize properly when you switch to a different language? (You can try Turkish as an example)

Yes, it works in Turkish language. Do I need to add some configuration in resource file? Another weird things is some element localize correctly in local environment, but abnormal in Linux server with docker container.

Local environment:

Docker environment:

salihozkara commented 8 months ago

Are packages being added correctly in the Docker environment? Localization files of Moment.js are being used. In the Docker environment, are all languages corrupted, or is it just Chinese that is corrupted?

weiwxg commented 8 months ago

Are packages being added correctly in the Docker environment? Localization files of Moment.js are being used. In the Docker environment, are all languages corrupted, or is it just Chinese that is corrupted?

It looks like just Chinese. And I resolve it as #17523

salihozkara commented 8 months ago

Are packages being added correctly in the Docker environment? Localization files of Moment.js are being used. In the Docker environment, are all languages corrupted, or is it just Chinese that is corrupted?

It looks like just Chinese. And I resolve it as #17523

This solution doesn't seem very pleasing. If you could let me know the replication steps, I would be interested.

weiwxg commented 8 months ago

Are packages being added correctly in the Docker environment? Localization files of Moment.js are being used. In the Docker environment, are all languages corrupted, or is it just Chinese that is corrupted?

It looks like just Chinese. And I resolve it as #17523

This solution doesn't seem very pleasing. If you could let me know the replication steps, I would be interested.

You can create a project with MVC UI, and add a abp-daterange-picker element. Then publish it to Docker in CentOS. Switch language to zh-Hans the problem will appear.

maliming commented 8 months ago

We have mapped the localization script. Please check if bootstrap-datepicker.zh-CN.min.js exists on your Docker in CentOS.

https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Packages/Volo/Abp/AspNetCore/Mvc/UI/Packages/AbpAspNetCoreMvcUiPackagesModule.cs#L21C1-L28

https://github.com/abpframework/abp/blob/dev/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/wwwroot/libs/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js

weiwxg commented 8 months ago

We have mapped the localization script. Please check if bootstrap-datepicker.zh-CN.min.js exists on your Docker in CentOS.

https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Packages/Volo/Abp/AspNetCore/Mvc/UI/Packages/AbpAspNetCoreMvcUiPackagesModule.cs#L21C1-L28

https://github.com/abpframework/abp/blob/dev/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/wwwroot/libs/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js

My project is based on LeptonXLite template. Should this package be included by default. How do I check it?

weiwxg commented 8 months ago

From the Chome console, the script bootstrap-datepicker.zh-CN.min.js is loaded.

weiwxg commented 8 months ago

Hi @maliming @salihozkara , I think I've identified the root cause of the issue. It's because Linux is case-sensitive when it comes to routing. Inside the Docker container, there's a script named zh-CN.js, but the system is requesting zh-cn.js, which leads to a 404 error. However, Windows is case-insensitive, which is why there are no problems during local debugging. When I manually renamed zh-CN.js to zh-cn.js in the container, the issue disappeared. Should abp fixed this issue?

maliming commented 8 months ago

but the system is requesting zh-cn.js

Which system? your application?

weiwxg commented 8 months ago

but the system is requesting zh-cn.js

Which system? your application?

Yes.

maliming commented 8 months ago

Why does your app request zh-cn.js instead of zh-CN?

Was this request sent by abp?

weiwxg commented 8 months ago

@maliming Yes, the request was sent by abp. You can create an MVC project, add a date-range-picker element to the page, and then publish it to CentOS 8 through Docker to verify this issue.

weiwxg commented 8 months ago

It seems like I misspoke. ABP is requesting the resource at 'wwwroot/libs/moment/locale/zh-CN.js,' but in the Docker container, it's only available at 'wwwroot/libs/moment/locale/zh-cn.js.

maliming commented 8 months ago

I don't think so,This image shows it works.

https://user-images.githubusercontent.com/24971860/264913273-4ff1d688-1c71-4b86-bfa9-5ced832e939b.png

weiwxg commented 8 months ago

@maliming No, it doesn't work. You can see in the top right corner that I've switched to the Chinese environment, but the date picker is still displaying in English. Actually, I feel like the issue might not be related to 'bootstrap-datepicker.zh-CN.min.js,' but rather with 'moment/locale/zh-cn.js.' When I manually renamed this script inside the container, the issue disappeared.

zh-CN.js is a copy of zh-cn.js that I duplicated and renamed.

salihozkara commented 8 months ago

https://github.com/abpframework/abp/blob/032ed2641d0fb713543c8a315596db37b26a4e77/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Packages/Volo/Abp/AspNetCore/Mvc/UI/Packages/AbpAspNetCoreMvcUiPackagesModule.cs#L31-L33 It seems like an error occurs because it is given in capital letters here. @maliming, can you fix it?

weiwxg commented 8 months ago

https://github.com/abpframework/abp/blob/032ed2641d0fb713543c8a315596db37b26a4e77/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Packages/Volo/Abp/AspNetCore/Mvc/UI/Packages/AbpAspNetCoreMvcUiPackagesModule.cs#L31-L33

It seems like an error occurs because it is given in capital letters here. @maliming, can you fix it?

Great! This issue finally has a resolution.