Блог

Главная - Вопросы по программированию - Средство выбора даты (.js) не работает в редакторе HTML, но работает в скрипке

Средство выбора даты (.js) не работает в редакторе HTML, но работает в скрипке

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Это рабочий формат в fiddle, и ниже приведен код, который я использовал на своем демо-сайте. я создал новое имя папки js и разместил datepicker.js внутри него. итак, я связал следующее в своем html.

 <script type="text/javascript" src="js/datepicker.js"></script>

и мой datapicker.js код — это 

 $(function () {
    $('#departure-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            setTimeout(function () {
                $('#return-date').datepicker('show');
            }, 300)
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });

    $('#return-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });
});

и мой html-код 

 <input  id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">

но когда я нажимаю указанную выше кнопку .js не вызывается. пожалуйста, помогите

Комментарии:

1. какие-либо ошибки консоли?

2. Определен ли jQuery?

3. @guest271314 Извините, я не могу понять, о чем вы просите

4. Вам необходимо включить версию jQuery. Загрузите последнюю версию и поместите ее в свою папку js и свяжите ее, как вы делали для datepicker.js или напрямую включите его следующим образом <script src=» code.jquery.com/jquery-latest.min.js » тип=»текст/ javascript»></script>

5. @GladwinJames — вы включили файл jquery на страницу??????

Ответ №1:

Вам необходимо включить версию jQuery. Загрузите последнюю версию и поместите ее в свою папку js и свяжите ее, как вы делали для datepicker.js или напрямую включите его следующим образом 

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Если это не сработает, попробуйте

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Я не уверен, что ваш единственный указатель даты.в js есть ошибка и, но если она есть, попробуйте jquery-ui js, который включает ее.

Я протестировал его, включив вышеупомянутые 2 источника js, и он работал нормально.

Если прямая ссылка на сайт jquery js не работает, то это еще одна проблема на вашей странице, которая нам не показана.

Комментарии:

1. Он использует jquery.

2. Я скачал развития jQuery с jquery.com/download и привязан к HTML с <script type=»text/javascript» src=»js/jquery.js»></script> but still its not working..

3. @Gladwin я обновил 2 новые ссылки, которые должны работать. Удалите свои ссылки js и jquery со страницы и попробуйте 2 выше. Я протестировал их с вашим кодом, и это работает.

4.@Icewine Спасибо за резервную копию, брат, я подключил эти скриптовые коды <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> , и это сработало, но я до сих пор не понимаю, что это такое, можете ли вы объяснить??

5. Это репозиторий Google для jquery, если вам нужны прямые ссылки. Вы также можете получить прямые ссылки из jquery.com , это одно и то же. Я бы рекомендовал локальную копию этих файлов для вашей папки JS, если вы ожидаете, что пользователь сможет работать в автономном режиме. jquery.js необходим ли основной jquery. Если вы хотите использовать различные элементы пользовательского интерфейса jquery, вам также необходимо jquery-ui.js (который включает в себя datepicker и другой код, связанный с пользовательским интерфейсом) Если вам нужен готовый стиль, вам нужна таблица стилей jquery-ui.css. Вы можете получить шаблон с веб-сайта jquery-ui или сделать все с нуля.

Ответ №2:

Ваш код работает абсолютно нормально на моем локальном компьютере. Где я просто использовал путь jQuery и jQueryUI CDN из

Ссылка на сайт разработчика Google

Ваш фрагмент кода:

 <!DOCTYPE html>
<html>
<head>
    <title>JS Datepicker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<input  id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">
<script type="text/javascript">
    $(function () {
    $('#departure-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            setTimeout(function () {
                $('#return-date').datepicker('show');
            }, 300)
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });

    $('#return-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });
});
</script>
</body>
</html>

Дата отправления
Возвращаемая дата

Ответ №3:

если вы пропустите место в позиции jquery, это не сработает. надеюсь, приведенный ниже код поможет вам.

 $(function () {
    $('#departure-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            setTimeout(function () {
                $('#return-date').datepicker('show');
            }, 300)
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });

    $('#return-date').datepicker({
        numberOfMonths: 2,
        showAnim: "fold",
        showButtonPanel: true,
        onSelect: (function (date) {
            $(this).val($(this).datepicker('getDate').toLocaleDateString());
        })
    });
});  
      <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

<input  id="departure-date" type="text" placeholder="Depart Date" >
<input type="text" id="return-date" placeholder="return Date">