set current date as default in an input of type date

Question

I have an input of type date, where I use materialize to pick a date. I want to have the current date as default on init.

HTML

<input formControlName="invoice_date" id="invoice_date" type="date" class="datepicker" materialize="pickadate" [materializeParams]="[{ format: 'yyyy-mm-dd', formatSubmit: 'yyyy-mm-dd',
          closeOnSelect: true, selectMonths: true, selectYears: true, today: '',
          max: true, onSet: onSetDatepicker }]">

JavaScript

  onSetDatepicker(date) {
    if (date.select) {
      $('#invoice_date').pickadate().pickadate('picker').close();
    }
  }

The datepicker function should have today as its default value by default through the datepicker library. You could however just set the value of the input field to be — Martin, Aug 27 '18 at 13:24

score 2 · Answer 1 · edited May 12 '20 at 21:27

2

var date = new Date();

var day = ("0" + date.getDate()).slice(-2);
var month = ("0" + (date.getMonth() + 1)).slice(-2);

var today = date.getFullYear() + "-" + (month) + "-" + (day);

$('#dateid').val(today);

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

<input type="date" id="dateid">

edited May 12 '20 at 21:27

Paul Roub

36,322
27
84
93

answered May 12 '20 at 21:03

Prabha

266
4
25

score 0 · Answer 2 · answered Aug 27 '18 at 13:27

0

The datepicker libray usually have the current day as its default starting point, so I'm not sure why you have it differently. However, what you could do is set the value of the input field to contain the date of today.

Example:

<input formControlName="invoice_date" id="invoice_date" type="date" class="datepicker" 
materialize="pickadate" [materializeParams]="[{ 
format: 'yyyy-mm-dd', formatSubmit: 'yyyy-mm-dd',
          closeOnSelect: true, selectMonths: true, selectYears: true, today: '',
          max: true, onSet: onSetDatepicker }]" 
value="<?php echo date('y-m-d'); ?>">

answered Aug 27 '18 at 13:27

Martin

2,326
1
12
22

thnx for the answer ... yes , the the default starting point is the current day, but how can i have it as a default input, tried this, doesnt work... – Aldo Abazi Aug 27 '18 at 13:34
Then I don't understand what you mean, this should show the value of today in the input as the actual value. What does this "do" in your case? Just nothing? – Martin Aug 27 '18 at 13:39
nothing..its blank...event when i try to put a random date as a default value it doesnt show...i dont understand – Aldo Abazi Aug 27 '18 at 13:43
Seems like you might have something that overwrites its value. Do you have any other JavaScript that interferes with what you are trying to do? – Martin Aug 27 '18 at 13:45

score 0 · Answer 3 · answered Sep 02 '18 at 18:56

Maybe this can help your problem in setting the default value of date as current date.

<input type="text" class="datepicker">
<script>
document.addEventListener('DOMContentLoaded', function () {
        let today = new Date().toLocaleDateString();
        var options = {
            defaultDate: new Date(today),
            setDefaultDate: true
        };
        var elems = document.querySelector('.datepicker');
        var instance = M.Datepicker.init(elems, options);
        instance.setDate(new Date(today));
});
</script>

How do I get the current date in JavaScript?

set current date as default in an input of type date

3 Answers3