Рубрики
Без рубрики

Угловой пользовательский дата 😱

Недавно на работе я получал много тепла из -за пользовательской даты, которую они хотели. I… Tagged с помощью Angular, JavaScript, WebDev, Frontend.

Недавно на работе я получал много тепла из -за пользовательской даты, которую они хотели. Я был как DatePicker, пользовательский, почему вы хотите, чтобы он был пользователем, пожалуйста, используйте доступные по умолчанию, выберите любой, что вам нравится, и используйте его везде.

Я приложил много усилий, чтобы устремлить дату, и на каждой странице они немного подправляли его, чтобы он добрался до моей головы. Сегодня я собираюсь поделиться компонентом, который решил все мои проблемы ngbdatepicker библиотеки NG-Bootstrap. Это очень помогло мне и сэкономило мне тонны часов, которые я бы потратил на укладку и настраивая свой пикер. У него много вариантов, и давайте поговорим о нескольких моих любимых.

Доступны как в качестве календаря, так и раскрывающегося списка

Мое первое требование, иногда они встраивали сборщик даты, иногда они хотели его в DOM. Каждый раз разные стили и снижение :: ng-deep Сделал дело хуже.

Разные выборы

Вы можете выбрать дату в качестве диапазона и выбрать одну дату.

Пользовательские месяцы

Он позволяет создавать весь вид месяцев, используя угловой шаблон, и вам просто нужно поставить директиву на тег NG-Template. Позвольте мне привести пример, это дата по умолчанию.

И чтобы настроить его просто добавить любой HTML, который вы хотите добавить в него, и директива NgbdatePicker Content на этот шаблон


    
      

        

          This is custom datepicker
        

      
      
Here is a footer

который сделает что -то подобное как вывод.

Теперь вы можете положить что угодно внизу или в верхней части даты сборщика. Стиль, как вы хотите в этих тегах Div. Для нижнего колонтитула вы можете использовать встроенный Шаблон нижнего колонтитула вход тоже.

Метки имени недели смены

Этот был немного сложным, но вам на самом деле просто нужно расширить поставщика ngbdatepickeri18n и предоставить его вместо дефолта. Примером добавления пользовательского класса является следующее:

import {NgbDatepickerI18n, NgbDateStruct, NgbDatepicker} from '@ng-bootstrap/ng-bootstrap';

const I18N_VALUES = {
  'en': {// Provide labels in multiple languages
    weekdays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], // Use whatever values you want in any language
    months: ['January', 'February', 'March',
 'April', 'May', 'June',
 'July', 'August', 'September',
 'October', 'November', 'December']// // Use whatever values you want in any language
  }
};

@Injectable()
export class I18n {
  language = 'en';
}

@Injectable()
export class CustomDatepickerI18n extends NgbDatepickerI18n {

  constructor(private _i18n: I18n) {
    super();
  }

  getWeekdayShortName(weekday: number): string {
    return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
  }
  getMonthShortName(month: number): string {
    return I18N_VALUES[this._i18n.language].months[month - 1];
  }
  getMonthFullName(month: number): string {
    return this.getMonthShortName(month);
  }

  getDayAriaLabel(date: NgbDateStruct): string {
    return `${date.day}-${date.month}-${date.year}`;
  }
}

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss'],
  providers: [[I18n, {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n}]]
})

export class DetailsCalendarComponent{
  constructor(public i18n: NgbDatepickerI18n) { }
}

Дать пользовательский шаблон дней

Теперь у нас есть несколько месяцев, когда лейблы теперь остались только дневным шаблоном. Это также может быть изменено стилями в соответствии с вашими потребностями. Вам просто нужно предоставить пользовательский шаблон для ваших дней, используя вход DayTemplate на NGB-датчикера




  

    {{ date.day }}

Здесь вы можете определить различные состояния, используя отключенные, выбранные и сфокусированные. Как я поместил выбранный класс в тот день, когда мы выбираем день месяца. Вы можете добавить любые стили, которые хотите в этом классе.

Теперь мы смогли сделать индивидуальные дни. Итак, мы видим, что мы можем стилизовать весь DatePicker, используя наш собственный шаблон и стили. Это очень полезно для меня на работе.

В этой библиотеке есть много других вариантов, пожалуйста, проверьте это ngbdatepicker Анкет Если у вас есть вопросы, напишите мне Здесь Анкет Это сэкономит вам тонны времени.

Счастливого кодирования.

Оригинал: “https://dev.to/ajitsinghkaler/custom-datepicker-1fdc”

Читайте ещё по теме: