AlexKrupko / DatePickerX

Cool light visual date picker using native JavaScript
MIT License
27 stars 21 forks source link

Always open option #4

Open NicoxDJ opened 5 years ago

NicoxDJ commented 5 years ago

Hello, Is there any change, the date picker could be always open. When you load the page, it should be open, and when you choose date, it should remain be open? Thanks!

bigdatarider commented 5 years ago

Hi, To make it always open, you just need to do the following changes: In DatePickerX.css file, comment out "display:block" line for .date-picker-x class.

In your js file, initialize datepicker with the following codes:

var myDatepickerContainer = document.querySelector('input[id="d1"]');
    myDatepickerContainer.DatePickerX.init({
        format:"d.m.yyyy"
    });
//Show opened at initial load

myDatepickerContainer.click();

//Change selected item style if clicked on day element

  $(".date-picker-x").bind("click", function(e) {
        if($(e.target).closest('.dpx-item').length>0) {
            $('.date-picker-x').find("*").removeClass("dpx-selected");
            $(e.target).addClass("dpx-selected");
        }
        });

Have a nice day :)