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

Friday 25 February 2022
|
Read: Completed in minutes

[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


🙇🏼🙇🏼 We Appreciate Your Comments and Suggestions - Webzone, all things Tech Tips web development
Popular Webzone Tech Tips topic maybe you will be like it - by Webzone Tech Tips - Zidane
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)
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