npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@slcloud/react-advanced-datetimerange-picker

v1.8.0

Published

<b> This is a fork of react-datetimepicker library for Shoreline IoT </b> <br> # React Advanced Date Time Range Picker

Downloads

46

Readme

CircleCI Maintainability Test Coverage See the working demo over at codesandbox.io React 15 Demo https://codesandbox.io/s/zxoo178m03?fontsize=14&module=%2Fsrc%2FApp.js React 16 Demo https://codesandbox.io/s/v6z8l7nr8y?fontsize=14&module=%2Fsrc%2FApp.js

This is a fully rewritten, keyboard friendly implementation of a date time range picker. It has been designed for selecting date ranges and does not currently include a single date picker.

It has been designed currently to work with React Version 15

Date Time Picker

The current version is compatible with Firefox 34+ and Chrome 40+ (May work but not widely tests on earlier versions)

Version 1.0.1 Release (30-06-19) -- Major Change

With the release of this version comes a major change to the default vanilla behaviour of the date time picker. Default behaviour is now non smart mode. Smart mode must be enabled via the use of the smart mode property. Also by default smart mode will be optimised for forward searching. Use pastSearchFriendly to optimise for past searching.

Setup

Run the following command:

npm install react-advanced-datetimerange-picker

Requirements

This component is best used alongside bootstrap e.g. the below line of code in index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

General Info

This project is based upon dangrossman daterangepicker (https://github.com/dangrossman/daterangepicker)

The project has been rewritten in React, this is not a JQuery wrap around.

It is based off of the V2 UI with some slight adjustments and added keyboard accessibility such as Keyboard arrow key navigation and Tab navigation.

Properties Required

ranges {React.Object}
Object of ranges that will be you default ranges. Example:

let ranges = {
            "Today Only": [moment(start), moment(end)],
            "Yesterday Only": [moment(start).subtract(1, "days"), moment(end).subtract(1, "days")],
            "3 Days": [moment(start).subtract(3, "days"), moment(end)]
        }

start (Required) {Moment Object}
Initial Start Date that will be selected, should be a moment object

end (Required) {Moment Object}
Initial End Date that will be selected, should be a moment object

local (Required) {Object}
Defines a local format for date labels to be shown as. Can also set Sunday to be first day or Monday. Local object accepts format and sunday first params.

--> format: moment display format --> sundayFirst: True Sunday the first day of the week. False, Monday first day of the week. --> From release version 1.0.7+: days, months, fromDate, toDate, selectingFrom, selectingTo, MaxDate, close, apply, cancel

let local = {
    "format":"DD-MM-YYYY HH:mm",
    "sundayFirst" : false,
    days: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'So'],
    months: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December',],
    fromDate: 'From Date',
    toDate: 'To Date',
    selectingFrom: 'Selecting From',
    selectingTo: 'Selecting To',
    maxDate: 'Max Date',
    close: 'Close',
    apply: 'Apply',
    cancel: 'Cancel'
}

applyCallback (Required) {React.func} Function which is called when the apply button is clicked/pressed. Takes two params, that start date and the end date.

func applyCallback(startDate, endDate){
    ... 
}

maxDate (optional) {Moment Object} Maximum date that can be selected.

rangeCallback (optional) {React.func}

func rangeCallback(index, value) {
    ...
}

autoApply (optional) {bool} When set there will only be one button in the bottom right to close the screen. Whenever a button is clicked in the date picker the apply callback function will be called for you.

descendingYears (optional) {bool} When set the years will be displayed in descending order on the picker instead of ascending order.

years (optional) {array} years={[2010, 2020]} Takes an array where the first value is the start year and the second values is the end year. This will update the dropdown years to only show these years. WARNING: This does not affect the ability to type in years in the text box and go beyond the values set here.

smartMode (optional) {bool} The date time picker will switch the month on the RHS when two dates in the same month are selected. Can be used in conjunction with pastSearchFriendly to switch the month on the LHS when the two dates are from the same month.

pastSearchFriendly (optional) {bool} Requires: Smart Mode enabled Changes the mode of the date time picker to be optimised for past searches. Where possible the start and end time will be shown on the RHS when the month and year are equal. This allows for the previous month to be shown on the LHS to allow easier backwards searching. This setting is false by default meaning that the LHS is used when dates are selected in the same month & year

style (optional) {Object} Allows custom styling of some of the elements of the date time picker. The following can be added:

{
    fromDot: {backgroundColor: 'rgb(100, 0, 34)'},
    toDot: {backgroundColor: 'rgb(0, 135, 255)'},
    fromDate: {color: 'rgb(0, 255, 100)', backgroundColor: 'rgb(255, 100, 100)'},
    toDate: {backgroundColor: 'rgb(40, 90, 75)'},
    betweenDates: {color: 'rgb(200, 0, 34)', backgroundColor: 'rgb(200, 150, 100)'},
    hoverCell: {color: 'rgb(200, 0, 34)'},
    customRangeButtons: {backgroundColor: 'rgb(40, 90, 75)'},
    customRangeSelected: {backgroundColor: 'rgb(100, 90, 200)'},
    standaloneLayout:{display:'flex', maxWidth:'fit-content'}
}

darkMode (optional) {bool} Changes the DateTimePicker to be in Dark Mode, default is Light Mode

noMobileMode (optional) {bool} Release Version: 1.0.6+ When set the mobile/condense breakpoint will be ignored meaning the component will stay in full screen mode all the time.

forceMobileMode (optional) {bool} Release Version: 1.0.9+ When set the mobile/condense breakpoint will be ignored meaning the component will stay in condensed mode all the time.

twelveHoursClock (optional) {bool} Release Version: 1.0.13+ When set the picker time values will be in 12 hour mode not 24 hour mode

standaloneMode (optional) {bool} Release Version: 1.0.9+ (BETA) When set the picker will be open by default and follow the styling given. This config option requires the below config styling to also be present in order to style the div

style={{
    standaloneLayout:{display:'flex', maxWidth:'fit-content'}
}}

leftMode (optional) {bool} Release Version: 1.0.6+ (BETA) When set and changed the picker will open to the left (right to left) instead of the default which is to open to the right (left to right)

Getting Started

import React from 'react';
import DateTimeRangeContainer from 'react-advanced-datetimerange-picker'
import {FormControl} from 'react-bootstrap'
import moment from "moment"

class Wrapper extends React.Component {

    constructor(props){
        super(props);
        let now = new Date();
        let start = moment(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0,0,0,0));
        let end = moment(start).add(1, "days").subtract(1, "seconds");
        this.state = {
            start : start,
            end : end
        }

        this.applyCallback = this.applyCallback.bind(this);
    }

    applyCallback(startDate, endDate){
        this.setState({
                start: startDate,
                end : endDate
            }
        )
    }

    render(){
            let now = new Date();
            let start = moment(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0,0,0,0));
            let end = moment(start).add(1, "days").subtract(1, "seconds");
            let ranges = {
                "Today Only": [moment(start), moment(end)],
                "Yesterday Only": [moment(start).subtract(1, "days"), moment(end).subtract(1, "days")],
                "3 Days": [moment(start).subtract(3, "days"), moment(end)]
            }
            let local = {
                "format":"DD-MM-YYYY HH:mm",
                "sundayFirst" : false
            }
            let maxDate = moment(start).add(24, "hour")
            return(
                <div>
                    <DateTimeRangeContainer 
                        ranges={ranges}
                        start={this.state.start}
                        end={this.state.end}
                        local={local}
                        maxDate={maxDate}
                        applyCallback={this.applyCallback}
                    >    
                        <FormControl
                        id="formControlsTextB"
                        type="text"
                        label="Text"
                        placeholder="Enter text"
                        /> 
                    </DateTimeRangeContainer>
                </div>
            );
        }
}

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

npm test -- --coverage

Gets test coverage when running tests to see how much of the code is covered by your tests.