Get today's day and month in 2 digit format on click

Question

I've got 3 date fields and a link to get today's date. It's all working fine but day and month default to single digits if less than 10, in FIREFOX. 1 September displays as 1 9 but I'd like it to display as 01 09. I have tried using jquery slice as explained in this post: How do I get Month and Date of JavaScript in 2 digit format?

But it is not working. Can someone point me in the right direction as to what I am doing wrong?

My code:

<div class="input-holder date-fields">
  <input type="number" pattern="[0-9]*" inputmode="numeric" min="1" max="31" id="dd" class="dd" placeholder="DD" maxlength="2" />
  <input type="number" pattern="[0-9]*" inputmode="numeric" min="1" max="12" id="mm" class="mm" placeholder="MM" maxlength="2" />
  <input type="number" pattern="[0-9]*" inputmode="numeric" min="1900" id="yyyy" class="yyyy" placeholder="YYYY" maxlength="4" />
<a class="pick-today">Today</a>
</div>

and jquery:

$("a.pick-today").on("click", function (event) {
    var now = new Date();
    var day = ("0" + now.getDate()).slice(-2);
    $(this).parent('.input-holder').find('input.dd').val(day);

    var now2 = new Date();
    var month = ("0" + (now2.getMonth() + 1)).slice(-2);
    $(this).parent('.input-holder').find('input.mm').val(month);

    var now3 = new Date();
    var year = now3.getFullYear();
    $(this).parent('.input-holder').find('input.yyyy').val(year);
});

fiddle: https://jsfiddle.net/82a6671r/

UPDATE: it's working in Chrome but not in Firefox. Does anyone know why?

Why not just add a leftpad fn and pass your results through it? — reergymerej, Sep 06 '16 at 01:25
I was commenting on the weird prepend & slice thing. It's valid, but it's tricky. I included a leftpad in my answer below. — reergymerej, Sep 06 '16 at 03:29

score 1 · Accepted Answer · answered Sep 06 '16 at 03:26

According to this bug, FF strips leading zeroes from numeric input fields.

Setting an input's value to "003" would display "3" in the input window, despite storing the value internally as "003".

Removing the field type will bypass this, though you should be cognizant of any effects this may cause when querying the field later. You may need parseInt.

Here's a fiddle that works on FF.

function leftPad(num, length) {
  var result = '' + num;
  while (result.length < length) {
    result = '0' + result;
  }
  return result;
}

$("a.pick-today").on("click", function (event) {
  var now = new Date();
  var day = leftPad(now.getDate(), 2);
  var month = leftPad(now.getMonth() + 1, 2);
  var year = now.getFullYear();  
  var parent = $(this).parent('.input-holder');

  parent.find('input.dd').val(day);
  parent.find('input.mm').val(month);
  parent.find('input.yyyy').val(year);
});

Cool, thank you. I see it's working in the fiddle but it doesn't seem to work on my local file.. weird. Will do some debugging. — Wim Mertens, Sep 06 '16 at 03:41
Good luck. If you need heavy date handling, check out moment.js. — reergymerej, Sep 06 '16 at 03:44
Thank you. Interesting fact about FF, I didn't know that. Unfortunately I need to maintain the number field type for validation purposes which I cannot change. Will accept your answer as this is the best approach, too bad for firefox users :) — Wim Mertens, Sep 06 '16 at 04:12

score 0 · Answer 2 · answered Sep 06 '16 at 01:20

0

Try this one hope this will work.

jsfiddle

 <div class="input-holder date-fields">
  <input type="number" pattern="[0-9]*" inputmode="numeric" min="1" max="31" id="dd" class="dd" placeholder="DD" maxlength="2" />
  <input type="number" pattern="[0-9]*" inputmode="numeric" min="1" max="12" id="mm" class="mm" placeholder="MM" maxlength="2" />
  <input type="number" pattern="[0-9]*" inputmode="numeric" min="1900" id="yyyy" class="yyyy" placeholder="YYYY" maxlength="4" />
<a class="pick-today">Today</a>
</div>


var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
document.getElementById('dd').value = day;

var now2 = new Date();
var month = ("0" + (now2.getMonth() + 1)).slice(-2);
document.getElementById('mm').value = month;


var now3 = new Date();
var year = now3.getFullYear();
document.getElementById('yyyy').value = year;

answered Sep 06 '16 at 01:20

Thanks, but this will just default to today's date. The fields need to be empty and only on clicking the link it needs to display the date in this format: 06 09 2016. I can get it to work just getting the date, it just needs to reformat to two digits (day and month). – Wim Mertens Sep 06 '16 at 01:58
@WimMertens okay i see.. I try to find another way. For what i understand upon clicking the textbox the date or yr or month will appear? correct me if im wrong. – Sep 06 '16 at 02:05
the input needs to be empty by default, you can add any date but only when you click on the link, all 3 fields need to display today's date. – Wim Mertens Sep 06 '16 at 02:07
The code I have provided works ok, it's just the formatting to 2 digits for day and month that doesn't work. I tjust displays single digits so it's not being triggered for some reason. – Wim Mertens Sep 06 '16 at 02:09
@WimMertens I test your code in jsfiddle and its working. If i click the `LINK Today` it display the today date. the output is `06` `09` `2016` – Sep 06 '16 at 02:18
@WimMertens im glad that your problem solve :).. In your update question can't answer it yet maybe others can. – Sep 06 '16 at 02:27

Get today's day and month in 2 digit format on click

2 Answers2