# How to make a calendar with a button, not an input on mobile

**URL:** <https://www.phphelp.com/t/how-to-make-a-calendar-with-a-button-not-an-input-on-mobile/34108>\
**Category:** Javascript & Ajax\
**Created:** [October 16, 2021, 7:05am UTC](https://www.phphelp.com/t/how-to-make-a-calendar-with-a-button-not-an-input-on-mobile/34108 "2021-10-16T07:05:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adem](https://www.phphelp.com/letter_avatar_proxy/v4/letter/a/a4c791/32.png) [@Adem](https://www.phphelp.com/u/Adem)\
**Post date:** [October 16, 2021, 7:05am UTC](https://www.phphelp.com/t/how-to-make-a-calendar-with-a-button-not-an-input-on-mobile/34108/1 "2021-10-16T07:05:36Z")

</div>

Hello,

I search by manually entering the input field.  
If I want to search for a date, I click on the calendar topic on the left, select the date in the popup window that opens and it searches.

There is no problem on the computer, but I cannot enter the input field manually on the mobile, the calendar opens

How do I disable opening the calendar in the input field on mobile?  
I want to search by manually entering the Input field on mobile. like on computer  
how do i do this?

There is no rule that I will use this application, I just want it to select a date from the window and transfer “2021-10-16” into the input.

```
<div class="smallfont flatpickr" data-allow-input="true" data-wrap="true" data-click-opens="false" style="float:right; padding-top: 6px;padding-right: 6px;padding-bottom: 5px;">

	<a class="input-button" data-clear=""><img alt="Temizle" src="images/x.png" style="width: 18px; height: 18px; cursor: pointer;" /></a>
	<a class="input-button" data-toggle=""><img alt="Tarih Seç" src="images/calendar.png" style="width: 19px; height: 19px; cursor: pointer;" /></a>
	<input data-input="" type="text" class="bginput flatpickr-input" id="search" placeholder="İçerik Ara">
</div>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/tr.js"></script>
	<script async>
        flatpickr(".flatpickr", {
            "locale": "tr"
        });
	</script>

```

![ara](https://www.phphelp.com/uploads/default/original/2X/f/faa9e0e10303807f83720e308a7e0153f6908bc2.png)  
 ![ara2](https://www.phphelp.com/uploads/default/original/2X/0/0fd78ede1e94bc93d3f9b7cd9ae9aba967ab7c1e.png)

Thank you in advance

---

<div class="post-metadata">

**Author:** ![Adem](https://www.phphelp.com/letter_avatar_proxy/v4/letter/a/a4c791/32.png) [@Adem](https://www.phphelp.com/u/Adem)\
**Post date:** [October 16, 2021, 7:43am UTC](https://www.phphelp.com/t/how-to-make-a-calendar-with-a-button-not-an-input-on-mobile/34108/2 "2021-10-16T07:43:54Z")

</div>

I solved the problem as below

```
<script async>
        flatpickr(".flatpickr", {
            "locale": "tr",
            disableMobile: "true"
        });
    </script>
```