0

I have a big trouble with android mobile on my web site when I click my calendar datepicker appears and after keyboard hiding my datepicker hides, I couldn't find the problem for months.

On IOS and desktop version I have no problem and I have this trouble only with android devices.

I don't think problem is about with my calendar function but I want to share with you:

  var dateFormat = "DD/MM/YY",
        from = $("#checkin,.checkin").datepicker({
            firstDay: 1,
            minDate: 0,
            showButtonPanel: true,
            closeText: 'Temizle',
            onClose: function(dateText, inst) {
              
            },
            onSelect: function(selectedDate) {
                window.setTimeout($.proxy(function() {
                    $(this).parents(".book-holiday").find("#checkout,.checkout").focus();
                }, this), 10);
                var yenitarih = new Date();
                var date = $(this).datepicker('getDate');
                var checkoutStartDate = new Date(new Date(date).setDate(date.getDate() + 1));
                var checkoutEndDate = new Date(new Date(date).setDate(date.getDate() + 500000));
                $("#checkout,.checkout").datepicker("option", "minDate", checkoutStartDate);
                $("#checkout,.checkout").datepicker("option", "maxDate", checkoutEndDate);
            },
            isTo1: true,
            beforeShowDay: function(date) {
                var selectedDate = $(this).datepicker('getDate'),
                    fromDate = from.datepicker('getDate');

                if (!fromDate || !selectedDate) {
                    return [true]
                }
                var dateClass = '';
                var dateClass = '';
                if (date > fromDate && date < selectedDate) {
                    dateClass = 'start';

                } else if (+date == +selectedDate) {
                    dateClass = 'stop';
                }
                return [true, dateClass];

            },
            beforeShow: function(input, inst) {

                $(this).datepicker("widget").addClass("main-datepicker");
                controlDatepicker(".checkin,#checkin");
            }
        });
    $("#checkout,.checkout").datepicker({
        firstDay: 1,
        minDate: 0,
        showButtonPanel: true,
        closeText: 'Temizle',
        onClose: function(dateText, inst) {
             
        },
        isTo1: true,

        onSelect: function(selectedDate) {
            $(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
            $(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
        },
        beforeShowDay: function(date) {
            var selectedDate = $(this).datepicker('getDate'),
                fromDate = from.datepicker('getDate');

            if (!fromDate || !selectedDate) {
                return [true]
            }
            var dateClass = '';
            if (date > fromDate && date < selectedDate) {
                dateClass = 'start';

            } else if (+date == +selectedDate) {
                dateClass = 'stop';
            }
            return [true, dateClass];

        },
        beforeShow: function(input, inst) {
            $(this).datepicker("widget").addClass("main-datepicker");
            controlDatepicker(".checkin,#checkin");
        }

I set readonly to my datepicker input but when I click it keyboard is showing I don't understand why is it opening ?

and I want to share my web site: click to see - please check it out on android devices and click to datepicker

ani_css
  • 2,118
  • 3
  • 30
  • 73
  • Steps to repro: Click on text field first, and then click on date-picker. If we click on date-picker without clicking on text filed issue is not present. -- In Chrome 56.0.2924.87 – Rajeev Ranjan Aug 04 '17 at 13:05
  • Have you tried with android devices ? I'm trying now with android mobile devices using browserstack – ani_css Aug 04 '17 at 13:10
  • 1
    yes, I have tested on mobile. One more thing I observed is if you close the keyboard before clicking on date-picker, date-picker is working fine. Could you try closing the keyboard before opening date-picker on button click? Refer this [question](https://stackoverflow.com/questions/8335834/how-can-i-hide-the-android-keyboard-using-javascript) – Rajeev Ranjan Aug 04 '17 at 13:14
  • thank so I'm trying and this is my html structure: http://jsbin.com/cinabuyuxu how do I target my input to hide keyboard ? – ani_css Aug 04 '17 at 13:28
  • 1
    here is [http://jsbin.com/kalaqih](http://jsbin.com/kalaqih) on click of the button it close keyboard... – Rajeev Ranjan Aug 04 '17 at 14:08

0 Answers0