kandi background
Explore Kits

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

 by   flatpickr TypeScript Version: v4.6.13 License: MIT

 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
Support
Quality
Quality
Security
Security
License
License
Reuse
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

securitySecurity

  • 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

buildReuse

  • 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.

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. enter image description here

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

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:

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 650 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases
Explore Kits

Save this library and start creating your kit

Clone
  • https://github.com/flatpickr/flatpickr.git

  • gh repo clone flatpickr/flatpickr

  • git@github.com:flatpickr/flatpickr.git

Share this Page

share link

See Similar Libraries in

Consider Popular Date Time Utils Libraries
Try Top Libraries by flatpickr
Compare Date Time Utils Libraries with Highest Support
Compare Date Time Utils Libraries with Highest Quality
Compare Date Time Utils Libraries with Highest Security
Compare Date Time Utils Libraries with Permissive License
Compare Date Time Utils Libraries with Highest Reuse
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 650 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases
Explore Kits

Save this library and start creating your kit