Angulaire UI DatePicker de réglage de fuseau horaire

J'ai une date stockée comme une Date dans SQL Server. La date indique 4/24/2014 quand j'ai une requête SQL. Qui est correct. La date est correctement porté sur le côté client en UTC. Pour modifier cette date, nous sommes à l'aide de l'Angulaire de l'UI DatePicker. Le DatePicker est le réglage qui date de mon fuseau horaire local et donc, il est toujours désactivé en un seul jour.

Je peux voir que ça se passe. Si nous étions de la modification d'un DateTime au lieu d'une Date, alors il est correct pour régler le fuseau horaire. Toutefois, dans ce cas, j'ai juste une Date, donc je ne m'inquiète pas à propos de fuseau horaire et je veux juste modifier la date qu'il a été dans la base de données.

Je peux vérifier que c'est le réglage de fuseau horaire. Si je change le fuseau horaire sur ma machine windows UTC puis le DatePicker ne montrons que la date correcte.

Donc, la question est, est-il un moyen de dire le DatePicker pour désactiver le fuseau horaire ajustements et de gérer les dates en format UTC afin qu'il fonctionne avec SQL Date au lieu d'un Datetime de SQL?

InformationsquelleAutor Brian | 2014-03-25
  1. 42

    J'ai eu un problème similaire il y a un moment, je voulais le magasin local dates sur le côté serveur (c'est à dire juste aaaa-mm-jj et pas de timezome/l'information en temps), mais depuis l'angle d'Amorçage Datepicker utilise le JavaScript objet Date, ce n'était pas possible (il sérialise un UTC datetime chaîne dans le JSON que vous l'avez trouvé vous-même).

    J'ai résolu le problème avec la présente directive: https://gist.github.com/weberste/354a3f0a9ea58e0ea0de

    Essentiellement, je suis le reformatage de la valeur à chaque fois qu'une date est sélectionnée sur le datepicker (cette valeur, une aaaa-mm-jj chaîne formatée, seront stockés sur le modèle), et lorsque le modèle est utilisé pour remplir la vue, j'ai besoin de l'envelopper dans un objet Date, de nouveau, de façon datepicker le gère correctement.

    • Ça fonctionne. Mais lorsque vous définissez la première fois avec le format aaaa-mm-jj chaîne à partir du serveur, datepicker fait fuseau horaire ajustements. Comment peut-on la prévenir? Il est un billet ouvert pour elle ici: problème 2072
    • Bon point, merci de souligner ce point, c'est un problème dans les fuseaux horaires qui sont à l'origine de l'UTC, je crois. Ont mis à jour l'Essentiel de résoudre ce problème en "défaire" le fuseau horaire ajustements introduits par le JavaScript date.
    • Cette solution fonctionne quitter bien, merci pour le partage.
    • Merci, vous venez de m'a sauvé une tonne de temps!
    • Votre directive m'a aidé avec SQL server mise en forme Angulaire Matériel Datepickers. Je vous remercie.
    • Excellente solution, qui mériterait d'être figurant ici ainsi 😉

    InformationsquelleAutor weberste
  2. 33

    Solution trouvée ici: https://github.com/angular-ui/bootstrap/issues/4837#issuecomment-203284205

    Le fuseau horaire problème est résolu.

    Vous pouvez utiliser:

    ng-model-options="{timezone: 'utc'}"

    Pour obtenir un datepicker sans fuseau horaire de calcul.

    EDIT: Cette solution ne fonctionne pas depuis la version 2.x, il n'a toutefois parfaitement bien jusqu'alors. Je ne pouvais pas trouver une solution et je suis toujours à l'aide de la version 1.3.3.

    EDIT 2: Comme Sébastien Deprez a souligné dans les commentaires ci-dessous, ce problème a été corrigé dans la version 2.3.1. Je viens de tester et il fonctionne très bien.

    <input
 uib-datepicker-popup
 ng-model="$ctrl.myModel"
 ng-model-options="{timezone: 'utc'}">
    • Je confirme que cette solution fonctionne, mais pas pour les versions plus récentes. Plus précisément, il est buggé pour la version >= 2.0.2 et <= 2.3.0 (au moins). Ce qui est assez ennuyeux.
    • Eh bien en fait, ça va être corrigé à partir 2.3.1! github.com/angular-ui/bootstrap/issues/6235
    • Bon à savoir! Je vais mettre à jour ma réponse quand il sortira si il n'résoudre le problème. Merci pour l'info.
    • Ce qui semble excellent, mais souhaite qu'ils avaient à disposition pour le travail avec le TimePicker. angular-ui.github.io/bootstrap/#!#timepicker Sheesh!
    InformationsquelleAutor Thomas
  3. 1

    D'abord je tiens à souligner que le bootstrap est localisé sélecteur de date est stupide et inutile, personne n'a besoin de quelque chose comme cela, tout ce que vous voulez vraiment est une date aaaa-MM-jj, je ne vois pas de point dans la localisation de la date à laquelle vous n'avez pas besoin de temps.

    Je n'essayez pas de plier le côté client pour ajuster le fuseau horaire du serveur, c'est exagéré, et ne fonctionne pas.
    Ce que je faire à la place est laissé à l'utilisateur de travailler dans le fuseau horaire et le format de la date avant de l'envoyer au serveur comme ceci:

    fields.date = dateFilter(trans.date, 'MM/dd/yy');

    Cela garantit que tout ce que l'utilisateur voit dans le sélecteur de date que je reçois sur le côté serveur. Indispensable si vous me demandez.
    Si vous avez besoin de définir min et max de dates, de nouveau, juste les mettre dans le fuseau horaire de l'utilisateur comme ceci:

    $scope.datepickerOptions.minDate = new Date(dateFilter(minDate, 'yyyy-MM-dd\'T\'00:00:00', serverTimezone));
$scope.datepickerOptions.maxDate = new Date(dateFilter(maxDate, 'yyyy-MM-dd\'T\'00:00:00', serverTimezone));

    minDate et maxDate serveurs sont localisés les dates et les serverTimezone est le fuseau horaire du serveur offset ('+0500', par exemple).

    Espérons que cette aide!

    InformationsquelleAutor valmarv
  4. 0

    Espoir en dessous de la directive est utile pour vous

    app.directive('datetimepickerNeutralTimezone', function () {
return {
restrict: 'A',
priority: 1,
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
ctrl.$formatters.push(function (value) {
if (typeof value === "undefined") {
var date = new Date();
//date = new Date(date.getTime() + (60000 * date.getTimezoneOffset()));
return date;
} else {
var date = new Date(Date.parse(value));
//date = new Date(date.getTime() + (60000 * date.getTimezoneOffset()));
return date;
}
});
ctrl.$parsers.push(function (value) {
var date = new Date(value.getTime() - (60000 * value.getTimezoneOffset()));
return date;
});
}
};
});
app.directive('timepickerNeutralTimezone', function () {
return {
restrict: 'A',
priority: 1,
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
ctrl.$formatters.push(function (value) {
if (typeof value === "undefined") {
} else {
var date = new Date(Date.parse(value));
date = new Date(date.getTime() + (60000 * date.getTimezoneOffset()));
return date;
}
});
ctrl.$parsers.push(function (value) {
var date = new Date(value.getTime() - (60000 * value.getTimezoneOffset()));
return date;
});
}
};
});
    InformationsquelleAutor Pranav Labhe
  5. 0

    Pour moi, parce que nous utilisons une très vieille version de la bibliothèque, et étant donné un objet expiration_date retourné par le datepicker, j'ai dû trouver une solution de contournement et tordu comme ça :

    expiration_date.setMinutes(-expiration_date.getTimezoneOffset());

    Sur lequel sera fixé le jour demandé à son correspondant UTC date mais toujours exprimées dans le fuseau horaire local format.

    Pour moi ça a bien fonctionné. J'espère que ça peut aider quelqu'un.

    InformationsquelleAutor Bastien Alexandre
  6. 0

    Paramètre de fuseau horaire pour null a fonctionné comme un charme pour moi. Il continue juste à la date sélectionnée comme il est.

    ng-model-options="{timezone: null}"

    Remarque: Testé sur tous les fuseaux horaires & l'uib version que j'utilise est 1.3.3

    InformationsquelleAutor Tushar Walzade