angularjs - reactivos - El selector de fecha borra el valor seleccionado del cuadro de texto del selector de fecha si no se selecciona una fecha en el segundo clic y se emite con la validación de la fecha

tablas angular 4

Question

Implementé un selector de fechas con validaciones en mi aplicación Angular.

HTML:

<div class="control-group">
<label class="control-label" for="reservation.reservedFrom">Reserved From<sup>*</sup></label>
<div class="controls input-group date" data-provide="datepicker">
<!--<input type="text" class="span4" style="width:150px" name="reservedFrom" placeholder="Reserved From" ng-model="reservation.reservedFrom" ng-change=''checkErr()''
validator="required" required-error-message="Date is required" id="startDate122" />-->
<input class="form-control" type="text" name="startDate" core-date-picker ng-model="reservation.reservedFrom" >
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<span style="color:red">{{errMessageFrom}}</span>
</div> <!-- /controls -->
</div> <!-- /control-group -->
<div class="control-group">
<label class="control-label" for="reservation.reservedTill">Reserved Till<sup>*</sup></label>
<div class="controls input-group date" data-provide="datepicker">
<!--<input type="text" style="width:150px" class="span4" name="reservedTill" placeholder="Reserved Till" data-ng-model="reservation.reservedTill"
validator="required" required-error-message="Date is required" valid-method="watch" id="endDate" ng-change=''checkErr()'' />-->
<input class="form-control" type="text" name="EndDate" core-date-picker ng-model="reservation.reservedTill" ng-change=''checkErr()'' id="endDate1">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<span style="color:red">{{errMessageTo}}</span>
</div> <!-- /controls -->
</div> <!-- /control-group -->

Controlador :

myApp.controller(''editReservationController'', [''$scope'', ''$filter'', ''reservationResolved'', ''pocResolved'', ''accountResolved'', ''reservationServices'', ''$location'', ''$state'',
function ($scope, $filter, reservationResolved, pocResolved, accountResolved, reservationServices, $location, $state) {
$scope.reservation = new Object();
$scope.accounts = accountResolved.data;
$scope.pocs = pocResolved.data;
$scope.reservation.employee = reservationResolved.data;
$scope.updateReservation = function () {
var from = $scope.reservation.reservedFrom;
var till = $scope.reservation.reservedTill;
if ($scope.editReservationForm.$valid && $scope.checkErr()) {
var from = $scope.reservation.reservedFrom;
var till = $scope.reservation.reservedTill;
//var t = $scope.checkErr();
//TODO: fix it properly
$scope.reservation.reservedTill = '''';
$scope.reservation.reservedFrom = '''';
$scope.reservation.reservedFrom = $(''#startDate'').val();
$scope.reservation.reservedTill = $(''#endDate'').val();
reservationServices.updateReservation($scope.reservation).then(function (result) {
$scope.data = result.data;
if (!result.data.error) {
$state.transitionTo(''employeeTalentPool'', {
id: $state.params.id
});
}
});
}
};
$scope.cancel = function () {
$location.path("/reservations");
};
$scope.$watch("reservation.reservedFrom", function (newValue, oldValue) {
$scope.checkErr();
});
$scope.$watch("reservation.reservedTill", function (newValue, oldValue) {
$scope.checkErr();
});
$scope.getCurrentDate = function() {
var utcDate = new Date();
var isoExtendedDate = utcDate.toISOString();
var isoSimpleDate = isoExtendedDate.split("T")[0];
return isoSimpleDate;
}
$scope.checkErr = function () {
var startDateStr = $scope.reservation.reservedFrom;
var endDateStr = $scope.reservation.reservedTill;
var startDate;
if (startDateStr != undefined) {
startDate = new Date(startDateStr);
}
var endDate;
if (endDateStr != undefined) {
endDate = new Date(endDateStr);
}
$scope.errMessageFrom = '''';
$scope.errMessageTo = '''';
var myDate = new Date(); // Set this to your date in whichever timezone.
var utcDate = myDate.toUTCString();
if (startDate != undefined && startDate < new Date()) {
$scope.errMessageFrom = ''Start Date should be greater than or equal to present day.'';
return false;
}
if (endDate != undefined && new Date(endDate) < new Date()) {
$scope.errMessageTo = ''End Date should be greater than or equal to present day.'';
return false;
}
if (startDate != undefined && endDate != undefined && endDate <= startDate) {
$scope.errMessageTo = "End date must be after start day.";
return false;
}
return true;
};
}]);

App.js:

//Date Picker
myApp.directive(''coreDatePicker'', function ($compile) {
return {
restrict: ''A'',
require: ''ngModel'',
compile: function (element, attrs) {
$(element[0]).datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
return this.link;
},
link: function (scope, element, attrs, ngModelCtrl) {
$(element[0]).datepicker().on("change", function (e) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(element.val());
});
});
}
};
});

Explicaré el escenario del que estoy hablando.

Problema 1 : seleccioné una fecha del calendario y se mostró correctamente en el cuadro de texto del selector de fecha. Luego, hice clic nuevamente en el selector de fecha para seleccionar una fecha diferente, pero luego decidí no cambiar la fecha actualmente seleccionada, por lo que hice clic fuera del calendario sin seleccionar una fecha por segunda vez. Como no seleccioné una fecha la segunda vez, el selector de fecha borró la fecha seleccionada en primer lugar del cuadro de texto, por lo que es nulo. No quiero que eso suceda. Quiero que la fecha seleccionada en primer lugar permanezca allí a menos que se seleccione una fecha diferente (no un valor nulo).

Problema 2 : al validar las fechas, tengo problemas para comparar la fecha seleccionada con la fecha actual. Si la fecha seleccionada es menor que la fecha actual, se debe mostrar el mensaje de error. Pero en mi caso, el error se muestra si selecciono la misma fecha que hoy. Debería permitirme seleccionar el día actual.

He usado Bootstrap-datepicker. Por favor, avíseme si se requiere más información.

Gracias por adelantado.

Answer 1

A simple vista noté,

 link: function (scope, element, attrs, ngModelCtrl) {
$(element[0]).datepicker().on("change", function (e) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(element.val());
});
});
}

¿Debería disparar en el momento correcto? Lo que entiendo del Issue 1 es que se dispara independientemente de si hay cambios o no. ¿Has pensado en probar algunas verificaciones en

$(element[0]).datepicker().on("change", function (e) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(element.val());
});
});

Tratar

$(element[0]).datepicker().on("change", function (e) {
scope.$apply(function () {
if(element.val()) {
ngModelCtrl.$setViewValue(element.val());
}
});
});

Solo un pequeño control en el elemento.val () para intentarlo no dañará.

Para el segundo número, no creo que puedas comparar la fecha de esa manera.

new Date()

devoluciones

Jue Oct 20 2016 14:54:17 GMT + 0800 (Hora estándar de la península malaya)

¿Cuál es su startDateStr

La new Date() notada new Date() tiene algunos segundos y milisegundos.

Si solo desea comparar días, meses y años (DD/MM/yyyy) sugiero que convierta las fechas antes de poder comparar.

O compare individualmente como

startDate.getDate() < new Date().getDate() // To compare a day 

Para una mejor opción, yo sugeriría el momento . Github .

var startDate = moment(startDateStr, ''MM-DD-YYYY'').format(''MMMM D'');
var today = moment().format(''D MMM, YYYY'');
if (startDate != undefined && startDate < today) {
}

Actualizar

¿Has intentado mover la verificación a

 $scope.$watch("reservation.reservedFrom", function (newValue, oldValue) {
if(newValue && newValue !== oldValue) {
$scope.checkErr();
}
});
$scope.$watch("reservation.reservedTill", function (newValue, oldValue) {
if(newValue && newValue !== oldValue) {
$scope.checkErr();
}
});

Cuando usa <= o> = para comparar dos objetos de fecha, se comparan a través de valueOf, que es lo mismo que getTime para Date.

Pero cuando usa ==, son dos objetos diferentes del mismo tipo, por lo que devuelve falso.

Entonces en tu caso ^ Para comparar las dos fechas. La forma correcta es

 var startDate = moment(startDateStr, ''MM-DD-YYYY'').format(''MMMM D'');
var today = moment().format(''D MMM, YYYY'');
if (startDate != undefined && startDate.getTime() < today.getTime()) {
}

Estas explicaciones se toman aquí . Puede consultar el enlace para obtener más explicaciones.

El getTime convierte la fecha en un equivalente de época que es básicamente valores numéricos / números que pueden ser compensados. new Date() es un objeto y también lo es new Date(''10/20/2016'') y el objeto A no puede ser igual al objeto b. Para entender esto más puedes probar en la consola de tu navegador.

new Date() === new Date();
> false

pero

new Date().getTime() === new Date().getTime()
>true;

El primero es falso, es falso porque estás comparando dos objetos. El segundo es equivalente a comparar con valores numéricos. Después de todo

new Date().getTime()
>1477011127232