javascriptの範囲の日付セレクタスクリプトと角度のjsを組み合わせた形式html5

Question

タイトルに説明されているように、私は入力で日付範囲を選択できる単純なjavascriptコードを持っています。

<script type="text/javascript"> 
    $(document).ready(function() {     
     // create jqxcalendar. 
     $("#Datepicker").jqxDateTimeInput({ 
     width: 197, 
     height: 32, 
     selectionMode: 'range' 
}); 

     $("#Datepicker").on('change', function (event) { 
     var selection = $("#Datepicker").jqxDateTimeInput('getRange'); 
     if (selection.from != null) { 
     $("#selection").html("<div>From: " + selection.from.toLocaleDateString() + " <br/>To: " + selection.to.toLocaleDateString() + "</div>"); 
} 
}); 
     var date1 = new Date(); 
     var date2 = new Date(); 
     $("#Datepicker").jqxDateTimeInput('setRange', date1, date2); 
}); 
</script> 

次に、私は私の入力中に、データベースから実際の値を表示するにはNG-モデルを使用して、私が直接これらの値を変更することができますAngularJSのフォームを持っています。フォームの例はHEREで、日付入力はありません。

<form class="form-horizontal alert alert-warning" id="editForm" ng-submit="UpdateInfo(currentUser)" hidden> 
    <input type="text" class="form-control" ng-model="currentUser.weekOneFirst" value="{{currentUser.weekOneFirst}}"> 
</form> 

及び角度スクリプト：

var crudApp = angular.module('crudApp', []); 
crudApp.controller("DbController", ['$scope', '$http', function($scope,  $http) { 
scope.currentUser = {}; 
$scope.UpdateInfo = function(info) { 
    $http.post('configuration/program/databaseFiles/updateDetails.php', { 
     "id": info.id, 
     "name": info.username, 
     "email": info.nume_prenume, 
     "address": info.parola, 
     "gender": info.rol_user, 
     "locatie": info.locatie, 
     "locatieTwo": info.locatieTwo, 
     "locatieThree": info.locatieThree, 
     "locatieFour": info.locatieFour, 
     "sambata": info.sambata, 
     "sambataTwo": info.sambataTwo, 
     "sambataThree": info.sambataThree, 
     "sambataFour": info.sambataFour, 
     "tura": info.tura, 
     "turaTwo": info.turaTwo, 
     "turaThree": info.turaThree, 
     "turaFour": info.turaFour, 
     "weekOneFirst": info.weekOneFirst, 
     "weekOneLast": info.weekOneLast, 
     "weekTwoFirst": info.weekTwoFirst, 
     "weekTwoLast": info.weekTwoLast, 
     "weekThreeFirst": info.weekThreeFirst, 
     "weekThreeLast": info.weekThreeLast, 
     "weekFourFirst": info.weekFourFirst, 
     "weekFourLast": info.weekFourLast 
    }).success(function(data) { 
     $scope.show_form = true; 
     if (data == true) { 
      getInfo(); 
     } 
    }); 
} 

}]）。

input ng-modelのJavaScriptコードをどのように統合すれば、日付を変更することができますか？

Answer 1

THISスクリプトで問題を解決しました。

私には小さな問題が1つあります。入力で日付範囲を選択してUPDATEボタンを押すと、新しい日付はデータベースに書き込まれません。

私の選択した日付をデータベースに書き込むためには、手動で新しい日付を入力からコピーして同じ入力に再度貼り付ける必要があります。

HTML：

<form class="form-horizontal alert alert-warning" id="editForm" ng-submit="UpdateInfo(currentUser)" hidden> 
<input type="text" name="daterange" class="form-control" ng-model="currentUser.weekOneFirst" value="{{currentUser.weekOneFirst}}" > 
</form> 

jQueryのスクリプト：

<script type="text/javascript"> 
$(function() { 
    $('input[name="daterange"]').daterangepicker({ 
     "locale": { 
     "format": "DD-MM-YYYY", 
     "separator": " | ", 
     "applyLabel": "Confirmă", 
     "cancelLabel": "Anulează", 
     "fromLabel": "De la", 
     "toLabel": "La", 
     "customRangeLabel": "Custom", 
     "weekLabel": "S", 
     "daysOfWeek": [ 
      "Du", 
      "Lu", 
      "Ma", 
      "Mi", 
      "Jo", 
      "Vi", 
      "Sa" 
     ], 
     "monthNames": [ 
      "Ianuarie", 
      "Februarie", 
      "Martie", 
      "Aprilie", 
      "Mai", 
      "Iunie", 
      "Iulie", 
      "August", 
      "Septembrie", 
      "Octombrie", 
      "Noiembrie", 
      "Decembrie" 
     ], 
     "firstDay": 1 
    }, 
    }); 
}); 
</script>