Add div to the date showing in html and separate the days and month
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.
javascript jquery html5 jquery-append
|
show 3 more comments
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.
javascript jquery html5 jquery-append
Please show us your JS code, then we can see what's going wrong.
– jrswgtr
Nov 14 '18 at 9:53
Do you want to do it by a button click ?
– SilentCoder
Nov 14 '18 at 9:53
@SilentCoder. I just want to write a jquery code.
– user8531037
Nov 14 '18 at 9: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.
– user8531037
Nov 14 '18 at 9:57
1
@jrswgtr. Thank You for the support and answer.
– user8531037
Nov 14 '18 at 10:23
|
show 3 more comments
2
2
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.
javascript jquery html5 jquery-append
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.
javascript jquery html5 jquery-append
javascript jquery html5 jquery-append
edited Nov 14 '18 at 10:21
asked Nov 14 '18 at 9:50
user8531037
Please show us your JS code, then we can see what's going wrong.
– jrswgtr
Nov 14 '18 at 9:53
Do you want to do it by a button click ?
– SilentCoder
Nov 14 '18 at 9:53
@SilentCoder. I just want to write a jquery code.
– user8531037
Nov 14 '18 at 9: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.
– user8531037
Nov 14 '18 at 9:57
1
@jrswgtr. Thank You for the support and answer.
– user8531037
Nov 14 '18 at 10:23
|
show 3 more comments
Please show us your JS code, then we can see what's going wrong.
– jrswgtr
Nov 14 '18 at 9:53
Do you want to do it by a button click ?
– SilentCoder
Nov 14 '18 at 9:53
@SilentCoder. I just want to write a jquery code.
– user8531037
Nov 14 '18 at 9: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.
– user8531037
Nov 14 '18 at 9:57
1
@jrswgtr. Thank You for the support and answer.
– user8531037
Nov 14 '18 at 10:23
Please show us your JS code, then we can see what's going wrong.
– jrswgtr
Nov 14 '18 at 9:53
Please show us your JS code, then we can see what's going wrong.
– jrswgtr
Nov 14 '18 at 9:53
Do you want to do it by a button click ?
– SilentCoder
Nov 14 '18 at 9:53
Do you want to do it by a button click ?
– SilentCoder
Nov 14 '18 at 9:53
@SilentCoder. I just want to write a jquery code.
– user8531037
Nov 14 '18 at 9:55
@SilentCoder. I just want to write a jquery code.
– user8531037
Nov 14 '18 at 9: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.
– user8531037
Nov 14 '18 at 9:57
@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.
– user8531037
Nov 14 '18 at 9:57
1
1
@jrswgtr. Thank You for the support and answer.
– user8531037
Nov 14 '18 at 10:23
@jrswgtr. Thank You for the support and answer.
– user8531037
Nov 14 '18 at 10:23
|
show 3 more comments
4 Answers
4
active
oldest
votes
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>answered Nov 14 '18 at 10:10
MohammadMohammad
15.7k123664
Thank you for the perfect answer.
– user8531037
Nov 14 '18 at 10:16
add a comment |
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>answered Nov 14 '18 at 10:04
SilentCoderSilentCoder
1,79011020
Thank You for the answer.
– user8531037
Nov 14 '18 at 10:16
add a comment |
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>answered Nov 14 '18 at 10:23
Aditya GuptaAditya Gupta
7931822
Thank you for the answer and I am also from Manipal .
– user8531037
Nov 14 '18 at 10:25
Cool. Enjoy MIT life!
– Aditya Gupta
Nov 14 '18 at 10:26
add a comment |
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>answered Nov 14 '18 at 10:56
RajiRaji
1274
Thank You for your answer.
– user8531037
Nov 14 '18 at 11:20
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53297267%2fadd-div-to-the-date-showing-in-html-and-separate-the-days-and-month%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Nov 14 '18 at 10:10
MohammadMohammad
15.7k123664
Thank you for the perfect answer.
– user8531037
Nov 14 '18 at 10:16
add a comment |
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>answered Nov 14 '18 at 10:10
MohammadMohammad
15.7k123664
Thank you for the perfect answer.
– user8531037
Nov 14 '18 at 10:16
add a comment |
2
2
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>answered Nov 14 '18 at 10:10
MohammadMohammad
15.7k123664
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>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>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>answered Nov 14 '18 at 10:10
MohammadMohammad
15.7k123664
answered Nov 14 '18 at 10:10
MohammadMohammad
15.7k123664
answered Nov 14 '18 at 10:10
MohammadMohammad
15.7k123664
answered Nov 14 '18 at 10:10
MohammadMohammad
15.7k123664
15.7k123664
Thank you for the perfect answer.
– user8531037
Nov 14 '18 at 10:16
add a comment |
Thank you for the perfect answer.
– user8531037
Nov 14 '18 at 10:16
Thank you for the perfect answer.
– user8531037
Nov 14 '18 at 10:16
Thank you for the perfect answer.
– user8531037
Nov 14 '18 at 10:16
add a comment |
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>answered Nov 14 '18 at 10:04
SilentCoderSilentCoder
1,79011020
Thank You for the answer.
– user8531037
Nov 14 '18 at 10:16
add a comment |
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>answered Nov 14 '18 at 10:04
SilentCoderSilentCoder
1,79011020
Thank You for the answer.
– user8531037
Nov 14 '18 at 10:16
add a comment |
0
0
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>answered Nov 14 '18 at 10:04
SilentCoderSilentCoder
1,79011020
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>$('#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>$('#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>answered Nov 14 '18 at 10:04
SilentCoderSilentCoder
1,79011020
answered Nov 14 '18 at 10:04
SilentCoderSilentCoder
1,79011020
answered Nov 14 '18 at 10:04
SilentCoderSilentCoder
1,79011020
answered Nov 14 '18 at 10:04
SilentCoderSilentCoder
1,79011020
1,79011020
Thank You for the answer.
– user8531037
Nov 14 '18 at 10:16
add a comment |
Thank You for the answer.
– user8531037
Nov 14 '18 at 10:16
Thank You for the answer.
– user8531037
Nov 14 '18 at 10:16
Thank You for the answer.
– user8531037
Nov 14 '18 at 10:16
add a comment |
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>answered Nov 14 '18 at 10:23
Aditya GuptaAditya Gupta
7931822
Thank you for the answer and I am also from Manipal .
– user8531037
Nov 14 '18 at 10:25
Cool. Enjoy MIT life!
– Aditya Gupta
Nov 14 '18 at 10:26
add a comment |
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>answered Nov 14 '18 at 10:23
Aditya GuptaAditya Gupta
7931822
Thank you for the answer and I am also from Manipal .
– user8531037
Nov 14 '18 at 10:25
Cool. Enjoy MIT life!
– Aditya Gupta
Nov 14 '18 at 10:26
add a comment |
0
0
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>answered Nov 14 '18 at 10:23
Aditya GuptaAditya Gupta
7931822
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>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>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>answered Nov 14 '18 at 10:23
Aditya GuptaAditya Gupta
7931822
answered Nov 14 '18 at 10:23
Aditya GuptaAditya Gupta
7931822
answered Nov 14 '18 at 10:23
Aditya GuptaAditya Gupta
7931822
answered Nov 14 '18 at 10:23
Aditya GuptaAditya Gupta
7931822
7931822
Thank you for the answer and I am also from Manipal .
– user8531037
Nov 14 '18 at 10:25
Cool. Enjoy MIT life!
– Aditya Gupta
Nov 14 '18 at 10:26
add a comment |
Thank you for the answer and I am also from Manipal .
– user8531037
Nov 14 '18 at 10:25
Cool. Enjoy MIT life!
– Aditya Gupta
Nov 14 '18 at 10:26
Thank you for the answer and I am also from Manipal .
– user8531037
Nov 14 '18 at 10:25
Thank you for the answer and I am also from Manipal .
– user8531037
Nov 14 '18 at 10:25
Cool. Enjoy MIT life!
– Aditya Gupta
Nov 14 '18 at 10:26
Cool. Enjoy MIT life!
– Aditya Gupta
Nov 14 '18 at 10:26
add a comment |
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>answered Nov 14 '18 at 10:56
RajiRaji
1274
Thank You for your answer.
– user8531037
Nov 14 '18 at 11:20
add a comment |
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>answered Nov 14 '18 at 10:56
RajiRaji
1274
Thank You for your answer.
– user8531037
Nov 14 '18 at 11:20
add a comment |
0
0
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>answered Nov 14 '18 at 10:56
RajiRaji
1274
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>$('.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>$('.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>answered Nov 14 '18 at 10:56
RajiRaji
1274
answered Nov 14 '18 at 10:56
RajiRaji
1274
answered Nov 14 '18 at 10:56
RajiRaji
1274
answered Nov 14 '18 at 10:56
RajiRaji
1274
1274
Thank You for your answer.
– user8531037
Nov 14 '18 at 11:20
add a comment |
Thank You for your answer.
– user8531037
Nov 14 '18 at 11:20
Thank You for your answer.
– user8531037
Nov 14 '18 at 11:20
Thank You for your answer.
– user8531037
Nov 14 '18 at 11:20
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53297267%2fadd-div-to-the-date-showing-in-html-and-separate-the-days-and-month%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please show us your JS code, then we can see what's going wrong.
– jrswgtr
Nov 14 '18 at 9:53
Do you want to do it by a button click ?
– SilentCoder
Nov 14 '18 at 9:53
@SilentCoder. I just want to write a jquery code.
– user8531037
Nov 14 '18 at 9: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.
– user8531037
Nov 14 '18 at 9:57
1
@jrswgtr. Thank You for the support and answer.
– user8531037
Nov 14 '18 at 10:23