How to format a Date in Javascript

Question

i am using bootstrap dateTimePicker.

Because the dateTimePicker works, the input needs to be in this format: 30/07/2019 23:59:59.

The dateTimePicker works fine, i initialize it with this function and it works as i want:

<div class="form-group">
    <div class='input-group date' id='datetimepicker2'>
        <input type='text' class="form-control " id="datepick2"  name="transaction_date_from"/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

var d = new Date();
$("#datetimepicker2").datetimepicker({
        defaultDate: new Date(d.getFullYear(),d.getMonth(),d.getDate(),23,59,59,00),
        format: 'DD/MM/YYYY HH:mm:ss',
        sideBySide: true,
        showTodayButton: true,
        showClear: true,
    });
    $('#datetimepicker2').datetimepicker({format: 'LT'}).on('dp.show', function(event) {
        $(".bootstrap-datetimepicker-widget").find('.btn[data-action="togglePeriod"]').hide();
    });

What i'm trying to do is that i have a <button> that when is clicked it has to restore to the "defaultDate" the dateTimePicker. What i've tried is:

 var d = new Date();
 var dateTo = new Date(d.getFullYear(),d.getMonth(),d.getDate(),23,59,59,00);
 $("#datepick2").val(dateTo);

but instead of getting the same result as when i initialize the dateTimePicker, i get

Tue Jul 30 2019 23:59:59 GMT+0200 (Ora legale dell’Europa centrale).

So, my question is: how can i format the date as i want? Is there a bootstrap function that can do it?

Is there some function that can do it? I've seen the other question but it don't seem to answer my question.

You could use MomentJS. It is a very useful script when using dates — Martijn Vissers, Jul 30 '19 at 08:24

Krzysztof Krzeszewski · Accepted Answer · 2019-07-30T08:37:49.280

Using native javascript you'd have to manually convert the date to the desired format e.g.

function formatMonth(month){
  month +=1;
  return month > 9 ? month : "0"+month;
}

const d = new Date();
const toDate = `${d.getDate()}/${formatMonth(d.getMonth())}/${d.getFullYear()} 23:59:59`
console.log(toDate)

However it would way easier and more readable to just use a library like momentjs

const dateFormat = 'DD/MM/YYYY HH:mm:ss';
console.log(moment().set({hours: 23, minutes: 59, seconds: 59}).format(dateFormat));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

`momentjs` worked for me. Thanks a lot – Guglielmo Tarchi Jul 30 '19 at 08:48 — Guglielmo Tarchi, Jul 30 '19 at 08:48

score 1 · Answer 2 · answered Jul 30 '19 at 08:46

1

Using a library just for that seems a little overkill, you can use toLocaleString()

console.log(new Date().toLocaleString('en-US', {hour12: false}).replace(/,/, ''));

Though, if you are doing a lot of time manipulation moment.js is a great library.

answered Jul 30 '19 at 08:46

Raul Sauco

1,979
3
16
16

score 0 · Answer 3 · answered Jul 30 '19 at 08:48

Normally, I don't advocate packages for simple & benign tasks but when it comes to datetimes in JS, I strongly suggest looking into then date-fns package.

It's a 30kB/7kB package and covers most (if not all of your needs).

how can i format the date as i want? Is there a bootstrap function that can do it?

For your specific formatting, checkout its format() method. You can even use it without importing/requiring the whole thing!

Here's a running demo: runkit/b2e2y529fo87

becher henchiri · Answer 4 · 2019-07-30T10:36:31.010

Try this:

$('#setDate').click(function(){
$('.form_datetime').datetimepicker({ format: 'DD/MM/YYYY HH:mm:ss',defaultDate:new Date()})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 
   
<button id="setDate">Init Date</button>
 <input type="text" class="form_datetime"/>

How to format a Date in Javascript

4 Answers4