Question

是否可以在此功能中添加一些设置日期格式并要求用户输入MM / DD / YYYY的内容？ MASK无法正常工作..

费用计算器功能：

function getDatePrice() { 
      var datePrice = 0;
      var theForm = document.forms.form;      
      var purchasedate = theForm.elements.purchasedate; 
      var date = new Date(purchasedate.value);
      if (Object.prototype.toString.call(date) !== '[object Date]') {
        date = new Date();
      }
      var today = new Date();
      var diffMilli = today - date;
      var diffDays = Math.floor(diffMilli / 1000 / 60 / 60 / 24); // ..Divide!
      if (diffDays > 30) {
        datePrice = 20;
      }
      else {
        datePrice= 0;
      }
      return datePrice;
    }

调用功能：

function calculateTotal()
{
    var titleFees = getDatePrice();
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;
}

输入按钮:(需要ColdFusion）：

<cfinput
       type="datefield"
       name="purchasedate"
       width="130"
       required="yes"
       message="Please enter purchase date."
       value="#dateformat(now(),"mm/dd/yyyy")#" 
       oninput="calculateTotal();"
       >

Answer 1

我将继续在这里添加一个答案，因为another question已针对同一问题打开了。我认为问题是mask代码上的<cfinput type="datefield" ...属性仅在使用Flash表单时才有效 - documentation reference。

我从下面的文档中 强调文字 ：

屏蔽cfcalendar和日期字段输入

在cfcalendar标记和 Flash格式的日期字段输入控件 中，使用以下掩码来确定输出的格式。您可以在掩码中使用大写或小写字符：

...

以下模式指定 Flash表单 将使用日期字段输入控件选择的日期作为文本以04/29/2004格式发送给ColdFusion：

<cfinput name="startDate" type="datefield" label="date:" mask="mm/dd/yyyy"/>

由于您没有使用Flash表单，因此掩码不适合您。您可以尝试切换到常规<cfinput type="text" ...输入，并将掩码更改为"99/99/9999"。这将为您提供正确的格式，但用户仍然可以输入无效日期，因此您需要额外的代码来捕获它。

你在评论中说：

奇怪的是，我有其他人实际上像... <cfinput type="text" name="odate" id="odate" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter odometer date." value="" mask="99/99/9999" placeholder="08/05/2014">那样工作，但由于某种原因它只是除了MASK之外的日期字段

请注意，您在此处使用"text"输入，因此蒙版可以正常工作（如我之前的评论）。仅使用"datefield"类型掩码不起作用; 除非您使用Flash表单。

这只是为什么使用内置的ColdFusion UI标签不是一个好主意的另一个例子。它们适用于非常简单的示例，但是当您需要更多自定义时，它们会让您失望。最好使用JavaScript库（如jQuery）进行客户端验证。 Adobe自己的Ben Forta acknowledged this several years ago。 ColdFusion-UI-the-Right-Way project因此也开始了。

修改

亚当指出another reference in the ColdFusion documentation强调了我的观点。我从下面的文档中 强调了文字 ：

屏蔽输入数据

在HTML和Flash表单中，mask属性控制可以输入文本字段或在日期字段输入控件日历中选择的数据格式。 在HTML格式中，它不会阻止用户在日期字段输入控件中键入不遵循掩码的日期。 您可以在字段上组合屏蔽和验证。< / p>

ColdFusion日期字段的JavaScript日期格式

1 个答案: