如何使日期选择器可见?

时间:2019-05-30 04:07:39

标签: jquery jquery-ui datepicker jquery-ui-datepicker

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

<!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.对不起,我的英语

1 个答案:

答案 0 :(得分:0)

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

$(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无法正常工作,然后从那里进行调查。

希望有帮助。