使用Form标签获取双Jalali日期时格式异常问题求助

你遇到的问题核心在于同一个Calendar.setup配置对象里重复定义了相同的属性——在JavaScript对象中，如果同一个键被多次赋值，最后一次的值会覆盖之前所有的，所以你的配置实际上只对最后一个输入框（inputpickerr）生效，另一个输入框（inputpicker）根本没被正确配置为Jalali日期模式，自然就默认转成公历了。

要给两个输入框分别配置Jalali日期选择器，你需要调用两次Calendar.setup，为每个输入框单独设置配置参数，而不是在同一个对象里重复写属性。

修正后的完整代码 #

<head>
  <link rel="stylesheet" type="text/css" media="all" href="http://www.edak.cf/select_date_ir/datepicker.css" >
</head>
<body>
  <form action="" method="post">
    <div class="input-dte">
      From : <input id="inputpickerr" class="input" name="From" type="text" placeholder="JALALI DATE" />
      To: <input id="inputpicker" class="input" name="To" type="text" placeholder="JALALI DATE" />
      <input name="submit" type="submit" />
    </div>
  </form>

  <script type="text/javascript" src="http://www.edak.cf/select_date_ir/jalali.js"></script>
  <script type="text/javascript" src="http://www.edak.cf/select_date_ir/calendar.js"></script>
  <script type="text/javascript" src="http://www.edak.cf/select_date_ir/calendar-setup.js"></script>
  <script type="text/javascript" src="http://www.edak.cf/select_date_ir/calendar-fa.js"></script>
  <script type="text/javascript">
    // 为第一个输入框（From）配置Jalali日期选择器
    Calendar.setup({
      inputField: "inputpickerr",
      button: "inputpickerr",
      ifFormat: "%Y-%m-%d",
      dateType: 'jalali',
      weekNumbers: false
    });

    // 为第二个输入框（To）配置Jalali日期选择器
    Calendar.setup({
      inputField: "inputpicker",
      button: "inputpicker",
      ifFormat: "%Y-%m-%d",
      dateType: 'jalali',
      weekNumbers: false
    });
  </script>
</body>

优化小技巧 #

如果两个输入框的配置参数大部分相同，你也可以先定义一个基础配置对象，再通过扩展的方式生成每个输入框的配置，这样代码更简洁易维护：

// 定义通用的基础配置
const baseJalaliConfig = {
  ifFormat: "%Y-%m-%d",
  dateType: 'jalali',
  weekNumbers: false
};

// 给第一个输入框应用配置
Calendar.setup({
  ...baseJalaliConfig,
  inputField: "inputpickerr",
  button: "inputpickerr"
});

// 给第二个输入框应用配置
Calendar.setup({
  ...baseJalaliConfig,
  inputField: "inputpicker",
  button: "inputpicker"
});

这样既保证了两个输入框都能正确启用Jalali日期模式，又避免了重复写相同的配置代码。

内容的提问来源于stack exchange，提问作者j.Doee