时间戳

首页 > 解决方案 > 根据表单输入更改 Datepicker 格式和输出

javascript - 根据表单输入更改 Datepicker 格式和输出

问题描述

如果这个问题已经得到回答，请提前道歉。我搜索但找不到答案。

我在网页上使用 datepicker，代码如下。

$(function() {
  $("#datepicker").datepicker({
    dateFormat:"DD, MM d, yy",
    minDate: 0,
  });
});

我也有以下表格。

<select id="language">
  <option value="english">English</option>
  <option value="french">French</option> 
</select>
<button onclick="showDate()">Submit</button>

我想dayNames根据所选选项更改日期选择器格式和值。我相信我需要一个if操作员，但似乎无法让它正常工作。

因此，如果选择了“法语”选项，则 dateFormat 将为“DD d MM yy”，并且 dayNames 将设置为"dayNames: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"]".

然后生成的日期将出现在一个段落中。因此，如果选择法语，则日期将显示"mercredi 25 décembre 2019"，如果选择英语，则日期将显示"Wednesday, December 25, 2019"由于默认日期格式，日期将读取。

我对 JavaScript 和 jQuery 还很陌生，如果有任何见解，我将不胜感激。我最初考虑在选择“法语”时更改日历的本地化，但这可能会使事情变得过于复杂。

标签： javascriptjquerydatepicker

解决方案

感谢您的澄清！这是一个可以帮助您找到所需内容的答案。所有主流浏览器都可以使用 javascript 翻译日期.toLocaleDateString(language, options)，因此我为您编写了一个可以运行的代码段，您可以随意使用。

注意：我已将您的选择更改为具有 toLocaleDateString 函数所需的语言环境字符串的值，并且您可以使用dateOptions对象的格式进行调整。( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString )

所以getDatedatepicker 的方法返回一个 javascriptDate对象，这是toLocaleDateString. 并且currentLanguage使用 jquery 设置变量以获取所选下拉项的值。

希望这可以帮助！

$(function() {
  $("#datepicker").datepicker({
    dateFormat:"DD, MM d, yy",
    minDate: 0,
  });
});

function showDate() {
  var dateOptions = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
  var selectedDate = $("#datepicker").datepicker("getDate");
  var currentLanguage = $("#language option:selected").val();
  alert(selectedDate.toLocaleDateString(currentLanguage, dateOptions)); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<input id="datepicker">

<select id="language">
  <option value="en-US">English</option>
  <option value="fr-FR">French</option> 
</select>
<button onclick="showDate()">Submit</button>

推荐阅读