ColdFusion日期字段的JavaScript日期格式 [英] JavaScript Date Format for ColdFusion Date Field

查看:171
本文介绍了ColdFusion日期字段的JavaScript日期格式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

是否可以添加一些功能来设置日期格式,并要求用户输入MM / DD / YYYY? MASK不工作。



费用计算器功能:

 功能getDatePrice(){
var datePrice = 0;
var theForm = document.forms.form;
var purchasedate = theForm.elements.purchasedate;
var date = new Date(purchasedate.value);
如果(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); // ..去吧
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 =估计转账费$+ titleFees;
}

输入按钮:(需要ColdFusion):

 < cfinput 
type =datefield
name =purchasedate
width =130
required =yes
message =请输入购买日期。
value =#dateformat(now(),mm / dd / yyyy)#
oninput =calculateTotal();
>


解决方案

我要继续添加一个答案因为另一个问题已经在同一个问题上被打开。我相信问题是< cfinput type =datefield... 代码中的 mask 在使用Flash表单时有效 - 文档参考



我从


屏蔽cfcalendar和datefield输入



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



...



以下模式指定 Flash表单 将使用datefield输入控件选择的日期发送到ColdFusion,格式为04/29/2004:



< cfinput name =startDatetype =datefieldlabel =date:mask =mm / dd / yyyy/>


由于您没有使用Flash表单,所以面具不适合您。您可以尝试切换到常规的< cfinput type =text... 输入并将您的蒙版更改为像99/99 / 9999。这将给您正确的格式,但用户仍然可以输入无效日期,因此您需要额外的代码才能捕获。



在您所说的评论中:


什么是奇怪的是我有其他的实际工作像.. < cfinput type =textname =odate id =odatevalidateat =onSubmitvalidate =noblanksrequired =yesmessage =请输入里程表日期。 value =mask =99/99/9999placeholder =08/05/2014> 但由于某种原因,它只是日期字段,除了MASK


请注意,您正在这里使用text输入,以便掩码工作(如我以前的评论)。只有使用datefield键入掩码不起作用;



这只是为什么使用内置的ColdFusion UI标签不是一个好主意的另一个例子。他们为非常简单的例子工作,但是当您需要更多的定制化时,它们会失败。您最好使用JavaScript库(如jQuery)进行客户端验证。 Adobe自己的本Forta承认这几年前 ColdFusion-UI-the-Right-Way项目已经启动,因为



编辑



Adam指出 ColdFusion文档中的另一个引用,这更加强化了我的观点。 输入数据



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


Is it possible to add something to this function that will set up the date format and require the user to enter MM/DD/YYYY? MASK is not working..

Fee Calculator Function:

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;
    }

Calling Function:

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

Input Button: (Requiring ColdFusion):

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

解决方案

I am going to go ahead and add an answer here since another question has been opened regarding the same issue. I believe the problem is that the mask attribute on the <cfinput type="datefield" ... code only works when using Flash forms - documentation reference.

I have emphasized the text from that documentation below:

Masking cfcalendar and datefield input

In the cfcalendar tag and the Flash format datefield input control, you use the following masks to determine the format of the output. You can use uppercase or lowercase characters in the mask:

...

The following pattern specifies that the Flash form sends the date selected using a datefield input control to ColdFusion as text in the format 04/29/2004:

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

Since you are not using a Flash form the mask is not working for you. You could try switching to a regular <cfinput type="text" ... input and change your mask to something like "99/99/9999". That would give you the correct format but the user could still enter invalid dates so you would need additional code to catch that.

In the comments you stated:

What is strange is that I have others that actually work like.. <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"> but for some reason it is just the datefield that will not except the MASK

Notice that you are using a "text" input here so the mask works (as in my previous comment). It is only with the "datefield" type that the mask does not work; unless you are using a Flash form.

This is just another example of why using the built-in ColdFusion UI tags is not a good idea. They work for very simple examples but when you need more customization they fail you. You would be better off to use a JavaScript library (like jQuery) for client side validation. Adobe's own Ben Forta acknowledged this several years ago. And the ColdFusion-UI-the-Right-Way project was started because of this as well.

EDIT

Adam pointed out another reference in the ColdFusion documentation that reinforces my point. I have emphasized the text from that documentation below:

Masking input data

In HTML and Flash forms, the mask attribute controls the format of data that can be entered into a text field or that is selected in a datefield input control calendar. In HTML format, it does not prevent users from typing a date that does not follow the mask into a datefield input control. You can combine masking and validation on a field.

这篇关于ColdFusion日期字段的JavaScript日期格式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆