2

I have some list of dates and I want to add div to the date and separate the days and months to a different div.

<div class="campaign">30/11/2016 - 
  <a href="#" target="_blank">Dummy Text</a>
</div>

I want to select and add div to the date. I also want to separate the days and months like this. Any help appreciated in advance. 

<div class="campaign"> 
  <div class="date-wrapper">
    <div class="date">30</div>
    <div class="month">Nov</div>
    <div class="year">2016</div>
  </div> 
  <a href="#" target="_blank">Dummy Text</a>
</div>

I have tried the append method but I am not able select the date and store in a variable.

  • Please show us your JS code, then we can see what's going wrong. – jrswgtr Nov 14 '18 at 09:53
  • Do you want to do it by a button click ? – SilentCoder Nov 14 '18 at 09:53
  • @SilentCoder. I just want to write a jquery code. –  Nov 14 '18 at 09:55
  • @jrswgtr. I am not a able to add a div to the date. If I can add a div to the date then by using append method on Id or Class, I can proceed. Please, Can you show, how to add a div to the date. –  Nov 14 '18 at 09:57
  • The dates isn't match. first is `11/30` and second is `29 Oct` – Mohammad Nov 14 '18 at 10:01
  • How do you get your date, and in what format? As a string, or a `Date` object? You could do something like `$('
    ').text('oct').appendTo($('.campaign'));`     – jrswgtr Nov 14 '18 at 10:01
  • @Mohammad. I have matched the date. Please can you suggest a method. –  Nov 14 '18 at 10:04
  • 1
    @jrswgtr. Thank You for the support and answer. –  Nov 14 '18 at 10:23

4 Answers4

2

You can use .prepend( function ) to insert new HTML content in first of element.

var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];

$(".campaign").prepend(function(){
  var dates = $(this).contents()[0].nodeValue.trim().match(/\d+/g);
  $(this).contents()[0].nodeValue = "";
  return '\
    <div class="date-wrapper">\
    <div class="date">'+dates[1]+'</div>\
    <div class="month">'+monthNames[+dates[0]-1]+'</div>\
    <div class="year">'+dates[2]+'</div></div> \
    </div>';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="campaign">11/30/2016 - 
  <a href="#" target="_blank">Dummy Text</a>
</div>
Mohammad
  • 21,175
  • 15
  • 55
  • 84
0

Check whether this is working for you?

$('#convert').click(function(){
  let date = $('.campaign').text().split('/');
  
  let dateDiv ='<div class="date">'+date[1]+'</div>';
  let monthDiv = '<div class="month">'+date[0]+'</div>';
  let yearDiv = '<div class="year">'+date[2]+'</div></div>';
  
  $('.campaign').html(dateDiv + monthDiv + yearDiv)
  

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="campaign">11/30/2016 - 
<a href="#" target="_blank">Dummy Text</a>
</div>

<button id="convert">Convert</button>
SilentCoder
  • 1,970
  • 1
  • 16
  • 21
0

Bit late to the party. My solution uses date parsing to extract date results. Prepending divs is much simpler in this case.

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];

var campaign = $($('.campaign')[0]);
var dateString = campaign.text().split('-')[0];
var date = new Date(Date.parse(dateString));

campaign.contents()[0].nodeValue = "";
campaign.prepend('<div class="year">'+date.getFullYear()+'</div>');
campaign.prepend('<div class="month">'+months[date.getMonth()]+'</div>');
campaign.prepend('<div class="date">'+date.getDate()+'</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="campaign">11/30/2016 - 
<a href="#" target="_blank">Dummy Text</a>
</div>
YetAnotherBot
  • 1,937
  • 2
  • 25
  • 32
0

Try it.

$('.campaign').each(function(){

 var dateStr = $(this).text().split('/'),
  dateDD = dateStr[0],
  dateMM = dateStr[1],
  dateYY = dateStr[2];

 function GetMonthName(monthNumber) {

  var months = ['Jan', 'Feb', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Dec'];
  return months[monthNumber - 1];

 }

 var newDate = '<div class="campaign1">'+'<div class="date-wrapper">'+'<div class="date">'+dateStr[0]+'</div>'+ '  <div class="month">'+GetMonthName(dateMM) + '</div> ' + '<div class="year">'+dateStr[2]+'</div>'+'</div>'+'<a href="#" target="_blank">Dummy Text</a>'+'</div>';
 $('.test').append(newDate);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="campaign">30/11/2016</div>  
<a href="#" target="_blank">Dummy Text</a>


<div class="test"></test>
Raji
  • 165
  • 6