Je travaille dans une application intégrée à Angular 7. Je dois montrer un calendrier dans ma demande.
Pour montrer le calendrier, j'utilise la commande angulaire ng-bootstrap - NGB-DatePicker
Maintenant, mon besoin est que, je souhaite définir la date de début du calendrier.
Par exemple, si l'utilisateur passe à un mois alors, le calendrier devrait commencer à partir de la date que je fournis.
Par exemple, pour avril mois, je veux ci-dessous Vue:
Veuillez ignorer les couleurs des dates.
Aussi, je veux que le dimanche soit début jour de la semaine, car j'utilise le premier jour de la propriété.
Lien de code:
Cliquez ici < / p>
3 Réponses :
Options pour DatePicker peut être transmis comme JSON à l'aide de l'attribut Options DatePicker
dateOptions = {
startingDay: 0
};
Je prends du contrôle du calendrier de bootstrap angulaire. Veuillez vous reporter: NG-BOOTSTRAP.GITUB.IO/#/COMPONENTS/DatePicker/overview
Ceci peut être fait en utilisant l'événement Je suppose que vous utilisez NGModel (montez à deux reprises) ici. P> sur le composant.html, vous allez inclure la liaison code> naviguer code> et la lier à la méthode et sur votre composant.ts, nous définirons la logique de la méthode Navigate code>, comme expliqué sur le NGBOOTTRAP Documentation API DatePicker (Faites défiler les sorties). Onnavigate () code>, qui sera tirée chaque fois que l'utilisateur navigue à Un mois ou une année différente. p> oncavigate () code>. L'interface pour événement code> est définie comme tel , mais pour cette affaire, nous ne sommes intéressés que par event.next code>, car cela nous donne le mois et l'année ciblés que l'utilisateur a navigué. À partir de là, nous obtiendrons redéfinir notre modèle, sélectionné CODE> et l'approvisionnez avec l'année, le mois et le code> Selectedayday code> (quelle date de début est défini par vous!). Sur cet exemple, nous supposons que la date de début est 1 code>, et cela aura lieu le premier jour du mois à sélectionner lorsque l'utilisateur a navigué vers une année ou un mois sur DatePicker. P > onNavigate(event) {
//console.log(event)
const targetMonth = event.next.month;
const targetYear = event.next.year;
const selectedDay = 1;
this.selected = {
year:targetYear,
month: targetMonth,
day:selectedDay
}
}
Merci Wentjun, mais mes besoins sont comme ça, si je navigue jusqu'au mois d'avril, Calandre devrait commencer à partir du 24 mars 2019 (comme dans mon cas, je considère 30-mars et 31-mars dans le cadre du mois d'avril)
est II possible?
@suresh hmmm .. Je suis un peu confus, mais laissez-moi vous faire supposer. Vous voulez que je sélectionne le 24 du mois précédent?
Disons que l'utilisateur va à février 2019, il devrait choisir le 24 janvier 2019?
J'ai mis à jour votre URL comme je l'ai besoin de commencer le dimanche: Stackblitz.com/edit/angular-afaqdh-qjxdut?embed=1&file=app/...
@suresh désolé, qu'est-ce que vous avez exactement besoin en ce moment ..? Commencez avec dimanche?
J'ai besoin de deux exigences: j'ai besoin de commencer ma semaine jour après jour, ce qui peut être fait en utilisant [PremierDayOfweek] = 7 et je l'ai fait. La deuxième exigence est de savoir comment forcer la calandre à partir de la date donnée, par exemple si je vais au mois d'avril, je souhaite que la première date de Calander soit 24-Mar-2019
"Première date du calendrier"? Désolé, qu'entendez-vous par là?
En outre, un autre exemple, disons si vous allez au mois de mai. Que devrait être la première date du calendrier? Et quelle date doit être sélectionnée?
J'ai modifier mon message en ajoutant un lien à l'écran de ce dont j'ai besoin.
@suresh ahh okey, si essentiellement, vous voulez que la "première" journée du calendrier soit un dimanche, non? C'est pourquoi il montre le 24ème lorsque l'utilisateur navigue au mois de mai? Je vais éditer mon code quand je suis à la maison!
Oui, j'ai besoin du premier jour de la semaine dimanche, mais j'ai atteint qu'en utilisant [FirstDayoFeek] = 7.Current lorsque je navigue jusqu'en avril du mois de mai, les dates de Colandre vont du 31 mars 2019 au 11 mai-2019 par défaut. Mais Ce que je veux réaliser, c'est que cela devrait aller du 24-Mar-2019 au 04 mai-2019, comme vous pouvez le constater dans l'image ci-jointe dans mon poste. Merci!!
@suresh je viens de regarder la capture d'écran en détail. Je crains que ce soit ne soit pas possible, car la salepicker ne montrera aucune semaine au-delà de la première semaine du mois sélectionné. Quelqu'un d'autre pourrait avoir une idée, mais pour le moment, je suis à court d'idées. Désolé pour ça.
Merci @wentjun, pourriez-vous suggérer d'autres satellites personnalisables pour un tel type d'exigence disponible pour l'angulaire
@suresh hmm .. Je ne suis pas trop sûr. Avez-vous essayé du matériel angulaire DatePicker? C'est l'une des bibliothèques angulaires angulaires les plus couramment utilisées
Merci, oui je sais. Je vais essayer le matériau angulaire DatePicker
J'ai vérifié que le matériel angulaire ne fournit pas non plus cette fonctionnalité. Je pense que ma propre composante de contrôle du calendrier est angulaire, pensez-vous que c'est réalisable.
pour commencer à commencer avec ce que @ Wentjun décrit et ajoutez l'événement (naviguer) dans votre modèle.
de Ce que je comprends que vous comprenez que la logique commerciale est très spécifique et que vous devez définir des dates spécifiques lors de la navigation sur des mois spécifiques. P>
Par conséquent, vous avez besoin d'une sorte de mappage pour le faire. p>
Le Vous utiliserez le numéro de mois pour votre mappage. P> Faites un mois Enum, donc nous faisons quelque chose de gentil et lisible: P> nagigate code> événement vous fournira Ceci genre des données, entre autres: suivant: {année: numéro; mois: numéro; } code> p> onNavigate(event) {
this.selected = {
year:event.next.year,
month: event.next.month,
day:DATES_MAP[event.next.month]
}
}
Oui @antonis, j'ai également essayé cela mais ne fonctionne pas selon mes besoins.
Je ne sais pas si vous souhaitez définir une date initiale ou si vous souhaitez définir une date précise chaque fois que l'utilisateur change le mois
@Antonis Oui, je veux définir une date précise à partir duquel le mois devrait commencer chaque fois que l'utilisateur change le mois.Pro exemple si l'utilisateur navigue au mois d'avril, je souhaite que cela devrait commencer à partir du 24 mars 2019, vous pouvez voir le tir à l'écran. En cliquant sur le lien indiqué dans ma question.
Antonis, avez-vous une idée, est-ce possible?