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>

接下来，我有一个AngularJS表单，它使用ng-model在输入中显示数据库中的实际值，并允许我直接修改这些值。表单示例可以找到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>

和Angular脚本：

 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脚本解决了这个问题。

我有一个小问题。在输入中选择日期范围并按下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>

一个javascript范围日期选择器脚本与表单html5

1 个答案: