Background
Break News
How to add local font to Tailwind Css and NextJS? - Tutorial Design Pattern? - Blockchain Technology, How to create own Bitcoin virtual currency - Zustand mordern management state - Design Pattern - Flyweight Pattern? - Docker Full training Topic

[Javascript] Javascript working with dates and times - Moment.js

HTML
Javascript
JQuery
Tips
Friday, 25 February 2022
|
Read: Completed in minutes
Webzone - Zidane

[Javascript] Javascript working with dates and times - Moment.js

Good morning everybody, welcome back to Learn Tech Tips Blog.

Date and times Topic is always meet on many kind project, more or less you still have to gap these types of projects. Because date and time is always used it, You're working on restaurant booking, hotel booking, airplan booking, ... project, you will working with date time, working on schedule project, (email, meeting, teaching) .... you still also meet date and time thing too .... so on, I am sure you will see it on many project. So today I will share with you how to working easily with dates and times. 


Tiktok 








On Javascript world, we have many library for support Date and Times, On this topic I suggect you using Moment JS, because this Libray is get the majority users on the world. And this is the best on current time. On the furture maybe have another best, but current time i am sure for you this is best, "Moment.js has been successfully used in millions of projects.". On this library I also apply it on many project, so i think i can share with you some key point on this libray.

On this library, I will share with you source code how to use below button for demo get YEAR, MONTH, DATE, WEEK

On detail I will share the function how to get previous year, get next year, get current year, get previous month, get next month, get current month, get previous date, get next date, get current date, get previous week, get next week, get current week.

First we are try looking for the below UI 


HTML

// Author: huuvi168@gmail.com 
// Learn Tech Tips: Zidane
<span class="ml-2 btn-group mr-2 btn-group-sm my-btn-group" role="year" aria-label="year">
        <button type="button" class="btn  btn-outline-warning" id="previous_year"> < </button>
        <button type="button" class="btn  btn-outline-warning" id="current_year"><?= __('report_year') ?></button>
        <button type="button" class="btn  btn-outline-warning" id="next_year">></button>
</span>

<span class="btn-group mr-2 my-btn-group btn-group-sm" role="month" aria-label="month">
        <button type="button" class="btn  btn-outline-warning" id="previous_month">  < </button>
        <button type="button" class="btn  btn-outline-warning" id="current_month"><?= __('report_month') ?></button>
        <button type="button" class="btn  btn-outline-warning" id="next_month">></button>
</span>

<span class="btn-group mr-2 my-btn-group btn-group-sm" role="date" aria-label="date">
        <button type="button" class="btn  btn-outline-warning" id="previous_date"> < </button>
        <button type="button" class="btn  btn-outline-warning" id="current_date"><?= __('report_day') ?></button>
        <button type="button" class="btn  btn-outline-warning" id="next_date">></button>
</span>

<span class="btn-group my-btn-group btn-group-sm" role="week" aria-label="week">
        <button type="button" class="btn  btn-outline-warning" id="previous_week">  < </button>
        <button type="button" class="btn  btn-outline-warning" id="current_week"><?= __('report_week') ?></button>
        <button type="button" class="btn  btn-outline-warning" id="next_week">></button>
</span>

Just some line code you can easy get previous year, get next year, get current year by Moment.js

UI for control show current YEAR, show previous YEAR, show next YEAR:

Javascript working with dates and times - Moment.js



SOURCE CODE



// Author: huuvi168@gmail.com 
// Learn Tech Tips: Zidane

$(document).ready(function() {

    var currentYear = new Date().getFullYear();
   
    // ----- year -----
    $('#current_year').on('click', function() {
      currentYear = new Date().getFullYear();
      var from = currentYear + '0101';
      var to = currentYear + '1231';

      $('#date_from').val(moment(from).format("YYYY-MM-DD"));
      $('#date_to').val(moment(to).format("YYYY-MM-DD"));
    });

    $('#previous_year').on('click', function() {
      currentYear--;
      var from = currentYear + '0101';
      var to = currentYear + '1231';

      $('#date_from').val(moment(from).format("YYYY-MM-DD"));
      $('#date_to').val(moment(to).format("YYYY-MM-DD"));
    });

    $('#next_year').on('click', function() {
      currentYear++;
      var from = currentYear + '0101';
      var to = currentYear + '1231';

      $('#date_from').val(moment(from).format("YYYY-MM-DD"));
      $('#date_to').val(moment(to).format("YYYY-MM-DD"));
    });

});

UI for control show current MONTH, show previous MONTH, show next MONTH

Javascript working with dates and times - Moment.js




SOURCE CODE


// Author: huuvi168@gmail.com 
// Learn Tech Tips: Zidane


$(document).ready(function() {
    var firstDateOfCurrentMonth = moment().clone().startOf('month').format("YYYY-MM-DD");
    // ---- Month ----
    $('#current_month').on('click', function() {

      // get first day of current month
      firstDateOfCurrentMonth = moment().clone().startOf('month').format("YYYY-MM-DD");  //   moment().clone().startOf('month').format("YYYY-MM-DD");

      var futureMonth = firstDateOfCurrentMonth;
      var futureMonthEnd = moment(futureMonth).endOf('month').format("YYYY-MM-DD");

      $('#date_from').val(futureMonth);
      $('#date_to').val(futureMonthEnd);
    });

    $('#previous_month').on('click', function() {

      var futureMonth = moment(firstDateOfCurrentMonth).add(-1, 'M').format("YYYY-MM-DD");
      var futureMonthEnd = moment(futureMonth).endOf('month').format("YYYY-MM-DD");

      $('#date_from').val(futureMonth);
      $('#date_to').val(futureMonthEnd);

      firstDateOfCurrentMonth = futureMonth;
    });

    $('#next_month').on('click', function() {
      var futureMonth = moment(firstDateOfCurrentMonth).add(+1, 'M').format("YYYY-MM-DD");
      var futureMonthEnd = moment(futureMonth).endOf('month').format("YYYY-MM-DD");

      $('#date_from').val(futureMonth);
      $('#date_to').val(futureMonthEnd);

      firstDateOfCurrentMonth = futureMonth;
    });
});

 

UI for control show current DATE, show previous DATE, show next DATE

Javascript working with dates and times - Moment.js




SOURCE CODE

// Author: huuvi168@gmail.com 
// Learn Tech Tips: Zidane

$(document).ready(function() {
    var currentDate = new Date();


   // ----- date -----
    $('#current_date').on('click', function() {

      // get first day of current date
      currentDate = new Date();
      var date = moment(currentDate).format("YYYY-MM-DD");

      $('#date_from').val(date);
      $('#date_to').val(date);
    });

    $('#previous_date').on('click', function() {
      var date = moment(currentDate).subtract(1, 'days').format("YYYY-MM-DD");

      $('#date_from').val(date);
      $('#date_to').val(date);
      currentDate = date;

    });

    $('#next_date').on('click', function() {
      var date = moment(currentDate).add(1, 'days').format("YYYY-MM-DD");

      $('#date_from').val(date);
      $('#date_to').val(date);
      currentDate = date;
    });

});

 

 

UI for control show current WEEK, show previous WEEK, show next WEEK

Javascript working with dates and times - Moment.js




SOURCE CODE

// Author: huuvi168@gmail.com 
// Learn Tech Tips: Zidane

$(document).ready(function() {
    var currentDate = new Date();

     var currentWeekNumber = moment(currentDate, 'DD-MM-YYYY').week();


    // ----- week -----
    $('#current_week').on('click', function() {
      currentDate = new Date();
      currentWeekNumber = moment(currentDate, 'DD-MM-YYYY').week();

      startOfWeek = moment().day("Sunday").week(currentWeekNumber).format('YYYY-MM-DD');
      endOfWeek = moment().day("Saturday").week(currentWeekNumber).format('YYYY-MM-DD');
      $('#date_from').val( startOfWeek );
      $('#date_to').val( endOfWeek  );
    });

    $('#previous_week').on('click', function() {
      currentWeekNumber --;

      startOfWeek = moment().day("Sunday").week(currentWeekNumber).format('YYYY-MM-DD');
      endOfWeek = moment().day("Saturday").week(currentWeekNumber).format('YYYY-MM-DD');
      $('#date_from').val( startOfWeek );
      $('#date_to').val( endOfWeek  );

    });

    $('#next_week').on('click', function() {
      currentWeekNumber ++;

      startOfWeek = moment().day("Sunday").week(currentWeekNumber).format('YYYY-MM-DD');
      endOfWeek = moment().day("Saturday").week(currentWeekNumber).format('YYYY-MM-DD');
      $('#date_from').val( startOfWeek );
      $('#date_to').val( endOfWeek  );
    });

});


 LET'S COMBINE all above part we will have FULL SOURCE CODE like this. I suggest you save it to your library so you can easy use it later

// Author: huuvi168@gmail.com 
// Learn Tech Tips: Zidane

<span class="ml-2 btn-group mr-2 btn-group-sm my-btn-group" role="year" aria-label="year">
        <button type="button" class="btn  btn-outline-warning" id="previous_year"> < </button>
        <button type="button" class="btn  btn-outline-warning" id="current_year"><?= __('report_year') ?></button>
        <button type="button" class="btn  btn-outline-warning" id="next_year">></button>
</span>

<span class="btn-group mr-2 my-btn-group btn-group-sm" role="month" aria-label="month">
        <button type="button" class="btn  btn-outline-warning" id="previous_month">  < </button>
        <button type="button" class="btn  btn-outline-warning" id="current_month"><?= __('report_month') ?></button>
        <button type="button" class="btn  btn-outline-warning" id="next_month">></button>
</span>

<span class="btn-group mr-2 my-btn-group btn-group-sm" role="date" aria-label="date">
        <button type="button" class="btn  btn-outline-warning" id="previous_date"> < </button>
        <button type="button" class="btn  btn-outline-warning" id="current_date"><?= __('report_day') ?></button>
        <button type="button" class="btn  btn-outline-warning" id="next_date">></button>
</span>

<span class="btn-group my-btn-group btn-group-sm" role="week" aria-label="week">
        <button type="button" class="btn  btn-outline-warning" id="previous_week">  < </button>
        <button type="button" class="btn  btn-outline-warning" id="current_week"><?= __('report_week') ?></button>
        <button type="button" class="btn  btn-outline-warning" id="next_week">></button>
</span>




  $(document).ready(function() {

    var currentYear = new Date().getFullYear();
    var currentDate = new Date();
    var firstDateOfCurrentMonth = moment().clone().startOf('month').format("YYYY-MM-DD");
    var currentWeekNumber = moment(currentDate, 'DD-MM-YYYY').week();

    // ----- year -----
    $('#current_year').on('click', function() {
      currentYear = new Date().getFullYear();
      var from = currentYear + '0101';
      var to = currentYear + '1231';

      $('#date_from').val(moment(from).format("YYYY-MM-DD"));
      $('#date_to').val(moment(to).format("YYYY-MM-DD"));
    });

    $('#previous_year').on('click', function() {
      currentYear--;
      var from = currentYear + '0101';
      var to = currentYear + '1231';

      $('#date_from').val(moment(from).format("YYYY-MM-DD"));
      $('#date_to').val(moment(to).format("YYYY-MM-DD"));
    });

    $('#next_year').on('click', function() {
      currentYear++;
      var from = currentYear + '0101';
      var to = currentYear + '1231';

      $('#date_from').val(moment(from).format("YYYY-MM-DD"));
      $('#date_to').val(moment(to).format("YYYY-MM-DD"));
    });

    // ----- month -----
    $('#current_month').on('click', function() {

      // get first day of current month
      firstDateOfCurrentMonth = moment().clone().startOf('month').format("YYYY-MM-DD");  //   moment().clone().startOf('month').format("YYYY-MM-DD");

      var futureMonth = firstDateOfCurrentMonth;
      var futureMonthEnd = moment(futureMonth).endOf('month').format("YYYY-MM-DD");

      $('#date_from').val(futureMonth);
      $('#date_to').val(futureMonthEnd);
    });

    $('#previous_month').on('click', function() {

      var futureMonth = moment(firstDateOfCurrentMonth).add(-1, 'M').format("YYYY-MM-DD");
      var futureMonthEnd = moment(futureMonth).endOf('month').format("YYYY-MM-DD");

      $('#date_from').val(futureMonth);
      $('#date_to').val(futureMonthEnd);

      firstDateOfCurrentMonth = futureMonth;
    });

    $('#next_month').on('click', function() {
      var futureMonth = moment(firstDateOfCurrentMonth).add(+1, 'M').format("YYYY-MM-DD");
      var futureMonthEnd = moment(futureMonth).endOf('month').format("YYYY-MM-DD");

      $('#date_from').val(futureMonth);
      $('#date_to').val(futureMonthEnd);

      firstDateOfCurrentMonth = futureMonth;
    });

    // ----- date -----
    $('#current_date').on('click', function() {

      // get first day of current date
      currentDate = new Date();
      var date = moment(currentDate).format("YYYY-MM-DD");

      $('#date_from').val(date);
      $('#date_to').val(date);
    });

    $('#previous_date').on('click', function() {
      var date = moment(currentDate).subtract(1, 'days').format("YYYY-MM-DD");

      $('#date_from').val(date);
      $('#date_to').val(date);
      currentDate = date;

    });

    $('#next_date').on('click', function() {
      var date = moment(currentDate).add(1, 'days').format("YYYY-MM-DD");

      $('#date_from').val(date);
      $('#date_to').val(date);
      currentDate = date;
    });


    // ----- week -----
    $('#current_week').on('click', function() {
      currentDate = new Date();
      currentWeekNumber = moment(currentDate, 'DD-MM-YYYY').week();

      startOfWeek = moment().day("Sunday").week(currentWeekNumber).format('YYYY-MM-DD');
      endOfWeek = moment().day("Saturday").week(currentWeekNumber).format('YYYY-MM-DD');

      // const startOfWeek = moment().clone().startOf('week').format('YYYY-MM-DD');
      // const endOfWeek   = moment().clone().endOf('week').format('YYYY-MM-DD');

      $('#date_from').val( startOfWeek );
      $('#date_to').val( endOfWeek  );
    });

    $('#previous_week').on('click', function() {
      currentWeekNumber --;

      startOfWeek = moment().day("Sunday").week(currentWeekNumber).format('YYYY-MM-DD');
      endOfWeek = moment().day("Saturday").week(currentWeekNumber).format('YYYY-MM-DD');
      $('#date_from').val( startOfWeek );
      $('#date_to').val( endOfWeek  );

    });

    $('#next_week').on('click', function() {
      currentWeekNumber ++;

      startOfWeek = moment().day("Sunday").week(currentWeekNumber).format('YYYY-MM-DD');
      endOfWeek = moment().day("Saturday").week(currentWeekNumber).format('YYYY-MM-DD');
      $('#date_from').val( startOfWeek );
      $('#date_to').val( endOfWeek  );
    });
  });

If you have any feedback or question, leave your coment on this topic: "Javascript working with dates and times (MomentJS)" we can discuss about it

Learn Tech Tips - Zidane

Posted by at
Labels: , , ,
🙇🏼🙇🏼 We Appreciate Your Comments and Suggestions - Webzone, all things Tech Tips web development

Related Posts

Popular Webzone Tech Tips topic maybe you will be like it - by Webzone Tech Tips - Zidane

PHP How to use Array Object Class in easy way

PHP is a popular and powerful programming language that allows you to create dynamic and interactive web applications. PHP supports variou...

[Solved] Fix Camtasia Studio Bug "It is either an unsupported media type or required codecs are not found"

Hello everybody, welcome to Learn Tech Tips Blog, Today I will share with you how to fix Camtasia Studio Techsmith Bug. -  "It is eithe...

[Solved] How to fix "The remote session was disconnected because license store creation failed with access denied. Please run remote desktop client with elevated privileges"

Topic today I will share with you how to fix one issue many people got it when using Remote Desktop . That issue is: The remote session was ...

[Tips] A Tutorial on Converting a CString to a CStringArray

CString is one of the classes are specializations of a class template called CStringT based on the type of character data they support. A CS...

[Tips] How to "read write registry key value" in C# (.Net)

Registry is a database used to store information about the change, the settings from Windows users. R...

[Tips] How to Get current link path of website from PHP

This function will be help you how to get current link path of website from PHP Source code Explore My Other Channel for More Co...

[Tips] How to Customize ListView with Image on C# use GlacialList control

GlacialList is a custom control for C# that extends the functionality of the ListView control. It allows you to display...

[Solved] Bootstrap Datetimepicker OnChange event (WORKING)

Hello everyone, welcome back to Learn Tech Tips blogspot Today topic is show you how to fix bug OnChange event not working with Bootstrap 4D...

[Tips] How to "read and write struct file with C# programming language"

In this article, I will teach you how to write a structure file in CSharp. A structure file is a type of binary file that stores data in a p...

[Tips] Add custom header in HttpWebRequest

When you call request from client to server, sometimes, you need to add custom header in HttpWebRequest , you can add it by add headers as b...
As a student, I found Blogspot very useful when I joined in 2014. I have been a developer for years . To give back and share what I learned, I started Webzone, a blog with tech tips. You can also search for tech tips zidane on Google and find my helpful posts. Love you all,
I am glad you visited my blog. I hope you find it useful for learning tech tips and webzone tricks. If you have any technical issues, feel free to browse my posts and see if they can help you solve them. You can also leave a comment or contact me if you need more assistance. Here is my blog address: https://learn-tech-tips.blogspot.com.
My blog where I share my passion for web development, webzone design, and tech tips. You will find tutorials on how to build websites from scratch, using hot trends frameworks like nestjs, nextjs, cakephp, devops, docker, and more. You will also learn how to fix common bugs on development, like a mini stackoverflow. Plus, you will discover how to easily learn programming languages such as PHP (CAKEPHP, LARAVEL), C#, C++, Web(HTML, CSS, javascript), and other useful things like Office (Excel, Photoshop). I hope you enjoy my blog and find it helpful for your projects. :)
Thanks and Best Regards!
Follow me on Tiktok @learntechtips and send me a direct message. I will be happy to chat with you.
Webzone - Zidane (huuvi168@gmail.com)
WebDevZone
I'm developer, I like code, I like to learn new technology and want to be friend with people for learn each other
I'm a developer who loves coding, learning new technologies, and making friends with people who share the same passion. I have been a full stack developer since 2015, with more than years of experience in web development.
Copyright @2022(November) Version 1.0.0 - By Webzone, all things Tech Tips for Web Development Zidane
https://learn-tech-tips.blogspot.com