J'ai essayé d'utiliser le sélecteur de plage de date avec un sélecteur de date unique et un sélecteur de temps, Mais la bibliothèque ne prend pas en charge cette option. Pourriez-vous s'il vous plaît aider à résoudre ce problème, et les boutons Apply et Annuler n'apparaissent pas
// Single Date with time
$('.single-date-time').daterangepicker({
singleDatePicker:true,
timePicker: true,
applyClass: 'bg-slate-600',
cancelClass: 'btn-light',
locale: {
format: 'MM/DD/YYYY h:mm a'
}
});
3 Réponses :
Inclure ces bibliothèques sur votre projet moment.js
Vous devez ajouter des bibliothèques jQuery aussi
Dans votre fichier JS Ajouter un code suivant
et votre code HTML
$ (entrée [nom = "dates"] '). DATANGETPICKER ();
$ (fonction () {
$ ('entrée [nom = "DateTimes"]'). DaterangePicker ({
TimePicker: vrai,
startDate: moment (). Startof ("heure"),
Enddate: moment (). Démarrage ("heure"). Ajouter (32, "heure"),
Locale: {
Format: 'M / DD HH: MM A'
}
});
});
J'ai essayé votre code et je mets dans une fonction qu'elle a fonctionné. (Bibliothèques de bootstrap et daterangepicker à JQuery)
<script>
$(function() {
$('.single-date-time').daterangepicker({
singleDatePicker: true,
timePicker: true,
applyClass: 'bg-slate-600',
cancelClass: 'btn-light',
locale: {
format: 'MM/DD/YYYY h:mm a'
}
});
});
</script>
</head>
<body>
<input type="text" class="single-date-time" name="test" />
</body>
Votre HTML devrait ressembler à ceci comme suit:
$scope.optsSingleWithTime = {
singleDatePicker: true,
startView: 2,
minViewMode: 2,
opens: 'right',
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(5, 'hour'),
locale: {
label:'Custom Filter',
applyClass: 'btn-green',
applyLabel: "Apply",
fromLabel: "From",
toLabel: "To",
cancelLabel: 'Cancel',
format: 'YYYY-MM-DD HH:mm:ss'
},
changeYear: true,
changeMonth: true,
maxDate: date
};
Vous utiliserez peut-être un plugin à partir de daterangepicker.com Si oui, consultez l'URL de configuration de DaterangePicker personnalisée: daterangepicker.com/#config . Ici, la date et l'heure unique sont affichées correctement. En ce qui concerne les options "ApplyClass", il devrait être "ApplyButtonClasses" et "AnnulerClass" devrait être "CancelButtonClasses".