将值从 DIV 元素传递到输入

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 (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。

工作代码片段：

$("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]);
  
});

<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'>

Answer 5

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

 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/ 进行了描述。