evandhq / react-persian-datepicker Goto Github PK

i cant manage that user cant type in it , i think it is better to set an option for all another props that can effect on an input , like disable , autoFocus and so on .

Hi,
When I import your module to my jsx file and compile with gulp in cmd have a error Unexpected token

please help me to fix this.

Thanks for the current date picker,
I want to know if there is possible to have range between to date picker or not

Hi,
How can i select current day in <Datepicker>, it doesnt have any classes.

I would use this component for birthday date. As I see for the user is very hard to find which year he was born. If you ask me, It's very useful the user can choose a year.

Hi, goto farvardin 1394, see two "1" in this month and selected day not correct

Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

This issue causes datepicker simple styles to break. Please check the link blow to fix this issue:
https://facebook.github.io/react/warnings/dont-call-proptypes.html

Best regards

Hey, sweet project. Are there plans in adding a time selector to the project?

Hi, whether for multi language site feasibility change to Gregorian calendar?

foreaxample :

Hi .
I wonder how can I access the date and the month when clicked on calendar (not the datepicker) and if the component provides any Onchanged or Onclicked function

tnx for your help and sorry if this might be a duplicate question

CSS files need to be renamed to module.css to support style modules without any manual change to css loader in webpack

Solved.

plz add select year and month

It would be great if there was some documentation. instead of only examples.

The library won't run on Next js and produces this error :

Global CSS cannot be imported from within node_modules

Hi @mohebifar
I just wanted to report a bug , when I click on the month button , the calendar hangs and there is no way to get back to 'days' rather than refreshing the page .
Can you help me with this?

the error is this :
index.js:89 Uncaught Error: Invalid Jalaali year -100721
at jalCal (index.js:89)
at d2j (index.js:153)
at Object.toJalaali (index.js:21)
at toJalaali (index.js:799)
at F.jMoment.fn.jMonth (index.js:612)
at F.jM (index.js:38)
at F. (index.js:77)
at Object.jMM (index.js:244)
at F.jMoment.fn.format (index.js:568)
at Calendar.js:196
at Array.map ()
at Calendar.renderDays (Calendar.js:195)
at Calendar.render (Calendar.js:230)
at ReactCompositeComponent.js:796
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:746)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:724)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:645)
at ReactCompositeComponentWrapper.performUpdateIfNecessary (ReactCompositeComponent.js:561)
at Object.performUpdateIfNecessary (ReactReconciler.js:157)
at runBatchedUpdates (ReactUpdates.js:150)
at ReactReconcileTransaction.perform (Transaction.js:140)
at ReactUpdatesFlushTransaction.perform (Transaction.js:140)
at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)
at Object.flushBatchedUpdates (ReactUpdates.js:172)
at ReactDefaultBatchingStrategyTransaction.closeAll (Transaction.js:206)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:153)
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
at Object.batchedUpdates (ReactUpdates.js:97)
at dispatchEvent (ReactEventListener.js:147)

thanks :)

I want to update react and react-dom for having hooks benefits.

I want to hide days before and after current month to be hide

سلام وقت شما بخیر
کد های css روی تقویم اعمال نمی شوند.
ممنون میشم کمکم کنید.

hello again
i'm trying to change year section design to make it editable and users can type year that they want
can you help me to do this
thanks

There seems to be some issue with loading css modules. I'm importing react-persian-datepicker as follows:

import { DatePicker } from 'react-persian-datepicker';

and I'm using <DatePicker/> is my component.
I'm also using css-loader and style-loader as stated in the docs:

Note that you need css-loader for /.css$/ files enabled to have the styles working as we use css modules to put classnames in place.

my webpack config module section:

{
  test: /\.css$/,
  exclude: /node_modules/,
  loader: 'style-loader!css-loader?modules&importLoaders=1',
},
{
  test: /\.css$/,
  include: /node_modules/,
  loader: 'style-loader!css-loader',
},

Any idea how to fix this?

When you open date picker in mobile virtual keyboard will be open too and its annoying

Hi

Right now in a form with multiple inputs, pressing tab button wont move focus to the next input, because in on blur function of DatePicker component, if the picker menu is open, the focus is manually brought back to date picker.

I think the better approach would be to close the picker menu and let go of the focus.

What do you think?

I believe It's better to use plain css / inline in order to not cause problems with project not offering css modules.

In a form with multiple controls when I quickly switch between controls with Tab, datepicker disappears!

I just found this repo and tested both on my client and codesandbox. it doesn't look like what is on demo and I couldn't find a version of the project to work for me. am I the only one having this issue here?

i use webpack 3.4.1 : (configuration file)

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var pkg = require('./package.json');

// bundle dependencies in separate vendor bundle
var vendorPackages = Object.keys(pkg.dependencies).filter(function (el) {
    return el.indexOf('font') === -1; // exclude font packages from vendor bundle
});

/*
 * Default webpack configuration for development
 */
var config = {
    devtool: 'eval-source-map',
    cache: true,
    entry: {
        main: path.join(__dirname, "app", "App.js"),
        vendor: vendorPackages
    },
    output: {
        path: path.join(__dirname, "wwwroot", "js"),        //Note: For ASP.NET Core we need to put the output in wwwroot/js
        //in production mode make files have a .min.js ending - stops gulp's min:js concating them
        filename: process.env.NODE_ENV === 'production' ? '[name].min.js' : '[name].js',
        sourceMapFilename: '[file].map'
    },
    resolve: {
        extensions: ['.ts', '.js', '.json'],
        modules: [__dirname, 'node_modules']
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: true
        }),
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js' }),
        new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
    ],
    resolveLoader: {
        modules: ["node_modules"],
        extensions: [".js", ".json"],
        mainFields: ["loader", "main"]
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts)$/,
                exclude: /node_modules/,/*(node_modules|bower_components)*/
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["es2015", "react"]
                    }
                }
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,/*(node_modules|bower_components)*/
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'autoprefixer-loader'
                ]
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,/*(node_modules|bower_components)*/
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'autoprefixer-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|jpg|ttf|eot)$/,
                /*exclude: /node_modules/,/*(node_modules|bower_components)*/
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 100000
                    }
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

/*
 * If bundling for production, optimize output
 */
if (process.env.NODE_ENV === 'production') {
    config.devtool = false;

    config.plugins = [
        //new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            beautify: false,
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            },
            comments: false,
            compress: { warnings: false, screw_ie8: true }
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ];
}

module.exports = config;

when i run cmd : dev-watch
webpack getback this error :

ERROR in ./node_modules/react-persian-datepicker/lib/styles/basic.css
Module parse failed: H:\GitLab\src\Sample\node_modules\react-persian-datepicker\lib\styles\basic.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .calendarContainer {
|   border-radius: 3px;
|   box-shadow: 0 3px 10px #dbdbdb;
 @ ./node_modules/react-persian-datepicker/lib/components/Calendar.js 255:10-40
 @ ./node_modules/react-persian-datepicker/lib/index.js

i changed webpack config loaders ( css ) to this codes :

test: /\.css$/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'autoprefixer-loader'
                ]

and webpack complie without any error
but don't show style for datepicker like this photo:

I'm using this npm in my project. this is error which I see:
./~/react-persian-datepicker/lib/components/Calendar.js
Module not found: Can't resolve 'moment-jalali' in '/var/www/html/react-project/node_modules/react-persian-datepicker/lib/components'

The code below will cause state change loop although it's regular in React community (Ex. material-ui components)

onChange(value) {
  this.setState({dateValue: value});
}

render() {
  return <DatePicker value={@state.dateValue} onChange={this.onChange.bind(this)} />
}

hi,
i wanna set a default value, when component mounted
like this :

<DatePicker
      calendarStyles={styles}
      onChange={onchangeHandler}
      closeOnSelect
      value={"1402/5/30"}
/>

Looks like user should click somewhere out to hide the datepicker, it would be great if it could be set via a property, like closeOnSelect on DatePicker component and default value set to false

Hi.
How to use the basic.css file outside the node_modules folder ?

DatePicker's calendarContainerProps does not update Calendar props.

It was so hard to config datepicker without a good document.
if you want to add your css module to DatePicker you need to pass your object to calendarStyles prop. (I figured out this by reading source files of DatePicker component!)

in last part of documentation you mentioned that "the only thing that you will need to do is to require the css file that you made and pass it as styles prop to either Calendar or DatePicker". but it's wrong for DatePicker.

by the way thanks evands developers for this persian datepicker. It was harder for me to develop a persian date picker from scratch.

I think the only thing this date picker needs is a good document.

Hi
I have a sign-up process that user choose birthday and it's fine
but I want to use DataPicker in edit menu of user that sign-up
how can I show the previous value of birthday and then change it?
thank for your help

how to get value in this datepicker?

class FormDataTime extends FormElement {
        constructor(props) {
          super(props);

  getValue() {
    return ???
  }

  render() {
    return (<DatePicker/> )
  }
}

i pleased to see some persian components for react on internet
i found many many react persian date time pickers in http://wwww.github.com
unfortunetly non of them works like human.
i begging developers download your code in an other computer and test your codes on github before publishing.

Is there going to be support for react version 17 ?

I've a problem, my DatePicker component works good, but the Calendar component inside doesn't get the right className, which I suppose it should be "calendarContainer".. Any idea?
Thanks alot.

its a new issue

میخوام از این کامپوننت در فذم جستجو استفاده کنم که از تاریخ تا فلان تاریخ
چطور میکنم به اینپوت هائی که ساخته شده نام اختصاص بدم
مثلا date_from, date_to

Thank you for ur great package :)
Please provide some more details document. for example how we should init 'selectedDay' property in calendar and other props

hi
This is excellent.
how can use it in asp ?
because input tag not customizable.
actually use tetxtboxfor instead input tag with custom css class.
and why for use "Date Picker Input" we must use

HI MO :
HI can you port this great datepicker to Metero.js ? :) Meteor.js can really use this ..