Question

我正在尝试使用moment.js在HTML表单中解析，验证和重新格式化日期。由于该网站正在国际上使用，我想以D MMM YYYY格式重新格式化日期（例如：2018年4月1日），以尽量减少输入后的混淆。

我的代码中的文本框定义如下：

<input type="text" class="txt-date" name="foo" />

我编写的用于执行验证/重新格式化的JavaScript如下：

$(function () {

    console.log("initial locale: " + moment.locale());
    console.log("initial date format:= " + moment.localeData().longDateFormat('L'));

    var locale = window.navigator.userLanguage || window.navigator.language;
    console.log("changing locale to: " + locale);
    moment.locale(locale);

    console.log("updated locale: " + moment.locale());
    console.log("updated date format = " + moment.localeData().longDateFormat('L'));

    $('input.txt-date').on('change', function() {
        var v = $(this).val();
        if (!v) return; // No value in the textbox

        v = moment(v); // Parse the date
        if (!v.isValid) {
            alert("Invalid Date!");
            return;
        }

        // Re-format the date
        $(this).val(v.format("D MMM YYYY"));
    });
});

这是浏览器日志中的输出：

初始locale = en

初始日期格式= MM / DD / YYYY

将语言环境更改为：en-GB

更新了区域设置：en

更新日期格式= MM / DD / YYYY

基本上，moment.js似乎假设我应该使用英语（美国）区域设置，而不是英语（英国）。根据用户语言更改区域设置（如图所示here）似乎没有任何区别。

我想要做的就是能够以用户的本地/区域格式解析日期字符串（如果以这种方式输入，则为D MMM YYYY）。任何人都可以提供任何指示吗？

解决方案

感谢Phani的帮助。为了实现这一目标，您需要包含 moment-with-locales.js 文件（可以在“https://momentjs.com/downloads/moment-with-locales.js”找到，但也包含在NuGet包中）

更新的JavaScript如下：

$(function () {

    // Configure moment to use the user's locale
    moment.locale(window.navigator.userLanguage || window.navigator.language);

    $('input.txt-date').on('change', function () {
        var v = $(this).val();
        if (!v) return; // No value in the textbox

        // Parse the date specified
        var fmt = moment.localeData().longDateFormat('L');
        v = moment(v, [fmt, "D MMM YY", "D MMM YYYY"]);

        // If the date is invalid, warn the user
        if (!v.isValid()) {
            alert("Invalid Date!");
            return;
        }

        // Re-format the date
        $(this).val(v.format("D MMM YYYY"));
    });
});

这个组合适用于我可以投入的每个有效日期。

Answer 1

问题是由于moment locales缺失或未导入。导入区域设置后，您可以更改区域设置。您可以找到从CDN导入的时刻区域设置（下方）。

请注意，我已根据您的需要将语言环境硬编码为en-gb。

$(function () {          
	console.log(moment.locales())
	console.log("initial locale: " + moment.locale());
	console.log("initial date format:= " + moment.localeData().longDateFormat('L'));

	var locale = window.navigator.userLanguage || window.navigator.language;
	console.log("changing locale to: " + locale);
	moment.locale("en-gb");

	console.log("updated locale: " + moment.locale());
	console.log("updated date format = " + moment.localeData().longDateFormat('L'));

	$('input.txt-date').on('change', function () {
		var v = $(this).val();
		if (!v) return; // No value in the textbox

		v = moment(v); // Parse the date
		if (!v.isValid) {
			alert("Invalid Date!");
			return;
		}

		// Re-format the date
		$(this).val(v.format("D MMM YYYY"));
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<!-- load all available momentjs locales -->
<script src="https://momentjs.com/downloads/moment-with-locales.js"></script>

<input type="text" class="txt-date" name="foo" />

根据用户的区域设置解析日期

1 个答案: