Comment définir la valeur de la date de l'interface utilisateur, bootstrap datepicker
Mon create event page initialise mon sélecteur de date à date actuelle. Cela fonctionne bien. Mais lorsque je veux modifier l'événement sur ma page d'édition, je ne suis pas sûr de la façon de régler le sélecteur de date de valeur à l'événement que j'ai dans ma variable php.
Ai-je besoin d'un autre module angulaire pour qui?
Toute aide serait grandement appréciée
HTML
<div ng-app="ui.bootstrap.demo">
<div ng-controller="DatepickerDemoCtrl">
<?php
//How to set date picker to value of $event->event_start
//$event->event_start
?>
<p class="input-group">
<input type="text" id="dt_start" class="form-control" readonly datepicker-popup="@{{format}}" ng-model="dt1" is-open="opened1" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<timepicker
ng-model="dt1"
hour-step="1"
minute-step="15"
show-meridian="true">
</timepicker>
JS
angular
.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
.controller('DatepickerDemoCtrl', function ($scope) {
$scope.today = function() {
var dt1 = new Date();
dt1.setHours( dt1.getHours() + 1 );
dt1.setMinutes( 0 );
$scope.dt1 = dt1;
};
$scope.today();
$scope.clear = function () {
$scope.dt1 = null;
};
Mis à jour le HTML et JS avec Alan Tsai suggestion de l' - ne fonctionne toujours pas comme prévu - datepicker de travail, mais timepicker encore vide
HTML
<?php
$dateeventstart = new DateTime($event->event_start);
?>
<div ng-app="ui.bootstrap.demo">
<div ng-controller="DatepickerDemoCtrl" ng-init="initModel('<?php echo $dateeventstart->format("Y-m-d H:i") ?>', '<?php echo $dateeventstart->format("Y-m-d H:i") ?>'">)
<?php
//How to set date picker to value of $event->event_start
//$event->event_start
?>
<p class="input-group">
<input type="text" id="dt_start" class="form-control" readonly datepicker-popup="@{{format}}" ng-model="dt1" is-open="opened1" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<timepicker
ng-model="tm1"
hour-step="1"
minute-step="15"
show-meridian="true">
</timepicker>
Source HTML (contrôleur)
<div ng-controller="DatepickerDemoCtrl" ng-init="initModel('2015-09-02 12:15', '2015-09-02 12:15')">
JS
angular
.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
.controller('DatepickerDemoCtrl', function ($scope) {
$scope.today = function() {
var dt1 = new Date();
dt1.setHours( dt1.getHours() + 1 );
dt1.setMinutes( 0 );
$scope.dt1 = dt1;
};
$scope.today();
$scope.clear = function () {
$scope.dt1 = null;
};
$scope.initModel = function(datePickerValue, timePickerValue){
$scope.dt1 = datePickerValue;
$scope.tm1 = timePickerValue;
}
Vous devez vous connecter pour publier un commentaire.
Je ne connais pas php, mais vous pouvez utiliser ng-init pour définir la valeur du côté serveur dans angulaire, tels
Je ne suis pas sûr si
<?= $event_start?>
est la façon de sortie php la variable html - si ce n'est tout simplement de changer de ce que jamais la syntaxe de sortie variable.Modifier
Si cela ne fonctionne pas, il peut-être parce que la variable de sortie de ce pas corriger datetime chaîne. si oui, vous pouvez créer une fonction qui parse le passage de la chaîne . Pour atteindre cet objectif, pouvez regarder ce AFIN de répondre à
AngularJS ngInit avec Date
Edit 2 ce qui Concerne timepicker problème
Après bien y regarder, il y a deux chose que vous aurez à changer:
Je me rends compte de votre datePicker et timepicker sont à l'aide de la même ng-model (toutes les deux à
dt1
), vous devez définir la 2 pour différentes ng-model.Puisque maintenant vous êtes deux ng-model (un pour le datepicker et un pour timepicker), il est préférable d'appeler une méthode dans ng-init au lieu de mettre directement la propriété comme je l'ai montré précédemment, cela signifie:
Dans votre Contrôleur, déclarer une méthode init:
puis dans votre contrôleur, appeler init comme (supposons que votre tiempicker est appelé timeeventstart):
Modifier 3
Je pense que ça pourrait être parce que les données sont transmises en tant que chaîne de caractères et non pas la date. Essayez de le convertir à ce jour tels que:
Edition 4
Après regarder les plunker lien que vous avez fourni, il semble fonctionner parfaitement. Ci-dessous est une image montrant-je changer le moment de l'initialisation et il reflète le point de vue: