Question

我在此网址中有一个日历示例： http://eonasdan.github.io/bootstrap-datetimepicker

这是HTML代码：

<div class="form-group col-xs-2 col-md-2">
    <label for="datebirth" class="control-label">Date of Birth</label>
    <div class="input-group date" id="datetimepicker1">
        <input type="text" class="form-control" id="date-birth" maxlength="10" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>                      
</div>

这是JS代码：

moment.locale('en', {
  week: { dow: 1 } // Monday is the first day of the week
});     

$("#datetimepicker1").datetimepicker({
    format: 'DD/MM/YYYY'
});

$("#date-birth").on("focus", function() {
    //open calendar
});

点击日历图标时必须打开我的日历（这没关系），当输入日期有焦点时，如果我在输入日期字段中写了一个字，则必须更新日历窗口自动。

在URL中，有一个关于No Icon（仅输入字段）的示例：但我没有解决它。

感谢您的帮助。

Answer 1

您可以初始化添加include_once 'Core/autoload.php'; if (!defined('NOVA_POSHTA_PATH_SDK')) { define('NOVA_POSHTA_PATH_SDK', dirname(__FILE__) . '/'); \NovaPoshta\Core\Autoload::init(); }选项的日历，以便在输入获得焦点时将其打开：

namespace NovaPoshta\Core\;

class Autoload
{
    public static function init()
    {
        if (function_exists('__autoload')) {
            spl_autoload_register('__autoload');
        }

        return spl_autoload_register(array('\NovaPoshta\Core\Autoload', 'load'));
    }

    public static function load($className)
    {
        $className = str_replace('NovaPoshta\\', '', $className);
        $className = NOVA_POSHTA_PATH_SDK . $className . '.php';
        $className = str_replace('\\', DIRECTORY_SEPARATOR, $className);

        if ((file_exists($className) === false) || (is_readable($className) === false)) {
            return false;
        }

        require($className);

        return true;
    }
}

如果您想在第一次打开日历时输入空值，也可以添加allowInputToggle。

您可以使用$("#datetimepicker1").datetimepicker({ format: 'DD/MM/YYYY', allowInputToggle: true });列表器在键入日期时自动更新日历：

useCurrent: false

Answer 2

我认为您需要更改datetimepicker的CSS。只需添加如下一行

从

.bootstrap-datetimepicker-widget {
  list-style: none;
}

TO

.bootstrap-datetimepicker-widget {
  list-style: none;
  display: block;
}

如何在输入获得焦点和更新日历时显示datepicker日历

2 个答案: