sigd/public/assets/js/pages/form-advanced.init.js

/*
Template Name: webadmin - Admin & Dashboard Template
Author: Themesdesign
Website: https://Themesdesign.com/
Contact: Themesdesign@gmail.com
File: Form Advanced Js File
*/

// Chocies Select plugin
document.addEventListener('DOMContentLoaded', function () {
  var genericExamples = document.querySelectorAll('[data-trigger]');
  for (i = 0; i < genericExamples.length; ++i) {
    var element = genericExamples[i];
    new Choices(element, {
      placeholderValue: 'This is a placeholder set in the config',
      searchPlaceholderValue: 'This is a search placeholder',
    });
  }

  // singleNoSearch
  var singleNoSearch = new Choices('#choices-single-no-search', {
    searchEnabled: false,
    removeItemButton: true,
    choices: [
      { value: 'One', label: 'Label One' },
      { value: 'Two', label: 'Label Two', disabled: true },
      { value: 'Three', label: 'Label Three' },
    ],
  }).setChoices(
    [
      { value: 'Four', label: 'Label Four', disabled: true },
      { value: 'Five', label: 'Label Five' },
      { value: 'Six', label: 'Label Six', selected: true },
    ],
    'value',
    'label',
    false
  );

  // singleNoSorting
  var singleNoSorting = new Choices('#choices-single-no-sorting', {
    shouldSort: false,
  });


  // multiple Remove CancelButton
  var multipleCancelButton = new Choices(
    '#choices-multiple-remove-button',
    {
      removeItemButton: true,
    }
  );

  //choices-multiple-groups
  var multipleDefault = new Choices(
    document.getElementById('choices-multiple-groups')
  );

  // text inputs example
  var textRemove = new Choices(
    document.getElementById('choices-text-remove-button'),
    {
      delimiter: ',',
      editItems: true,
      maxItemCount: 5,
      removeItemButton: true,
    }
  );

  // choices-text-unique-values
  var textUniqueVals = new Choices('#choices-text-unique-values', {
    paste: false,
    duplicateItemsAllowed: false,
    editItems: true,
  });

  //choices-text-disabled
  var textDisabled = new Choices('#choices-text-disabled', {
    addItems: false,
    removeItems: false,
  }).disable();
});


// colorpicker

// classic color picker
var classicPickr = Pickr.create({
    el: '.classic-colorpicker',
    theme: 'classic', // or 'monolith', or 'nano'
    default: '#038edc',
    swatches: [
      'rgba(244, 67, 54, 1)',
      'rgba(233, 30, 99, 0.95)',
      'rgba(156, 39, 176, 0.9)',
      'rgba(103, 58, 183, 0.85)',
      'rgba(63, 81, 181, 0.8)',
      'rgba(33, 150, 243, 0.75)',
      'rgba(3, 169, 244, 0.7)',
      'rgba(0, 188, 212, 0.7)',
      'rgba(0, 150, 136, 0.75)',
      'rgba(76, 175, 80, 0.8)',
      'rgba(139, 195, 74, 0.85)',
      'rgba(205, 220, 57, 0.9)',
      'rgba(255, 235, 59, 0.95)',
      'rgba(255, 193, 7, 1)'
    ],

    components: {

      // Main components
      preview: true,
      opacity: true,
      hue: true,

      // Input / output Options
      interaction: {
        hex: true,
        rgba: true,
        hsva: true,
        input: true,
        clear: true,
        save: true
      }
    }
});


// monolith color picker
var monolithPickr = Pickr.create({
  el: '.monolith-colorpicker',
  theme: 'monolith',
  default: '#5fd0f3',
  swatches: [
    'rgba(244, 67, 54, 1)',
    'rgba(233, 30, 99, 0.95)',
    'rgba(156, 39, 176, 0.9)',
    'rgba(103, 58, 183, 0.85)',
    'rgba(63, 81, 181, 0.8)',
    'rgba(33, 150, 243, 0.75)',
    'rgba(3, 169, 244, 0.7)'
  ],
  defaultRepresentation: 'HEXA',
  components: {

    // Main components
    preview: true,
    opacity: true,
    hue: true,

    // Input / output Options
    interaction: {
      hex: false,
      rgba: false,
      hsva: false,
      input: true,
      clear: true,
      save: true
    }
  }
});

// nano color picker
var nanoPickr = Pickr.create({
  el: '.nano-colorpicker',
  theme: 'nano',
  default: '#f7cc53',
  swatches: [
    'rgba(244, 67, 54, 1)',
    'rgba(233, 30, 99, 0.95)',
    'rgba(156, 39, 176, 0.9)',
    'rgba(103, 58, 183, 0.85)',
    'rgba(63, 81, 181, 0.8)',
    'rgba(33, 150, 243, 0.75)',
    'rgba(3, 169, 244, 0.7)'
  ],
  defaultRepresentation: 'HEXA',
  components: {

    // Main components
    preview: true,
    opacity: true,
    hue: true,

    // Input / output Options
    interaction: {
      hex: false,
      rgba: false,
      hsva: false,
      input: true,
      clear: true,
      save: true
    }
  }
});


// flatpickr

flatpickr('#datepicker-basic');

flatpickr('#datepicker-datetime', {
  enableTime: true,
  dateFormat: "m-d-Y H:i"
});

flatpickr('#datepicker-humanfd', {
  altInput: true,
  altFormat: "F j, Y",
  dateFormat: "Y-m-d",
});

flatpickr('#datepicker-minmax', {
  minDate: "today",
  maxDate: new Date().fp_incr(14) // 14 days from now
});

flatpickr('#datepicker-disable', {
  onReady: function () {
    this.jumpToDate("2025-01")
  },
  disable: ["2025-01-30", "2025-02-21", "2025-03-08", new Date(2025, 4, 9)],
  dateFormat: "Y-m-d",
});

flatpickr('#datepicker-multiple', {
  mode: "multiple",
  dateFormat: "Y-m-d"
});

flatpickr('#datepicker-range', {
  mode: "range"
});

flatpickr('#datepicker-timepicker', {
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i",
});

flatpickr('#datepicker-inline', {
  inline: true
});