A javascript range date selector script combined with angular js in form html5

Question

As the title explaines, I have a simple javascript code which allows me to select a date range in input.

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

Next, I have an AngularJS form which uses ng-model to show me actual values from database in inputs and allows me to modify those values directly. The form example can be found HERE and has not any date inputs.

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

And Angular script:

 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();
         }
     });
 }

}]);

How can I integrate the javascript code in input ng-model to allow me to change the date showed?

Answer 1

I solved the problem with THIS script.

I have one tiny problem. After I select date range in an input and hit UPDATE button, the new date will not be written in database.

In order to write in database my selected date, I have to copy manually the new date from input and paste it again to the same input.

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:

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