[SOLVED] How to get the selected calendar date using Pikaday

How to get the selected calendar date using Pikaday

I'm new to using a pre-made calendar such as Pikaday. I just can't seem to grasp how to get the selected calendar date. The code I see online to do that just doesn't work for me so I must be doing something wrong.

I am getting the error "field is not defined".

Can someone please point me in the right direction? Thank you so much.

var picker = new Pikaday({
    field: document.getElementById('id_pikaday_datepicker'),
    onSelect: function(date) {
        field.value = this.getMoment().format('Do MMMM YYYY');
console.log(field.value);
    }
});```

Solution

According to the Readme of Pikaday on Github, field is a variable that refers to the input element that Pikaday bound to. For example, in the following codes, input is the element

<input type="text" id="datepicker">

var input = document.getElementById('datepicker');
var picker = new Pikaday({
    field: input,
    onSelect: function(date) {
        input.value = picker.toString();
    }
});

So just define a field variable, and use it in onSelect function, try the follow codes

var field = document.getElementById('datepicker');
var picker = new Pikaday({
    field: document.getElementById('id_pikaday_datepicker'),
    onSelect: function(date) {
        // this.getMoment() is based on Moment.js
        field.value = this.getMoment()?.format('Do MMMM YYYY');
    }
});

If you want to use this.getMoment().format function, which is based on Moment.js, you need to import it before Pikaday, like

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
    </head>
</html>