Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    gwh
    gwh is offline
    New Coder
    Join Date
    Sep 2005
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    formatting moment.js dates using css

    Hi everyone,

    I'm using the javascript date library called moment.js.

    http://momentjs.com

    I have the code below in the head of my document and I'm formatting a couple of dates in a specific way. The first one, I'm formatting in the following way:

    11 Jun 2014

    I'd like to be able to style the day, ie 11, in a different way, ie. by having it appear larger. I'd like to do this with css but I'm not sure how to target it in the js code.

    Would someone be able to help me out?

    Thanks so much in advance.




    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="/javascript/moment.js"></script>
    <script type="text/javascript">
    
    
    $(function(){
    	$('.date-fix').each(function(){
    		var $root = $(this),
    			$date = $root.text(),
    			$moment = moment($date, 'DD-MMM-YYYY'),
    			$cleanDate = $moment.format("D MMM YYYY");
    			
    		$root.text($cleanDate);
    	});
    });
    
    $(function(){
    	$('.date-fix2').each(function(){
    		var $root = $(this),
    			$date = $root.text(),
    			$moment = moment($date, 'DD-MMM-YYYY'),
    			$cleanDate = $moment.format("D MMMM YYYY");
    			
    		$root.text($cleanDate);
    	});
    });
    
    
    
    </script>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    We need to see the generated HTML to be able to answer this. It is the HTML the script generates thatyou style with CSS not the JavaScript.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,712
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Looks to me like $cleanDate = $moment.format("D MMM YYYY"); is the string the holds 11 Jun 2014.
    $cleanDate = "<big id='chang'>"+$moment.format('D')+"</big> "+ $moment.format(' MMM YYYY'); might work for you with css being #chang{color: blue;}
    Last edited by sunfighter; 06-11-2014 at 09:20 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    gwh
    gwh is offline
    New Coder
    Join Date
    Sep 2005
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Looks to me like $cleanDate = $moment.format("D MMM YYYY"); is the string the holds 11 Jun 2014.
    $cleanDate = "<big id='chang'>"+$moment.format('D')+"</big> "+ $moment.format(' MMM YYYY'); might work for you with css being #chang{color: blue;}
    Thanks for the reply,

    Yes you're right, you pinpointed the correct string as holding the date. I tried out your code so that it looked like the following:

    Code:
    $(function(){
    	$('.date-fix').each(function(){
    		var $root = $(this),
    			$date = $root.text(),
    			$moment = moment($date, 'DD-MMM-YYYY'),
    			$cleanDate = "<big id='chang'>"+$moment.format('D')+"</big> "+ $moment.format(' MMM YYYY'); 
    
    		$root.text($cleanDate);
    	});
    });
    I also included the css in my css file.

    When I tested though, it output the following:

    <big id='chang'>11</big> Jun 2014

    Do you know what I might have done incorrectly?

    Thanks so much.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,712
    Thanks
    25
    Thanked 660 Times in 659 Posts
    $root.text() is processing the string differently than I thought. If you know where you want this date to appear and it's the only date on your page then try commenting that line out and use this to display the results
    Code:
    document.getElementById('WHERE YOU WANT THIS DISPLAYED').innerHTML = "<big id='chang'>"+$moment.format('D')+"</big> "+ $moment.format(' MMM YYYY');
    Of course that means you might have to change things in the HTML. I hope you know how to do that, if not post the html here of the dates final resting place.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •