Passing values from a DIV element to an input

Question

I have a PHP calendar form (generated from http://style-vs-substance.com/code/calendar-class-php/ as a base, but heavily customised and updated) which outputs two month at a time - 30/31 days, in a tabular format.

What I am trying to create is a booking form for business meetings, whereby the client user can click on a date on the HTML calendar and the value of the date as in the whole date value - not just the day is passed to the input field.

I would like to achieve something like (pseudo code): (calendar month of March 2015)

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

On clicking this date box, the JQuery rule is fired and the value is passed to the input which is further down the page and formatted into something like:

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

My initial issue is, can I take a unseen value from a DIV (rather than innerHTML) using jQuery and pass it to the input (with appropriate formatting)?

Part 1 - How to get JQuery to take a value from the DIV, I can place values into the input - that's easy, but I would need a unique ID for each div in the table (60+) and I'm not going to write out 60+ JQuery rules, one for each div id, there must be a better more dynamic way of doing this.

Part 2 - Once I have a value selected, how would I go about formatting the value to make it a full date rather than the code date identifier? Something similar to PHP date() function.

So, What would be the best JQuery way of achieving this? I am wary of generating a custom JQuery Var for each day as that's 60+ days on each page load, seems quite inefficient.

I am currently using JQuery 1.11.1 for other things on the page, and would be looking to use this rather than JQuery 2.

EDIT:

Could I take the DIV id value - so :

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

And somehow use the id string of 13032015 to become the date string in the input?

Answer 1

I think the best way is to use data attributes for both. You have one data attribute with the formatted date and one data attribute with the date you want for the backend.

When a user clicks the date you simply put the formatted date into a normal input and use the value you need for the backend into a hidden field.

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

No id required and dynamic:

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

And for the date formatting have a look at the Date API

Answer 3

Part 1 - How to get JQuery to take a value from the DIV, I can place values into the input - that's easy, but I would need a unique ID for each div in the table (60+) and I'm not going to write out 60+ JQuery rules, one for each div id, there must be a better more dynamic way of doing this.

The this keyword is a powerful tool in JavaScript. It takes a while to understand but saves way more time in the long run.

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

Here is the demo

Part 2 - Once I have a value selected, how would I go about formatting the value to make it a full date rather than the code date identifier? Something similar to PHP date() function.

Use Date in JavaScript to format the text.

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

For your <div> to contain data other than innerHTML, use data attributes. So, your HTML for this should look like:

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

For copying the data-value content into the <input>, you can use jQuery with regex.

Working Code Snippet:

$("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: You can use data attribute for storing data.

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

2: Convert Date in long time like this

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

Answer 6

You can add a class to the div

Then you want an onclick for each element in the class which fills the value of the input. That is described here jQuery to loop through elements with the same class and here http://api.jquery.com/click/ .