将值从DIV元素传递到输入

我有一个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'> 

我最初的问题是, 我可以从DIV(而不是innerHTML)使用jQuery获取一个看不见的值,并将其传递给输入(使用适当的格式)?

第1部分 - 如何让JQuery从DIV中获取值,我可以将值放入输入 - 这很容易,但我需要表中每个div的唯一ID(60+),而且我不打算写出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字符串成为输入中的日期字符串?


我认为最好的方法是为两者使用数据属性 。 您有一个带有格式化日期的数据属性和一个数据属性以及您希望用于后端的日期。

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

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

没有id需要和动态:

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

而对于日期格式,请看Date API


第1部分 - 如何让JQuery从DIV中获取值,我可以将值放入输入 - 这很容易,但我需要表中每个div的唯一ID(60+),而且我不打算写出60多个JQuery规则,每个div id有一个规则,必须有更好的更动态的方式来做到这一点。

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

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

这是演示

第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());
    });
});

这是演示

链接地址: http://www.djcxy.com/p/83511.html

上一篇: Passing values from a DIV element to an input

下一篇: Get the text from all elements with the same class