flatpickr | lightweight , powerful javascript datetimepicker | Date Time Utils library

by flatpickr TypeScript Version: v4.6.13 License: MIT

kandi X-RAY | flatpickr Summary

flatpickr is a TypeScript library typically used in Utilities, Date Time Utils applications. flatpickr has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

lightweight, powerful javascript datetimepicker with no dependencies

Support

Quality

Security

License

Reuse

kandi-support Support

flatpickr has a medium active ecosystem.
It has 15364 star(s) with 1395 fork(s). There are 210 watchers for this library.
There were 3 major release(s) in the last 12 months.
There are 595 open issues and 1466 have been closed. On average issues are closed in 117 days. There are 92 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of flatpickr is v4.6.13

flatpickr Support

Best in #Date Time Utils

Average in #Date Time Utils

flatpickr Support

Best in #Date Time Utils

Average in #Date Time Utils

quality kandi Quality

flatpickr has 0 bugs and 0 code smells.

flatpickr Quality

Best in #Date Time Utils

Average in #Date Time Utils

flatpickr Quality

Best in #Date Time Utils

Average in #Date Time Utils

security Security

flatpickr has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
flatpickr code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

flatpickr Security

Best in #Date Time Utils

Average in #Date Time Utils

flatpickr Security

Best in #Date Time Utils

Average in #Date Time Utils

license License

flatpickr is licensed under the MIT License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

flatpickr License

Best in #Date Time Utils

Average in #Date Time Utils

flatpickr License

Best in #Date Time Utils

Average in #Date Time Utils

build Reuse

flatpickr releases are available to install and integrate.
Installation instructions are available. Examples and code snippets are not available.
It has 165 lines of code, 0 functions and 94 files.
It has low code complexity. Code complexity directly impacts maintainability of the code.

flatpickr Reuse

Best in #Date Time Utils

Average in #Date Time Utils

flatpickr Reuse

Best in #Date Time Utils

Average in #Date Time Utils

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here

Get all kandi verified functions for this library.

flatpickr Key Features

lightweight, powerful javascript datetimepicker with no dependencies

flatpickr Examples and Code Snippets

Community Discussions

Trending Discussions on flatpickr

I am trying to validate that is end time is greater then small time with jquery
The unauthenticated git protocol on port 9418 is no longer supported
ERESOLVE unable to resolve dependency tree while installing a pacakge
How to convert "['2022-03-24', '2022-03-25']" to javascript array
Bootstrap 5's Button Text is Black Instead of White Like their Demo
flatpickr js keeps reverting date to Jan 1, 2022
How to stop propagation with AlpineJS and Flatpickr?
Get accurate value onChange event in react.js
Memoize a Bootstrap5 modal inside a Stimulus controller
Socket rejoins again and again which causes Live View to emit events itself periodically. when using with Alpine js

Trending Discussions on flatpickr

QUESTION

I am trying to validate that is end time is greater then small time with jquery

Asked 2022-Apr-11 at 09:21

i am laravel developer and i have no experience with jquery but i am trying to validate that is end time is greater then start time but unfortunately i am little confused my jquery code right or not please help me thanks.

eg. start time = 09:14 and end time 12:15 - valid

and start time = 09:14 and end time 01:15 - not valid

thanks have a nice day

I think a/c to this time it should be validate.i am little confused why are giving me this error end time should be greater then start time.

Html view

             <div class="row my-4">
                <div class="col-md-12 text-center mt-3">
                    <label for="" class="small text-muted">Select Time</label>
                </div>
                <div class="col-md-5">
                    <input type="time" class="form-control flatpickr"  name="start_time" 
                    id="start_time"  placeholder="Start Time" >
                </div>
                <div class="col-md-2 d-flex justify-content-center align-items-center">
                    <i class='bx bx-minus'></i>
                </div>
                <div class="col-md-5">
                    <input type="time"  class="form-control flatpickr" name="end_time" id="end_time" placeholder="End Time" >
                    <span class="endTimeMessage"></span>
                </div>
             </div>

jquery

    $(document).change(function(){
      var startTime =$('#start_time').val(); // 9:15 Am
      var endTime = $('#end_time').val();    // 1:00 pm

        var startTimeParts = startTime.split(":");
        var endTimeParts = endTime.split(":");

        var startDate = new Date();
        startDate.setHours(startTimeParts[0],startTimeParts[1],0,0);
        var endDate = new Date();
        endDate.setHours(endTimeParts[0],endTimeParts[1],0,0);
        if(endTime != ""){
          if (startDate < endDate){
            $(".endTimeMessage").hide();
            $('#btnSubmit').removeAttr("disabled",true);
            return true;
        }else{
            $(".endTimeMessage").show();
            $(".endTimeMessage").text("End time should be greater then start time");
            $('#btnSubmit').prop('disabled', true);
            return false;
        }
        }

    });

ANSWER

Answered 2022-Apr-11 at 09:21

Since I see you are using Flatpickr, you can try this feature.

The totalWorkTime() function checks if the work time is more than 0 seconds, but also not more than 24 hours.

When the start time is entered, the Flatpickr end time is updated to prevent users from entering a value lower than the start time.

For example, if a user enters the start time of 12:00 AM, they cannot enter 11:59 AM as the end time.

$(document).ready(function() {
  const start_time = $('#start_time').flatpickr({
      enableTime: true,
      noCalendar: true,
      time_24hr: true,
      minuteIncrement: 30
  });
  const end_time = $('#end_time').flatpickr({
      enableTime: true,
      noCalendar: true,
      time_24hr: true,
      minuteIncrement: 30
  });

  $(document).change(function() {
    let your_msg = $('.endTimeMessage');
    let time_worked = totalWorkTime(start_time, end_time);
    
    if (time_worked != null) {
      your_msg.html(`You have worked ${time_worked} hours.`);
    } else if (isset(time_worked)) {
      your_msg.html(`End time should be greater then start time.`);
    } else {
      your_msg.html(`Notice: Not all fields are filled in.`);
    }

  });

  function totalWorkTime(set_time_start, set_time_end) {
    if (isset(start_time.selectedDates[0]) && isset(end_time.selectedDates[0])) {
      let date_start = set_time_start.selectedDates[0].getTime();
      let date_end = set_time_end.selectedDates[0].getTime();
      let max_date = new Date(date_start + 60 * 60 * 24 * 1000);
      if (date_start > date_end) {
        // Update flatpickr to prevent value date_start to be higher then date_end
        set_time_end.set('defaultDate', max_date);
      }
      set_time_end.set('minDate', new Date(date_start))
      set_time_end.set('maxDate', max_date)
      let sec = Math.floor((date_end - (date_start)) / 1000);
      let min = Math.floor(sec / 60);
      let hours = Math.floor(min / 60);
      let days = Math.floor(hours / 24);
      hours = hours - (days * 24);
      min = min - (days * 24 * 60) - (hours * 60);
      return (isNaN(hours) || days !== 0 || sec === 0) ? null : ('0' + hours).slice(-2) + ':' + ('0' + min).slice(-2);
    }
  }

  function isset(data) {
    return typeof data !== 'undefined';
  }
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>

<div class="container">
  <div class="row justify-content-center">
    <div class="col-12 text-center my-3">
      <label for="" class="small text-muted">Select Time</label>
    </div>
    <div class="col-auto">
      <input type="time" class="form-control flatpickr" name="start_time" id="start_time" placeholder="Start Time">
    </div>
    <div class="col-auto d-flex justify-content-center align-items-center">
      <i class='bx bx-minus'></i>
    </div>

    <div class="col-auto">
      <input type="time" class="form-control flatpickr" name="end_time" id="end_time" placeholder="End Time">
    </div>
    <div class="row my-4 text-center"><span class="endTimeMessage"></span></div>
  </div>
</div>

Source https://stackoverflow.com/questions/71818979

QUESTION

The unauthenticated git protocol on port 9418 is no longer supported

Asked 2022-Mar-27 at 13:23

I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs

Command: git
Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
Directory: /home/runner/work/stackstream-fe/stackstream-fe
Output:
fatal: remote error: 
  The unauthenticated git protocol on port 9418 is no longer supported.

Upon investigation, it appears that below section in my yml file is causing the issue.

    - name: Installing modules
      run: yarn install

I have looked into this change log but can't seem to comprehend the issue.

Additional Details: Server: EC2 Instance Github actions steps:

  steps:
  - name: Checkout
    uses: actions/checkout@v2

  - id: vars
    run: |
      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi

  - uses: pCYSl5EDgo/cat@master
    id: slack
    with:
      path: .github/workflows/slack.txt

  - name: Slack Start Notification
    uses: 8398a7/action-slack@v3
    env:
      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
      COLOR: good
      STATUS: '`Started`'
    with:
      status: custom
      fields: workflow,job,commit,repo,ref,author,took
      custom_payload: |
        ${{ steps.slack.outputs.text }}

  - name: Installing modules
    env:
      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
    run: yarn install

  - name: Create Frontend Build
    env:
      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
    run: yarn build

  - name: Deploy to Frontend Server DEV
    if: ${{ contains(github.ref, 'dev') }}
    uses: easingthemes/ssh-deploy@v2.1.5
    env:
      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
      ARGS: '-rltgoDzvO --delete'
      SOURCE: 'deploy/'
      REMOTE_HOST: ${{ secrets.DEV_HOST }}
      REMOTE_USER: plyfolio-dev
      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'

package.json file

   {
  "name": "stackstream-fe",
  "version": "1.0.0",
  "authors": [
    "fayyaznofal@gmail.com"
  ],
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@fullcalendar/bootstrap": "^5.5.0",
    "@fullcalendar/core": "^5.5.0",
    "@fullcalendar/daygrid": "^5.5.0",
    "@fullcalendar/interaction": "^5.5.0",
    "@fullcalendar/react": "^5.5.0",
    "@lourenci/react-kanban": "^2.1.0",
    "@redux-saga/simple-saga-monitor": "^1.1.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "@toast-ui/react-chart": "^1.0.2",
    "@types/jest": "^26.0.14",
    "@types/node": "^14.10.3",
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
    "@vtaits/react-color-picker": "^0.1.1",
    "apexcharts": "^3.23.1",
    "availity-reactstrap-validation": "^2.7.0",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.19.0",
    "axios-progress-bar": "^1.2.0",
    "bootstrap": "^5.0.0-beta2",
    "chart.js": "^2.9.4",
    "chartist": "^0.11.4",
    "classnames": "^2.2.6",
    "components": "^0.1.0",
    "dotenv": "^8.2.0",
    "draft-js": "^0.11.7",
    "echarts": "^4.9.0",
    "echarts-for-react": "^2.0.16",
    "firebase": "^8.2.3",
    "google-maps-react": "^2.0.6",
    "history": "^4.10.1",
    "i": "^0.3.6",
    "i18next": "^19.8.4",
    "i18next-browser-languagedetector": "^6.0.1",
    "jsonwebtoken": "^8.5.1",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21",
    "lodash.clonedeep": "^4.5.0",
    "lodash.get": "^4.4.2",
    "metismenujs": "^1.2.1",
    "mkdirp": "^1.0.4",
    "moment": "2.29.1",
    "moment-timezone": "^0.5.32",
    "nouislider-react": "^3.3.9",
    "npm": "^7.6.3",
    "prop-types": "^15.7.2",
    "query-string": "^6.14.0",
    "react": "^16.13.1",
    "react-apexcharts": "^1.3.7",
    "react-auth-code-input": "^1.0.0",
    "react-avatar": "^3.10.0",
    "react-bootstrap": "^1.5.0",
    "react-bootstrap-editable": "^0.8.2",
    "react-bootstrap-sweetalert": "^5.2.0",
    "react-bootstrap-table-next": "^4.0.3",
    "react-bootstrap-table2-editor": "^1.4.0",
    "react-bootstrap-table2-paginator": "^2.1.2",
    "react-bootstrap-table2-toolkit": "^2.1.3",
    "react-chartist": "^0.14.3",
    "react-chartjs-2": "^2.11.1",
    "react-color": "^2.19.3",
    "react-confirm-alert": "^2.7.0",
    "react-content-loader": "^6.0.1",
    "react-countdown": "^2.3.1",
    "react-countup": "^4.3.3",
    "react-cropper": "^2.1.4",
    "react-data-table-component": "^6.11.8",
    "react-date-picker": "^8.0.6",
    "react-datepicker": "^3.4.1",
    "react-dom": "^16.13.1",
    "react-draft-wysiwyg": "^1.14.5",
    "react-drag-listview": "^0.1.8",
    "react-drawer": "^1.3.4",
    "react-dropzone": "^11.2.4",
    "react-dual-listbox": "^2.0.0",
    "react-facebook-login": "^4.1.1",
    "react-flatpickr": "^3.10.6",
    "react-google-login": "^5.2.2",
    "react-hook-form": "^7.15.2",
    "react-i18next": "^11.8.5",
    "react-icons": "^4.2.0",
    "react-image-lightbox": "^5.1.1",
    "react-input-mask": "^2.0.4",
    "react-jvectormap": "^0.0.16",
    "react-leaflet": "^3.0.5",
    "react-meta-tags": "^1.0.1",
    "react-modal-video": "^1.2.6",
    "react-notifications": "^1.7.2",
    "react-number-format": "^4.7.3",
    "react-perfect-scrollbar": "^1.5.8",
    "react-rangeslider": "^2.2.0",
    "react-rating": "^2.0.5",
    "react-rating-tooltip": "^1.1.6",
    "react-redux": "^7.2.1",
    "react-responsive-carousel": "^3.2.11",
    "react-router-dom": "^5.2.0",
    "react-script": "^2.0.5",
    "react-scripts": "3.4.3",
    "react-select": "^4.3.1",
    "react-sparklines": "^1.7.0",
    "react-star-ratings": "^2.3.0",
    "react-super-responsive-table": "^5.2.0",
    "react-switch": "^6.0.0",
    "react-table": "^7.6.3",
    "react-toastify": "^7.0.3",
    "react-toastr": "^3.0.0",
    "react-twitter-auth": "0.0.13",
    "reactstrap": "^8.8.1",
    "recharts": "^2.0.8",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "sass": "^1.37.5",
    "simplebar-react": "^2.3.0",
    "styled": "^1.0.0",
    "styled-components": "^5.2.1",
    "toastr": "^2.1.4",
    "typescript": "^4.0.2",
    "universal-cookie": "^4.0.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.27.0",
    "@typescript-eslint/parser": "^2.27.0",
    "@typescript-eslint/typescript-estree": "^4.15.2",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-prettier": "^3.1.2",
    "husky": "^4.2.5",
    "lint-staged": "^10.1.3",
    "prettier": "^1.19.1",
    "react-test-renderer": "^16.13.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-mock-store": "^1.5.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && mv build ./deploy/build",
    "build-local": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "eslint --fix"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

package-lock.json

ANSWER

Answered 2022-Mar-16 at 07:01

First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".

January 11, 2022 Final brownout.

This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.

Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

As noted by Jörg W Mittag:

There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

The permanent shutdown is not until March 15th.

For GitHub Actions:

As in actions/checkout issue 14, you can add as a first step:

    - name: Fix up git URLs
      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig

That will change any git://github.com/ into https://github.com/.

For local projects

For all your repositories, you can set:

git config --global url."https://github.com/".insteadOf git://github.com/

You can also use SSH, but GitHub Security reminds us that, as of March 15th, 2022, GitHub stopped accepting DSA keys. RSA keys uploaded after Nov 2, 2021 will work only with SHA-2 signatures.
The deprecated MACs, ciphers, and unencrypted Git protocol are permanently disabled.

So this (with the right key) would work:

git config --global url."git@github.com:".insteadOf git://github.com/

That will change any git://github.com/ (unencrypted Git protocol) into git@github.com: (SSH URL).

Source https://stackoverflow.com/questions/70663523

QUESTION

ERESOLVE unable to resolve dependency tree while installing a pacakge

Asked 2022-Mar-23 at 06:20

While installing the dependencies for my project using npm install, I receive the following error that I don't know how to interpret:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: soft-ui-dashboard-pro-react@3.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.9 || ^15.3.0 || ^16.0.0" from react-quill@1.3.5
npm ERR! node_modules/react-quill
npm ERR!   react-quill@"1.3.5" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/amin/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/amin/.npm/_logs/2022-03-23T05_47_43_419Z-debug-0.log

These are the dependencies in package.json:

  "dependencies": {
    "@asseinfo/react-kanban": "2.2.0",
    "@emotion/cache": "11.7.1",
    "@emotion/react": "11.8.1",
    "@emotion/styled": "11.8.1",
    "@fullcalendar/daygrid": "5.10.1",
    "@fullcalendar/interaction": "5.10.1",
    "@fullcalendar/react": "5.10.1",
    "@fullcalendar/timegrid": "5.10.1",
    "@mui/icons-material": "5.4.2",
    "@mui/material": "5.4.3",
    "@mui/styled-engine": "5.4.2",
    "@pathofdev/react-tag-input": "1.0.7",
    "@react-leaflet/core": "1.1.1",
    "@testing-library/jest-dom": "5.16.2",
    "@testing-library/react": "12.1.3",
    "@testing-library/user-event": "13.5.0",
    "@three-ts/orbit-controls": "1.4.7",
    "chart.js": "3.4.1",
    "chroma-js": "2.4.2",
    "dropzone": "5.9.3",
    "flatpickr": "4.6.9",
    "formik": "2.2.9",
    "html-react-parser": "1.4.8",
    "leaflet": "1.7.1",
    "prop-types": "15.8.1",
    "react": "17.0.2",
    "react-chartjs-2": "3.0.4",
    "react-circular-slider-svg": "0.1.5",
    "react-countup": "6.1.1",
    "react-dom": "17.0.2",
    "react-flatpickr": "3.10.7",
    "react-github-btn": "1.2.1",
    "react-images-viewer": "1.7.1",
    "react-leaflet": "3.2.5",
    "react-quill": "1.3.5",
    "react-router-dom": "6.2.1",
    "react-scripts": "5.0.0",
    "react-select": "5.2.2",
    "react-table": "7.7.0",
    "stylis": "4.0.13",
    "stylis-plugin-rtl": "2.1.1",
    "sweetalert2": "11.4.4",
    "three": "0.121.1",
    "uuid": "8.3.2",
    "vanilla-tilt": "1.7.2",
    "web-vitals": "2.1.4",
    "yup": "0.32.11"
  },

ANSWER

Answered 2022-Mar-23 at 06:20

It means you have dependency conflicts. So try running the following options one by one.

1. Remove node_modules and package-lock.json and then run

 npm install

2. Or try clearing out npm cache

npm cache clean --force

3. Or run command with --legacy-peer-deps option

npm install --legacy-peer-deps

4. Or run command with --force option

npm install --force

Source https://stackoverflow.com/questions/71582397

QUESTION

Bootstrap 5's Button Text is Black Instead of White Like their Demo

Asked 2022-Mar-16 at 21:40

I am not sure if this is something I did wrong when installing Bootstrap 5, but a lot of my buttons are using a black font instead of the white font as is seen on the Bootstrap 5 Documentation

For example, the .btn-primary on the Bootstrap docs looks like this:

However when I use the identical HTML I get this as a result:

For reference the HTML in both their example and mine is:

<button type="button" class="btn btn-primary">Primary</button>

Not only is the text colour a different colour, but the background colour is different as well. In fact looking through my compiled .css file, a good chunk of the bootstrap colours used all across the code has this "washed out" appearance similar to the blue colour in the button. From the Chrome dev tools the style appears to be coming from Bootstrap files themselves, not from any style I am inadvertently applying. The SCSS is being compiled down to CSS files via the normal Laravel setup (webpack mix). I am just using the NPM packages for bootstrap 5.

window.bootstrap = require('bootstrap'); and NPM package "bootstrap": "^5.1.3",

My app.scss file doesn't have much at all in it:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "~bootstrap-icons/font/bootstrap-icons";

// "Lobster" Font for H1's
@import "https://fonts.googleapis.com/css2?family=Cuprum&family=Lobster&display=swap";

// Flatpickr Styles
@import "~flatpickr/dist/flatpickr.min.css";

// Font Awesome Free
@import "~@fortawesome/fontawesome-free/css/all.min.css";

// DataTables Styles
@import "~datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css";

h1 {
    font-family: 'Lobster', cursive;
}

a.torn-link {
    color: $orange;
}

.ttt-title {
    font-family: 'Lobster', cursive;
}
.card-title {
    font-family: 'Cuprum', sans-serif;
}
html {
    background-color: #fff;
    color: #636b6f;
}
body {
    background-color: #fff;
    color: #636b6f;
}
.links {
    >a {
        color: #636b6f;
        padding: 0 25px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .1rem;
        text-decoration: none;
        text-transform: uppercase;
    }
}
#settings-button {
    &:hover {
        fill: rgba(189, 189, 189, 0.25);
    }
}
.ui-dialog-title {
    font-family: 'Cuprum', sans-serif;
}

thead, th {
    text-align: center;
}

Edit: Even all the Bootstrap Colored links appear to be washed out. For example the .link-warning yellow is not possible to use as the colour is too washed out to be able to read it. Whereas the yellow on their page is completely readable. So it's not even that I am just accidentally applying a style to a button or something.

Edit2:

Here is what my button looks like in the dev tools (note the colours differ from what the Bootstrap 5 docs colours have

and the buttons CSS is just coming from the compiled app.css file generated via the webpack:

Edit 3: My _variables.scss file:

// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

ANSWER

Answered 2021-Nov-02 at 19:25

In the _variables.scss file at some point in adding Bootstrap 5 to Laravel 8 it looks like one of the scripts added colours, or I messed up at some point and added a colour pallet into the variables file.

All of the colours in the variables file were similar to the Bootstrap default colours, but instead were a more washed out version. This is what was causing anything in Bootstrap which used these variables to appear washed out.

Simply removing all the colours I had defined in the _variables.scss file fixed the problem.

Source https://stackoverflow.com/questions/69783190

QUESTION

How to stop propagation with AlpineJS and Flatpickr?

Asked 2022-Mar-08 at 07:46

I have a modal window for filters on my application. The filters modal has @click.outside="filters = false" so if the user clicks outside of the modal it will hide. Inside of that filters modal I have an option for choosing the minimum date for which I'm using Flatpickr.

The problem is when you click on the arrows to change the month - or the month or year at the top - the filters modal will hide.

I believe that I need to use e.stopPropagation or @click.prevent on the element but it hasn't worked in each spot that I've tried it.

How do I make it so that any clicks inside of the Flatpicker window doesn't propagate up and close the filters modal?

Here is my full code -

<div x-show="filters" @click.outside="filters = false" x-on:keydown.escape.window="filters = false" class="absolute shadow-lg z-40 mt-4">
  <div x-trap="filters">
    <div>
      <label for="filter-date-min" class="block text-sm font-semibold leading-5 text-gray-700">Minimum Date</label>
      <div class="mt-1 relative rounded-md shadow-sm">
        <div x-data="{
          value: '',
          init() {
            let picker = flatpickr(this.$refs.picker, {
              dateFormat: 'Y-m-d',
              defaultDate: this.value,
              onChange: (date, dateString) => {
                this.value = dateString
              },
            })
          },
        }">
          <input id="filter-date-min" placeholder="MM/DD/YYYY" x-ref="picker" x-bind:value="value" class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 border active" autocomplete="off">
        </div>
      </div>
    </div>
  </div>
</div>

ANSWER

Answered 2022-Mar-07 at 20:36

I don't believe AlpineJS is capable of doing this, so you can throw in some custom JS. You can add this code in a script tag right before the closing body tag:

[...document.getElementsByClassName("flatpickr-calendar")].forEach($el => {
    $el.addEventListener("click", e => e.stopPropagation());
});

Once the user opens a Flatpickr popup, Flatpickr appends the calendar to the end of the body, not inside your div, so it's an "outside" click.

AlpineJS determines "outside" clicks by adding an event listener to window (or something similar), and when the event bubbles (propagates) up it tests whether the click target is the element that's requesting an outside click. If not, fire an event that there's an "outside" click.

What this code essentially does is, once there is a click on a Flatpickr popup calendar, we prevent the event from bubbling up to AlpineJS, so Alpine doesn't know there was any click on the window at all, thus @click.outside won't trigger when the calendar is clicked.

Source https://stackoverflow.com/questions/71386699

QUESTION

Memoize a Bootstrap5 modal inside a Stimulus controller

Asked 2022-Feb-23 at 12:36

I've a form within a modal defined in a partial:

<!-- app/views/events/new_event_modal.html.erb -->
<div data-controller="events--form">  
  <div class="modal fade" id="new-event-modal" tabindex="-1" aria-labelledby="new-event-label" aria-hidden="true" data-events--form-target="modal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title text-light" id="new-event-label">Ajouter un évennement</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <%= render partial: 'events/form',
                     locals: { event:     event,
                               calendars: calendars,
                               users:     users } %>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- app/views/events/_form.html.erb -->
<%= turbo_frame_tag dom_id(event) do %>
  <div class="container text-light">
    <%= form_with(model: event || Event.new) do |form| %>
      
      <!-- form's content omitted -->

      <div class="actions modal-footer">
        <%= form.submit class: 'btn btn-primary' %>
      </div>
    <% end %>
  </div>
<% end %>

As it is a calendar application, I pre-fill the form with the date selected by users and then show the modal. This is done with some "+" icons and a Stimulus controller:

# app/views/simple_calendar/_mounth_calendar.html.erb
# each day has this icon
<%= image_tag 'add.svg',
  size: '20x20',
  alt:  '+',
  data: {
    action: 'click->events--form#configure_and_show_modal',
    date:   day.strftime('%d/%m/%Y')
  }
%>

// app/javascript/packs/controllers/events/form_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "modal" ]

  connect() {
    this.element.addEventListener('turbo:submit-end', (event) => {
      if (event.detail.success) {
        this.hide_modal();
      }
    });
  }

  configure_and_show_modal(event) {
    const date = event.target.dataset.date;

    this.configure_flatpickr(date);
    this.show_modal();
  }

  configure_flatpickr(date) {
    flatpickr("[data-behavior='flatpickr']", {
      altInput:      true,
      altFormat:     'd F Y',
      altInputClass: 'form-control input text-dark',
      dateFormat:    'd/m/Y H:i',
      defaultDate:   date,
      mode:          'range',
    })
  }

  show_modal() {
    this.modal.show();
  }

  hide_modal() {
    this.modal.hide();
  }

  get modal() {
    return new bootstrap.Modal(this.modalTarget);
  }
}

Issue is that get modal() instantiates a new object each time, thus calling hide_modal() invokes .hide() on a newly created object and does not hide the displayed modal.

I know I need some kind of memoization, but I've no idea how to implement it on a Stimulus controller.

Using ruby we'd do something like:

@modal ||= get_modal

Could anyone guide me in this direction ?

ANSWER

Answered 2022-Feb-20 at 21:03

A simple way to achieve this goal would be to store the modal instance on the class instance.

This way you can still access it from your getter but not have to recreate it each time.

The _modalInstance is just a convention, the underscore indicating that it should be private ish. However this could cause issues if the controller gets disconnected somehow and has to reconnect with the modal already shown.


import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "modal" ]

  get modal() {
    if (this._modalInstance) return this._modalInstance;
    const modal = new bootstrap.Modal(this.modalTarget);
    this._modalInstance = modal;
    return this._modalInstance;
  }
}

A nicer way to achieve this though would be to use the Bootstrap JavaScript API.

bootstrap.Modal.getOrCreateInstance(myModalEl)

https://getbootstrap.com/docs/5.1/components/modal/#getorcreateinstance


import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "modal" ]

  get modal() {
    return bootstrap.Modal.getOrCreateInstance(this.modalTarget);
  }
}

Source https://stackoverflow.com/questions/71187374

QUESTION

Socket rejoins again and again which causes Live View to emit events itself periodically. when using with Alpine js

Asked 2022-Feb-10 at 19:37

Issue: Socket rejoins again and again which causes Live View to emit events itself periodically.

Scenario: I have index page which contains phx-change events. When I left the page idle for sometime, the events started to triggered automatically periodically. It is not limited to single page but it happen on each live view page, I googled the issue but couldn’t find any solution.

1 reason I noticed that sometimes heartbeat stops for more than 1 minute(timeout limit is 1 minute), in this case socket rejoined again.
I increased timeout at client side as well at server side in Endpoint to check if this is the only issue but it didn’t work and socket behaved the same.
Did anyone face same issue before, what could be a possible reasons and how to avoid this issue, any suggestion?

Stack: PETAL

Elixir: 1.11 Erlang: 23.0 phoenix: 1.5.3 phoenix_live_view: 0.15.7 alpinejs “^2.8.2” Browsers: chrome, safari

I think issue is with Alpine Js but couldn’t figure out any solution.

Here is my app.js code

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {
    uploaders: Uploaders,
    hooks: Hooks,
    params: { _csrf_token: csrfToken },
    timeout: 60000,
    dom: {
        onBeforeElUpdated(from, to) {
            if (from.__x) {
                Alpine.clone(from.__x, to);
            }
            flatpickr(".date-picker", {
                wrap: true,
                disableMobile: true,
                dateFormat: "Ymd H:i:S.ssss"
            });
            flatpickr(".datetime-picker", {
                enableTime: true,
                wrap: true,
                disableMobile: true,
                "plugins": [new confirmDatePlugin({ confirmIcon: "", confirmText: "Confirm" })],
                time_24hr: true,
                dateFormat: "Ymd H:i:S.ssss"
            });
        }
    }, 
    heartbeatIntervalMs: 10000
});

Endpoint Configuration:

 socket "/socket", PrintSimpleWeb.UserSocket,
  websocket: [
    timeout: :infinity,
  ],
    longpoll: false

  socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]

ANSWER

Answered 2022-Feb-10 at 19:37

it was fixed by simple updating Elixir dependencies and npm packages. Here are the steps which I followed:

> remove _build, node_modules, deps folder
RUN: 
> mix deps.get 
> mix compile
> npm install (inside /assets)
> iex -S mix phx.server

Source https://stackoverflow.com/questions/70832167

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install flatpickr

Demos and documentation: https://flatpickr.js.org.
angular2+-flatpickr addon
angularJS-flatpickr addon
ember-flatpickr addon
Preact Component
React Component
Stimulus.js Controller
Svelte Component
vue-flatpickr component
lit-flatpickr component

Support

flatpickr will never change its license, pester users for donations, or engage in other user-hostile behavior. Nevertheless, if you enjoyed working with this library or if its made your life easier, you can buy me a cup of coffee :).

Find more information at: