# Date Picker (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Demo

> [Change](/demo/lite/calendar/datepicker.html)

## Links

- Canonical HTML: /demo/lite/calendar/datepicker.html
- Source HTML folder: /demo/lite/calendar/
- Catalog root: /demo/lite/
- Catalog: /demo/lite/llms.txt

## Source

### Inline demo script 1

```javascript
const picker = new DayPilot.DatePicker({
            target: 'start',
            pattern: 'M/d/yyyy',
            onTimeRangeSelected: function (args) {
                dp.startDate = args.start;
                dp.update();
            }
        });

        const dp = new DayPilot.Calendar("dp", {
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                if (modal.canceled) {
                    return;
                }
                const name = modal.result;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    text: name
                });
                dp.clearSelection();
            },
            onEventClicked: (args) => {
                DayPilot.Modal.alert("clicked: " + args.e.id());
            }
        });
        dp.init();


        const app = {
            elements: {
                start: document.getElementById('start')
            },
            init() {
                this.addEventHandlers();
                this.loadEventData();
            },
            addEventHandlers() {
                this.elements.start.addEventListener('click', (ev) => {
                    ev.preventDefault();
                    picker.show();
                });
            },
            loadEventData() {
                const events = [
                    {
                        start: DayPilot.Date.today().addHours(12),
                        end: DayPilot.Date.today().addHours(15),
                        id: DayPilot.guid(),
                        text: "Special event"
                    }
                ];
                dp.update({events});
            }
        };
        app.init();
```