datepicker за месяц и год не работает

Я опробовал datepicker для моей страницы html. Это не работает. Я просто получаю текстовое поле рядом с меткой Date. Любая помощь по этому поводу? Вот мой фрагмент кода HTMLdatepicker за месяц и год не работает

 <div class="form-group"> 
    <label for="startDate" class="col-sm-5 control-label">Date:</label> 
    <div class="col-sm-4"> 
    <input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required /> 
</div> 
</div>

код расслоение плотной:

$(function() { 
    $('.date-picker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     dateFormat: 'MM yy', 
     onClose: function (dateText, inst) { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $(this).datepicker('setDate', new Date(year, month, 1)); 
     } 
    }); 
});

код CSS:

.ui-datepicker-calendar { 
    display: none; 
    }

Ниже импорт из моей index.html:

<title></title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" /> 
    <script src="../lib/datepicker.js"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
    <link href="../css/index.css" rel="stylesheet" /> 

    <script src="../app.js"></script> 

    <script src="../Controller/HeaderCtrl.js"></script>

источник

2017-02-01 beginner

Вы включили jQuery UI CSS? И почему вы скрываете свой календарь с помощью CSS для '.ui-datepicker-calendar'? – Justinas

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

Хорошо, если вы используете и в том числе jqueryUI и jquery правильно, как ваш код в порядке.

$(function() { 
 
    $('.date-picker').datepicker({ 
 
     changeMonth: true, 
 
     changeYear: true, 
 
     showButtonPanel: true, 
 
     dateFormat: 'MM yy', 
 
     onClose: function (dateText, inst) { 
 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
 
      $(this).datepicker('setDate', new Date(year, month, 1)); 
 
     } 
 
    }); 
 
});

.ui-datepicker-calendar { 
 
    display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> 
 

 
<div class="form-group"> 
 
    <label for="startDate" class="col-sm-5 control-label">Date:</label> 
 
    <div class="col-sm-4"> 
 
    <input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required /> 
 
</div> 
 
</div>

источник

2017-02-01 08:44:17

Это все еще не работает для меня. Я добавил импорт в свой вопрос. Можете ли вы проверить и сообщить мне, я ошибаюсь? – beginner

@Beginner,

Это код, который я использовал, чтобы проверить вашу проблему. Не могли бы вы удалить любые другие ссылки jquery в свой код. В моем случае я удалил @Scripts.Render("~/bundles/jquery") на странице _Layout и, похоже, работает нормально.

<!doctype html> 
<html lang="en"> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" /> 
    <script src="../lib/datepicker.js"></script> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
    <link href="../css/index.css" rel="stylesheet" /> 

    <script src="../app.js"></script> 

    <script src="../Controller/HeaderCtrl.js"></script> 
    <script> 
     $(function() { 
      $('.date-picker').datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       showButtonPanel: true, 
       dateFormat: 'MM yy', 
       onClose: function (dateText, inst) { 
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
        $(this).datepicker('setDate', new Date(year, month, 1)); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="form-group"> 
     <label for="startDate" class="col-sm-5 control-label">Date:</label> 
     <div class="col-sm-4"> 
      <input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" required /> 
     </div> 
    </div> 
</body> 
</html>

источник

2017-02-01 10:55:26

datepicker за месяц и год не работает

ответ

Смежные вопросы