Question

我有一个PHP日历表单（从http://style-vs-substance.com/code/calendar-class-php/生成，作为基础，但经过大量定制和更新），以表格格式一次输出两个月 - 30/31天。

我想要创建的是商务会议的预订表单，客户端用户可以点击HTML日历上的日期和日期的值，如同整个日期值 - 而不仅仅是当天传递给输入字段。

我想实现类似（伪代码）的东西： （2015年3月的日历月）

   <td><div value='13032015' id='something'>13</div></td>

单击此日期框时，将触发JQuery规则，并将值传递给位于页面下方的输入，并将其格式化为：

<input type='text' value='13th March 2015' name='dateA' id='dateA'>

我最初的问题是，我可以使用jQuery从DIV（而不是 innerHTML ）中获取一个看不见的值并将其传递给输入（具有适当的格式）吗？

第1部分 - 如何让JQuery从DIV中获取值，我可以将值放入输入中 - 这很简单，但我需要为表中的每个div（60+）提供一个唯一的ID而且我是不打算写出60多个JQuery规则，每个div id一个，必须有一个更好的更动态的方法。

第2部分 - 一旦我选择了一个值，我将如何格式化值以使其成为完整日期而不是代码日期标识符？与PHP date()函数类似的东西。

那么，实现这一目标的最佳JQuery方法是什么？我担心每天生成一个自定义的JQuery Var，因为每个页面加载超过60天，看起来非常低效。

我目前正在使用JQuery 1.11.1来处理页面上的其他内容，并且希望使用它而不是JQuery 2.

编辑：

我可以使用DIV id值 - 所以：

<td><div id='13032015'>13</div></td>

以某种方式使用13032015的id字符串成为输入中的日期字符串？

Answer 1

我认为最好的方法是使用数据属性。您有一个带有格式化日期的数据属性和一个带有后端所需日期的数据属性。

当用户点击日期时，您只需将格式化日期放入正常输入，并将后端所需的值用于隐藏字段。

<强> jsfiddle

HTML

<div class="date" data-value='13032015' data-formatted="13th March 2015" id='something'>13</div>
<div class="date" data-value='14032015' data-formatted="14th March 2015" id='something'>14</div>
<div class="date" data-value='15032015' data-formatted="15th March 2015" id='something'>15</div>
<input type='text' value='' name='dateA' id='dateF'> 
<input type='hidden' value='' name='dateA' id='dateD'>

<强>使用Javascript / jQuery的

var date = $('.date');
var inputD = $('#dateD');
var inputF = $('#dateF');
date.on('click', function(){
    var valueD = $(this).data('value');
    var valueF = $(this).data('formatted');
    inputD.val(valueD);
    inputF.val(valueF);
    console.log(valueD);
});

Answer 2

无需ID和动态：

$('td > div').on('click', function() {
    var value = $(this).attr('value');
    // do something with this value
});

对于日期格式，请查看Date API

Answer 3

第1部分 - 如何让JQuery从DIV获取值，我可以将值放入输入 - 这很容易，但我需要为表中的每个div提供一个唯一的ID（ 60+）我不会写出60多个JQuery规则，每个div id一个，必须有一个更好的更动态的方法。

this关键字是JavaScript中的强大工具。需要一段时间才能理解，但从长远来看可以节省更多时间。

$(document).ready(function() {
    $('.click_me').click(function() {
        alert($(this).attr('value'));
    });
});

Here is the demo

第2部分 - 一旦我选择了一个值，我将如何格式化值以使其成为完整日期而不是代码日期标识符？与PHP date（）函数类似的东西。

在JavaScript中使用Date来格式化文本。

$(document).ready(function() {
    $('.click_me').click(function() {
        var new_date = new Date($(this).attr('value'));
        alert(new_date.getDate() + "/" + (new_date.getMonth()+1) + "/" + new_date.getFullYear());
    });
});

Here is the demo

Answer 4

要让<div>包含innerHTML以外的数据，请使用data attributes。因此，您的HTML应如下所示：

<td><div data-value='13032015' id='something'>13</div></td>

要将data-value内容复制到<input>，您可以将jQuery与regex一起使用。

工作代码段：

＆＃13;

$("button#copy").on('click', function(){
  var dateValue = $("div#something").data('value');
  //console.log('dateValue: ' + dateValue);
  
  var dateArray = /^(\d\d)(\d\d)(\d\d\d\d)$/.exec(dateValue);
  //console.log('dateArray : ' + dateArray );
  
  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  
  // Set the input
  $("input#dateA").val(dateArray[1] + 'th ' + monthNames[dateArray[2] - 1] + ' ' + dateArray[3]);
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td><div data-value='13032015' id='something'>13</div></td>

<button id="copy">Copy</button>

<input type='text' value='' name='dateA' id='dateA'>

＆＃13;

Answer 5

1：您可以使用数据属性存储数据。

 to set value=   $(element).data("date","");
 to get value=   $(element).data("date");
        <td><div **data-date**='13032015' id='something'>13</div></td>

2：像这样长时间转换日期

var milliseconds  = Date.parse("2013/01/01");

Answer 6

您可以向div添加一个类

然后，您需要为类中填充输入值的每个元素进行onclick。这里描述的是jQuery to loop through elements with the same class和http://api.jquery.com/click/。

将值从DIV元素传递到输入

编辑：

6 个答案: