如何在Symfony应用程序中更改日期选择器的语言环境取决于用户喜欢的语言

Question

在Webpack和jquery-ui datepicker之类的软件包之上，我很难为JS模块提供全功能的语言环境处理。

事实是，某些插件需要额外的文件来设置本地翻译。如果我的网站有6或7个翻译版本，则加载的文件量非常巨大，一无所有。

我做了一些工作，找到了我共有的解决方案，因为我还没有找到关于SO的完整解决方案。

Answer 1

我下载的所有文件和日期查询和时刻语言环境处理的Jquery-ui的全部内容（绕过jquery ui的额外文件加载）

yarn add jquery-ui moment

在webpack.config.js中，我添加了这些行以下代码段摘自此issue

var webpack = require('webpack');

Encore
  .addPlugin(new webpack.IgnorePlugin(/\.\/locale$/))

这是为了避免这种情况

在我的app.js中，我添加了以下几行：

require('jquery-ui/themes/base/core.css');
require('jquery-ui/themes/base/theme.css');
require('jquery-ui/themes/base/datepicker.css');
require("jquery-ui/ui/widgets/datepicker");

加载CSS和JS来进行适当的日期选择（使用jquery-ui样式）最后我还放了：

global.moment = require('../../node_modules/moment/min/moment-with-locales');

请小心使用with-locales，这会大大简化datepicker的配置（您不必加载额外的文件进行翻译）。

现在如何使用它：

用这样的用户语言环境简单地配置日期选择器：

$(document).ready(function () {
  let localeDataset = document.querySelector('.js-locale');
  moment.locale(localeDataset.dataset.locale);
  var momentLocaleData = moment.localeData();
  console.log(momentLocaleData);

  $.datepicker.regional[localeDataset.dataset.locale] = {
    monthNames: momentLocaleData._months,
    monthNamesShort: momentLocaleData._monthsShort,
    dayNames: momentLocaleData._weekdays,
    dayNamesShort: momentLocaleData._weekdaysMin,
    dayNamesMin: momentLocaleData._weekdaysMin,
    firstDay: momentLocaleData._week.dow,
  };

  $.datepicker.setDefaults($.datepicker.regional[localeDataset.dataset.locale]);
}

此行let localeDataset = document.querySelector('.js-locale');对于完成此工作非常重要，它是从HTML布局中引用此行<div class="js-locale" data-locale="{{ locale }}"></div>

请注意，locale是来自浏览器或网站首选选择的侦听器的树枝变量

您已经准备就绪，现在如果用户更改其区域设置，则日期选择器也会相应更改。