JQueryUI日期选择器，输入和日期选择器都打开了

JQueryUI datepicker with both input and date picker opened

本文关键字：日期 选择器 输入 JQueryUI      更新时间：2023-09-26

我想要一个JqueryUI日期选择器，同时打开其输入文本区域和日历。

我知道以下两个选项：

  1. 使用输入元素，然后在单击输入字段后打开日历。

  2. 使用div 元素，然后根本没有输入字段。

如何获得选项 1，但日历默认打开？

斯菲德尔

$(function() {
  $("#inputDatepicker").datepicker();
  $("#divDatepicker").datepicker();
});
<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<p>Date with input:
  <input type="text" id="inputDatepicker">
</p>
<p>Date with div:
  <div id="divDatepicker">
</p>

我无法用小提琴向您展示（不知何故，此功能不起作用），但尝试将焦点设置为输入字段。喜欢这个

$(document).ready(function() {
   $(function() {
     $("#inputDatepicker").datepicker();
     $("#inputDatepicker").focus();
   });
});

干杯R

您可以使用 altField 来执行此操作

$(function() {
  $("#divDatepicker").datepicker({
    altField: '#inputDatepicker'
  });
});
<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<input type="text" id="inputDatepicker">
<div id="divDatepicker"></div>

使用 altField 和 onchange 事件：

http://jsfiddle.net/sexaw2po/

function inputDatepickerChanged(val) {
        $("#divDatepicker").datepicker("setDate", new Date(val));
    }
相关文章：