如何给用户两个选项来选择日期（每天和每月）

Posted 2023-05-09

【中文标题】如何给用户两个选项来选择日期（每天和每月）

【英文标题】：How to give the user two options to pick date (daily and monthly)

【发布时间】：2021-06-07 18:22:45

【问题描述】：

我需要为用户提供选择开始日期和结束日期的选项，我正在使用 datepicker 来选择开始日期和结束日期，还需要选择开始月份和结束月份的选项，然后需要将其提交为 DD/MM/YYYY。我正在考虑使用一个下拉菜单，它在日期选择器和其他输入日期的方式之间发生变化，但问题是我认为用户选择的任何选项都需要在相同的 ID（？）下提交，这网站使用它来根据所选时间段返回数据。到目前为止，该网站使用日期选择器，但这不允许用户只选择一个月。我根据this 问题的第一个答案做了一个 sn-p，只是为了说明我的想法。如果网站使用ID根据提交的时间段显示数据，它如何与两个选项一起工作？

$(document).ready(function()
    $('#purpose').on('change', function() 
      if ( this.value == '1')
      
        $("#day").show();
        $("#month").hide();

      
      else
      
        $("#day").hide();
        $("#month").show();

      
    );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='purpose'>
<option disabled selected value> -- escolha o tipo de dado -- </option>
<option value="0">Dado mensal</option>
<option value="1">Dado diário</option>
</select>

<div style='display:none;' id='day'>Dado diário<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='day' value size='20' />
    <br/>
</div>

<div style='display:none;' id='month'>Dado mensal<br/>&nbsp;
<br/>&nbsp;
    <input type='text' class='text' name='day' value size='20' />
    <br/>
</div>

【问题讨论】：

你能更好地解释你想要什么吗？您想要一种只输入月份 (1-12) 还是只输入日期 (1-31) 的方法？

我想 a) 在用户选择按月获取数据的日期之前以某种方式“强制”01/（因为日期需要这样格式化）和 b) 允许网站接受输入，无论是每天还是每月。目前它每天接受，但它使用 ID 来知道它返回数据的时间段，所以我不知道该怎么做，因为每个元素都应该有一个唯一的 ID。

我不确定这是否是你想要的，但我会发布我得到的，你可以说出你的想法

每当我看到有人使用自定义日期选择器或非 iso 标准格式的奇怪日期格式时，它开始在我的皮肤下爬行，为什么不使用正确的输入 type="date 或月”是本地化的用户选择？它具有更好的可访问性，并且对键盘用户更加友好，并且无需 javascript 即可工作。无论我在本地显示什么格式，在提交表单时它总是具有相同的日期格式，并且在触摸设备上超级有效

【参考方案1】：

我不确定那是什么类型的 ID，有很多可能的配置。它只取决于你想要什么。检查每日和每月之间的区别（据我了解）。

Ps: 用 jQuery 试试，这里不行

const day = 18 // can be any
const excludeAllDaysExceptOne = date => (date.getDate() === day ? [true, ''] : [false, ''])

changeDaily = 
  changeMonth: true,
  changeYear: true,
  dateFormat: 'dd/mm/yy'


changeMonthly = 
  changeMonth: true,
  changeYear: true,
  dateFormat: 'dd/mm/yy',
  beforeShowDay: excludeAllDaysExceptOne


$("#mySelect").change(() => 
    $('#datepicker').datepicker('setDate', null);
  const x = document.getElementById("mySelect").selectedIndex;
  if (x === 1) 
    setType(changeDaily)
  
  if( x === 2 )
    setType(changeMonthly)
  
  $("#datepicker").removeAttr("disabled")
)

function setType(type)
 $(function() 
  $("#datepicker").datepicker(type);
 )

<p>Choose your input type
<select id="mySelect">
<option disabled selected>--Choose--</option>
<option>Daily</option>
<option>Monthly</option>
</select>
<br>
<p>Date: <input disabled type="text" name="datepicker" id="datepicker"></p>
 

【讨论】：

它返回<a class='gotoLine' href='#65:22'>65:22</a> Uncaught TypeError: $(...).datepicker is not a function。我还获得了有关我的问题的更多信息。该网站使用 getElementById 返回数据。我的问题是我想的那样，我需要提供两种选择日期的方法，但是在一个 ID 下，以便网站可以解决。不需要担心数据格式的事情，在每日选项上已经是dd/mm/yyyy，我认为可以在选择每月时插入随机日期。

哦，我可以解决的。我很抱歉没有说清楚，当他选择每月时，用户不应该选择日期，只需选择月份和年份。