月と年のdatepickerが動作しない

私は自分のhtmlページのdatepickerを試しました。動いていない。私はラベルDateの隣にテキストボックスを取得しています。これに関する助言？は、ここに私のHTMLスニペットです月と年のdatepickerが動作しない

 <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>

JSコード：

$(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コード：

<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が含まれていますか？なぜあなたは '.ui-datepicker-calendar'のためにCSSを使ってあなたのカレンダーを隠すのですか？ – Justinas

あなたは 'datepicker.js'をインクルードしています。どのライブラリを使用しているかを確認するには、そのリンクを提供してください。 –

：以下

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

が私のindex.htmlからの輸入されていますあなたが使っているのであれば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参照を削除してください。私の場合、_Layoutページで@Scripts.Render("~/bundles/jquery")を削除してもうまくいくようです。

<!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が動作しない

答えて

関連する問題