如何在输入类型按钮中具有日期选择器值？

Question

我有这样一个日期选择器的工作代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
      .footer {position: fixed;left: 0;bottom: 0;width: 100%;background-color: red;color: white;text-align: center;}
    </style>
  </head>
  <body>
    <div class="footer">
      <form>
        <input type="text" id="datepicker" name="tgl" />
        <input type="submit" name="submit" />
      </form>
    </div>
    <script>
      $(function() {
        $("#datepicker").datepicker();
      });
      $("#datepicker").datepicker({
        dateFormat: "dd M yy"
      }).datepicker("setDate", new Date());
    </script>
  </body>
</html>

Jsfiddle Link

以上是一个简短的版本代码。
基本上，在用户 select 日期之后单击提交按钮，它将查询将提交的数据插入到 SQL 数据库。这里没问题。

但由于该页面主要是在手机中打开，如果用户点击输入类型文本框，手机键盘就会出现，从而阻止了日期选择器。我不要这个。

所以我将输入类型“文本”更改为“按钮”类型（当我点击按钮时手机键盘不再显示）并且每次我在日期选择器中点击另一个日期时，我都会看到按钮label/value 相应地显示日期。

然后我不情愿地点击提交按钮，但是在 SQL table 结果中 - 它显示了一个错误的日期，并且无论我是什么日期，它总是给出结果 1970-01-01选择日期选择器。所以我认为这可能是因为如果我将它更改为按钮类型，“tgl”没有任何价值 - 而“tgl”在我将其更改回文本类型后具有 selected 日期选择器值，并且日期 SQL table 显示正确的日期。

我已经在互联网上搜索过，以防有人遇到与我类似的问题，但我找不到。所以我的问题是：如何获得输入类型按钮值，其中值来自日期选择器中的 selected 日期？

Answer 1

对输入字段使用属性readonly，输入字段类型为日期。

如何在输入类型按钮中具有日期选择器值？

How to have date-picker value in a input type button?

php

jquery

datepicker