I am using Flatpickr for my date picker. however, when i select today's date, i want the result to be displayed as "Today".

jQuery(".datepicker").flatpickr({
    wrap: true,
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
    defaultDate: "today",
    instance.set('defaultDate', 'today');
});

this is what i have tried so far. the part instance.set isn't working for me. maybe i did something wrong.

Below is the snippet of the current working code. all i need is the current displayed date to be "Today" not the date itself.

jQuery(function() {
	initDatePicker();
});


function initDatePicker() {
	jQuery(".datepicker").flatpickr({
		wrap: true,
		altInput: true,
		altFormat: "F j, Y",
		dateFormat: "Y-m-d",
		defaultDate: "today"
	});
}

<link href=".min.css" rel="stylesheet" />
<script src=".1.1/jquery.min.js"></script>
<script src=""></script>
<script>
  
</script>

<div class="input-group datepicker">
  <input type="text" class="form-control" data-input aria-describedby="date1">
  <div class="input-group-append">
    <button class="btn btn-secondary" type="button" id="date1" title="toggle" data-toggle><i class="icon-angle-down-4 mr-0"></i></button>
  </div>
</div>

I am using Flatpickr for my date picker. however, when i select today's date, i want the result to be displayed as "Today".

jQuery(".datepicker").flatpickr({
    wrap: true,
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
    defaultDate: "today",
    instance.set('defaultDate', 'today');
});

this is what i have tried so far. the part instance.set isn't working for me. maybe i did something wrong.

Below is the snippet of the current working code. all i need is the current displayed date to be "Today" not the date itself.

jQuery(function() {
	initDatePicker();
});


function initDatePicker() {
	jQuery(".datepicker").flatpickr({
		wrap: true,
		altInput: true,
		altFormat: "F j, Y",
		dateFormat: "Y-m-d",
		defaultDate: "today"
	});
}

<link href="https://cdn.jsdelivr/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/flatpickr"></script>
<script>
  
</script>

<div class="input-group datepicker">
  <input type="text" class="form-control" data-input aria-describedby="date1">
  <div class="input-group-append">
    <button class="btn btn-secondary" type="button" id="date1" title="toggle" data-toggle><i class="icon-angle-down-4 mr-0"></i></button>
  </div>
</div>

• javascript
• jquery
• html
• flatpickr

2 Answers 2

@Lucian, i've found solution in handling onValueUpdate and onReady (for initial check, because defaultDate can be today, as in your case) events and updating value of private field _input.value.

Although, i didn't find any way to set "Today" word in the field without breaking incapsulation - because this word cannot be parsed to Date object and throws error.

My code for you is here. Hope this helps!

Adding this defaultDate: new Date(), did the magic for me , now my code looks like this

Before

  $(".flatpickr-datetime").flatpickr({
        enableTime: true,
        dateFormat: 'Y-m-d h:i K',
        allowInput: false,
        allowInvalidPreload: false,
        timezone: "<?php echo setting('timezone'); ?>",
    });

After

$(".flatpickr-datetime").flatpickr({
        enableTime: true,
        dateFormat: 'Y-m-d h:i K',
        allowInput: false,
        allowInvalidPreload: false,
        defaultDate: new Date(),
        timezone: "<?php echo setting('timezone'); ?>",
    });

This will set the default date and time to the current date and time