打开输入和日期选择器的JQueryUI datepicker

时间:2015-03-12 08:16:42

标签: javascript jquery jquery-ui datepicker

我希望有一个JqueryUI日期选择器,其输入文本区域和日历都已打开。

我知道以下两个选项:

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

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

  3. 如何获得选项1,但默认情况下打开日历?

    jsfiddle

    $(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>

3 个答案:

答案 0 :(得分:2)

我不能用小提琴给你看(不知何故,这个功能不起作用)但是尝试将焦点设置为输入字段。 喜欢这个

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

干杯 [R

答案 1 :(得分:1)

您可以使用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>

答案 2 :(得分:0)

使用altField和onchange事件:

http://jsfiddle.net/sexaw2po/

function inputDatepickerChanged(val) {
        $("#divDatepicker").datepicker("setDate", new Date(val));
    }