基于用户选择限制日期。

huangapple go评论65阅读模式
英文:

Limit dates based on user selection

问题

下面是代码的翻译部分:

我有一个“请假申请表”,员工可以在其中请求不同类型的假期,例如带薪假期、无薪假期、献血假期等。这些类型存储在MySQL表中,我通过以下代码在下拉框中进行可视化:

<div class="form-group">
  <label for="leavetype">请假类型*:</label>
  <select name="leavetype" id="leavetype" required>
    <option disabled selected value="">-- 选择 --</option> <?php
            include "dbConn.php";
            $records = mysqli_query($db, "SELECT leavetype FROM leavestypes");
            while($data = mysqli_fetch_array($records))
            {
              echo "<option value='".$data['leavetype']."'>".$data['leavetype']."</option>";
            }
          ?>
  </select>
</div>

我想要的是限制允许的天数,例如,如果用户选择“献血假期”,则只能在日期选择器中使用两天。用户选择日期的方式如下:

<div class="form-group">
  <label for="startdate">开始日期*:</label>
  <input required="" class="form-control" name="startdate" id="startdate" type="date">
</div>
<div class="form-group">
  <label for="tilldate">结束日期*:</label>
  <input required="" class="form-control" name="tilldate" id="tilldate" type="date">
</div>

我正在尝试通过文件末尾的脚本来限制它:

<script>
const form = document.querySelector('#leave-form');
form.addEventListener('submit', function(event) {
            const startDate = new Date(document.querySelector('#startdate').value);
            const endDate = new Date(document.querySelector('#tilldate').value);
            const leavetype = document.querySelector('#leavetype').value.trim();
            if (endDate < startDate) {
                alert('结束日期不能早于开始日期');
                event.preventDefault();
            } else if (
                leavetype === '献血假期 - 允许两天' ||
                leavetype === 'test2 - 允许两天' ||
                (leavetype === '婚礼假期 - 允许两天' && ((endDate - startDate) / (1000 * 60 * 60 * 24) + 1 > 2)) {
                    alert('您只能使用两天的假期');
                    event.preventDefault();
                }
            });
</script>

我曾尝试使用includes()方法而不是===,但仍然不起作用。问题在于,当我有这个脚本时,无论我在日期选择器中选择多少天,如果我选择了某些类型的假期,它总是会触发警报。

英文:

I have Leave request form where the employees are able to request different type of leaves such as paid leave, non paied leave, leave for blood donation etc.
Those types are stored in Mysql table and i am visualising them in dropdown via this code:

&lt;div class=&quot;form-group&quot;&gt;
  &lt;label for=&quot;leavetype&quot;&gt;Leave type*:&lt;/label&gt;
  &lt;select name=&quot;leavetype&quot; id=&quot;leavetype&quot; required&gt;
    &lt;option disabled selected value=&quot;&quot;&gt;-- Select--&lt;/option&gt; &lt;?php
            include &quot;dbConn.php&quot;;
            $records = mysqli_query($db, &quot;SELECT leavetype FROM leavestypes&quot;);
            while($data = mysqli_fetch_array($records))
            {
              echo &quot;
		&lt;option value=&#39;&quot;.$data[&#39;leavetype&#39;] .&quot;&#39;&gt;&quot; .$data[&#39;leavetype&#39;] .&quot;&lt;/option&gt;&quot;;
            }
          ?&gt;
  &lt;/select&gt;

What i want is to limit allowed days, for example if the user select Leave for blood donation to be able to use only two days in the date pickers. Here is how the user pick dates:

&lt;div class=&quot;form-group&quot;&gt;
  &lt;label for=&quot;startdate&quot;&gt;Start:*&lt;/label&gt;
  &lt;input required=&quot;&quot; class=&quot;form-control&quot; name=&quot;startdate&quot; id=&quot;startdate&quot; type=&quot;date&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
  &lt;label for=&quot;tilldate&quot;&gt;End:*&lt;/label&gt;
  &lt;input required=&quot;&quot; class=&quot;form-control&quot; name=&quot;tilldate&quot; id=&quot;tilldate&quot; type=&quot;date&quot;&gt;
&lt;/div&gt;

I am trying to limit it via script in the end of the file:

&lt;script&gt;
const form = document.querySelector(&#39;#leave-form&#39;);
form.addEventListener(&#39;submit&#39;, function(event) {
            const startDate = new Date(document.querySelector(&#39;#startdate&#39;).value);
            const endDate = new Date(document.querySelector(&#39;#tilldate&#39;).value);
            const leavetype = document.querySelector(&#39;#leavetype&#39;).value.trim();
            if (endDate &lt; startDate) {
                alert(&#39;end date cannot be before start date&#39;);
                event.preventDefault();
            } else if (
                leavetype === &#39;leave for blood donation - two days allowed&#39; ||
                leavetype === &#39;test2 - two days allowed&#39; ||
                (leavetype === &#39;leave for marrage - two days allowed &#39; &amp;&amp; ((endDate - startDate) / (1000 * 60 * 60 * 24) + 1 &gt; 2)) {
                    alert(&#39;You can use only two days for this type of leave&#39;);
                    event.preventDefault();
                }
            });
&lt;/script&gt;

I was trying using includes() method instead of === but not working again.
The problem is that when I have this script if I select some of those type of leaves its always in alert no matter how many days I select in the date picker.

答案1

得分: 0

你需要将"OR"与括号一起放在你的else-if语句中,因为在你的示例中,它在以下情况下触发:

  • leavetype === 'leave for blood donation - two days allowed'
  • leavetype === 'test2 - two days allowed'
  • (leavetype === 'leave for marrage - two days allowed ' && ((endDate - startDate) / (1000 * 60 * 60 * 24) + 1 > 2)

我猜你想要做的是这样:

else if (
    (leavetype === 'leave for blood donation - two days allowed' || 
     leavetype === 'test2 - two days allowed' ||
     leavetype === 'leave for marrage - two days allowed ') &&
    ((endDate-startDate) / (1000 * 60 * 60 * 24) + 1 > 2)
) {
    alert('You can use only two days for this type of leave');
    event.preventDefault();
  }
英文:

You need to group the "OR" with a parenthesis in your else-if statement

Because in your example, it triggers when :

  • leavetype === &#39;leave for blood donation - two days allowed&#39;
  • leavetype === &#39;test2 - two days allowed&#39;
  • (leavetype ===&#39;leave for marrage - two days allowed &#39; &amp;&amp; ((endDate - startDate) / (1000 * 60 * 60 * 24) + 1 &gt; 2)

I'm guessing what you wanted to do is this:

else if (
    (leavetype === &#39;leave for blood donation - two days allowed&#39; || 
     leavetype === &#39;test2 - two days allowed&#39; ||
     leavetype ===&#39;leave for marrage - two days allowed &#39;) &amp;&amp;
    ((endDate-startDate) / (1000 * 60 * 60 * 24) + 1 &gt; 2)
) {
    alert(&#39;You can use only two days for this type of leave&#39;);
    event.preventDefault();
  }

答案2

得分: 0

问题已解决。如果有人在这里寻找解决方案,这是我使用的解决方法:

const form = document.querySelector('#leave-form');
form.addEventListener('submit', function(event) {
  const startDate = new Date(document.querySelector('#startdate').value);
  const endDate = new Date(document.querySelector('#tilldate').value);
  const leavetype = document.querySelector('#leavetype').value.trim(); // 去除任何前导或尾随空白
  const daysDiff = (endDate - startDate) / (1000 * 60 * 60 * 24) + 1;
  if (endDate < startDate) {
    alert('Крайната дата не може да бъде преди началната');
    event.preventDefault();
  } else if (daysDiff > 2 && (leavetype === 'leave for blood donation - two days allowed' || 
  leavetype === 'test2-  two days allowed' ||
  leavetype === 'leave for marrage - two days allowed ')) {
    alert('Можете да поискате максимум 2 дни за този тип отсъствие');
    event.preventDefault();
  }
});

注意:上述代码中的文本保持不变,只是将HTML实体(如&lt;&amp;)转换为原始字符。

英文:

Problem fixed. If someone looking here this is the solution I used:

    const form = document.querySelector(&#39;#leave-form&#39;);
form.addEventListener(&#39;submit&#39;, function(event) {
  const startDate = new Date(document.querySelector(&#39;#startdate&#39;).value);
  const endDate = new Date(document.querySelector(&#39;#tilldate&#39;).value);
  const leavetype = document.querySelector(&#39;#leavetype&#39;).value.trim(); // remove any leading or trailing whitespace
  const daysDiff = (endDate - startDate) / (1000 * 60 * 60 * 24) + 1;
  if (endDate &lt; startDate) {
    alert(&#39;Крайната дата не може да бъде преди началната&#39;);
    event.preventDefault();
  } else if (daysDiff &gt; 2 &amp;&amp; (leavetype === &#39;leave for blood donation - two days allowed&#39; || 
  leavetype === &#39;test2-  two days allowed&#39; ||
  leavetype === &#39;leave for marrage - two days allowed &#39;)) {
    alert(&#39;Можете да поискате максимум 2 дни за този тип отсъствие&#39;);
    event.preventDefault();
  }
});

huangapple
  • 本文由 发表于 2023年3月31日 19:02:36
  • 转载请务必保留本文链接:https://go.coder-hub.com/75897787.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定