HTML表单和Javascript问题

我有一个形式如下：HTML表单和Javascript问题

Start Date and Time: <input type="text" name="startDate" id="startDate" placeholder="July 21, 1983 13:15:00"><br /> 
End Date and Time: <input type="text" name="endDate" id="endDate" placeholder="July 21, 1983 14:15:00">

在我的JavaScript我有：

var startDate = new Date(document.getElementById("startDate").value); 
var endDate = new Date(document.getElementById("endDate").value;);

，但是这是行不通的。

如何从格式中获取信息格式为July 21, 1983 13:15:00格式的变量？

来源

2014-01-25 user2110655

是否要将某人输入的值格式化为JavaScript Date对象格式？ –

Ilan Biala - 是的正确 – user2110655

的占位符是属性并且不能由该元件的值属性作出。您需要使用getAttribute method：

var startDate = document.getElementById("startDate").getAttribute("placeholder");

这会给你的日期时间值。我使用您的示例代码创建了a demo in jsFiddle。

如果您想在使用JavaScript提交表单时采用该值，我建议您使用jQuery。一个可能的解决办法是这样的：

<form action="javascript:alert('test');"> 
    <input type="text" name="startDate" id="startDate" placeholder="July 21, 1983 13:15:00"> 
    <br/> 
    <input type="submit" value="show value" /> 
</form>

和表单提交处理程序解析输入值，检查它是否是一个正确的日期，并显示年份：

var startDate = document.getElementById("startDate").getAttribute("placeholder"); 
// alert(startDate); 

// handle form request 
$("form").submit(function(event) { 
    // get the entered value 
    var value = $("#startDate").val(); 
    // show entered value or inform user to enter something 
    var message = "Please enter something."; 
    if (value) { 
     // is it a date? 
     var date = Date.parse(value); 
     if (!isNaN(date)) { 
      // yes ... 
      message = "You entered the year " + (new Date(date)).getFullYear(); 
     } 
     else { 
      // no :(
      message = "Please enter a correct date like 2014-01-01"; 
     } 
    } 
    alert(message); 
    // do not submit the form for the test 
    event.preventDefault(); 
});

我已经更新了的jsfiddle演示，以便在用户提交表单时显示输入的值。

来源

2014-01-25 19:05:20 pasty

我不认为他想占位符，我想他想要的是用户输入的真实值...他可能需要一个事件监听器。 –

也许这个页面的帮助你

还可以搜索这个词“javascript日期格式” 为了获得更多的结果

来源

2014-01-25 19:03:57 123

对于输入，该值不从占位符拉。它从值属性中拉出。

<input type="text" name="startDate" id="startDate" value="July 21, 1983 13:15:00">

来源

2014-01-25 19:04:14 dthree

如果您想在输入值后获取值，那么在jQuery中使用.on()方法或使用它的JavaScript对应方法即可。我将使用jQuery，所以如果您决定使用代码，请不要忘记将其包含在您正在加载的脚本中。

以防万一你想玩任何代码，这是我的codepen pen。

神奇：

$('input[type="date"]').on('blur', function() { 
    var startingDate = $('#startingDate').val(); 
    var endingDate = $('#endingDate').val(); 
    if (startingDate !== '') { 
     startingDate = new Date(startingDate.replace(/-/g, '/')); 
     $('#startingDateText').text(startingDate); 
    } 
    if (endingDate !== '') { 
     endingDate = new Date(endingDate.replace(/-/g, '/')); 
     $('#endingDateText').text(endingDate); 
    } 
});

我使用jQuery的.on('blur', function())用于输入与type="date"，你可能要改变，如果你有比另外两个设置的监听器。如果您愿意，您可以随时将侦听器附加到按钮上。将日期格式正确设置为JavaScript Date对象并使其易于使用的一个棘手部分是将-从输入日期切换到/，因为否则会出现一些怪癖。

来源

2014-01-25 20:17:27

我的答案是否适合你？ –

HTML表单和Javascript问题

回答

相关问题