如何使日期选择器可见?

Posted

技术标签:

【中文标题】如何使日期选择器可见?【英文标题】:How can i make the datepicker be visible? 【发布时间】:2019-10-15 17:03:17 【问题描述】:

我希望日期选择器在我单击时可见并且可以工作。这是我的代码,我不知道为什么它不起作用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Language" content="ru">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>The title</title>
        <link rel="stylesheet" type="text/css" media="print" href="css/print.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">    
    <link rel="stylesheet" href="css/registration.css" type="text/css">    
    <link rel="stylesheet" href="materialize/materialize.min.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="materialize/icon.css" >

    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script>$.widget.bridge('uitooltip', $.ui.tooltip);</script>
    <script src="materialize/materialize.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>
    <script type="text/javascript" src="js/lang.js"></script>
    <script type="text/javascript">
add_words(
    "not_be_empty": "Поле не должно быть пустым!",
    "filled_out_incorrectly": "Поле пустое или заполнено некорректно!"
);
</script><script type="text/javascript" src="js/jquery.ui.datepicker.js"></script><script type="text/javascript" src="js/jquery.inputmask.js"></script><script type="text/javascript" src="js/jquery.bind-first-0.1.min.js"></script><script type="text/javascript" src="js/phones_mask/jquery.inputmask-multi.js"></script><script type="text/javascript" src="js/registration.js"></script>  </head>
  <body>
<input type="text" name="birthday" value="" id="birthday" class="inputform" />

在我的registration.js中我有:

var params = 
        monthNames: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
        monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
        dayNamesMin: ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"],
        dayNames: ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"],
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        changeYear: true,
        yearRange: (year - 100) + ':' + year,
        firstDay: 1
    ;
    $("#birthday").datepicker(params).keypress(function(event) return false;);

因此,当我单击输入时,添加了“hasDatepicker”类,但日期选择器不显示。试图从“#birthday”中删除课程,但没有帮助

P。 S. 对不起我的英语

【问题讨论】:

P. S. 奇怪的东西。我注意到如果我开始不链接文件“js/jquery.ui.datepicker.js”它工作正常。但问题是我不知道它是否需要(js/jquery.ui.datepicker.js 文件) 用于其他 HTML 页面。有人可以建议另一种更好的方法来解决这个问题 刚刚找到文件链接的位置并注释该行。问题解决了。谢谢 欢迎来到 Stack Overflow。我注意到的第一件事是您添加了大量的 JS 库。可能会发生冲突。您是否在控制台中看到任何错误或警报?我还建议参加巡回赛:***.com/tour 【参考方案1】:

我无法通过一个基本示例来复制该问题:

$(function() 
  var Now = new Date();
  var year = Now.getFullYear();
  var params = 
    monthNames: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
    monthNamesShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
    dayNamesMin: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
    dayNames: ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"],
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    changeYear: true,
    yearRange: (year - 100) + ':' + year,
    firstDay: 1
  ;
  $("#birthday").datepicker(params).keypress(function(event) 
    return false;
  );
);
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Birthday: <input type="text" name="birthday" value="" id="birthday" class="inputform" /></p>

此代码按预期工作。我怀疑与以下其中一项存在冲突:

materialize/materialize.min.js js/jquery.cookie.js js/main.js js/menu.js js/lang.js js/jquery.ui.datepicker.js js/jquery.inputmask.js js/jquery.bind-first-0.1.min.js js/phones_mask/jquery.inputmask-multi.js js/registration.js

我建议删除所有不需要的并一次添加一个,直到 DatePicker 无法按预期工作,然后从那里进行调查。

希望对您有所帮助。

【讨论】:

以上是关于如何使日期选择器可见?的主要内容,如果未能解决你的问题,请参考以下文章

如何覆盖日期选择器的 iOS 暗模式样式

保持引导日期选择器始终打开

日期选择器 + 分段控制 + 一些标签

如何在 xcode 自动布局中使对象自动调整大小?

在日期选择器中未显示月份和年份下拉列表中的数据

如何在颤动中更改显示日期选择器的语言