Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

open or close in tab key not working #26

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
node_modules
.DS_Store
.idea/
package-lock.json
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
The MIT License (MIT)

Copyright (c) 2015 Rémi Chanaud
Copyright (c) 2016 Ali Ghanavatian

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand All @@ -19,4 +20,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

75 changes: 75 additions & 0 deletions README.fa.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
ng-flat-jalaali-datepicker
===

یک دایرکتیو دیت پیکر جلالی ساده برای انگولار که از مومنت.جی اس استفاده می‌کند

![ng-flat-jalaali-datepicker screenshot](http://s7.picofile.com/file/8252672284/taghvim.png)

## پیش‌نمایش

[پیش‌نمایشی ببینید](http://thg303.github.io/jalaali-datepicker-demo/)

## امکانات
* فرمت تاریخ قابل سفارشی سازی خروجی به صورت متن یا ابجکت تاریخ جاوا اسکریپت
* قابلیت محدود کردن کمترین تاریخ قابل انتخاب و بیشترین تاریخ قابل انتخاب
* امکان فعال/غیرفعال کردن تاریخی در آینده
* انتخاب سریع ماه و سال
* قابلیت ارائه تاریخ انتخاب شده بر مبنای میلادی و جلالی بصورت همزمان

## پیش‌نیازها
* Angularjs >=1.2
* Moment.js
* Moment-jalaali.js >=0.4.0

## نصب

1. `npm install --save ng-flat-jalaali-datepicker`
2. متصل کردن فایل `/dist/ng-flat-jalaali-datepicker.js` و `/dist/ng-flat-jalaali-datepicker.css`
3. اضافه کردن ماجول `'ngFlatjalaaliDatepicker'` بعنوان دپندنسی به ماجول انگولار مورد نظر


## نحوه استفاده

این دایرکتیو فقط به صورت اتریبیوت قابل استفاده است

```html
<input type="text" ng-model="date" ng-flat-jalaali-datepicker>
```

```html
<button ng-model="date" ng-flat-jalaali-datepicker>Pick a date</button>
```

## آپشن‌ها

### اتریبیوت‌ها:
* `datepicker-config`: **Object** - ابجکت پیکربندی
* `gregorian-formatted-picked-date`: **String** - تاریخ انتخاب شده به مبنای میلادی
* `gregorian-picked-date`: **Object** - تاریخ انتخاب شده به صورت یک شی moment.js
```html
<input type="text" ng-model="date" datepicker-config="yourCustomConf" gregorian-formatted-picked-date="gfdate" gregorian-picked-date="gdate" ng-flat-jalaali-datepicker>Pick a date</button>
picked date is {{gfdate}}
```

### خصوصیات قابل تعریف در شئ پیکربندی

* `dateFormat`: **String** - فرمت moment-jalaali.js تاریخی که در `ng-model`. اگر فرمتی تعریف نشود فرمت پیش فرض تاریخ جاوا اسکریپت در نظر گرفته می‌شود:
Eg:`'jDD/jMM/jYYYY'`

* `gregorianDateFormat`: **String** - فرمت نمایش تاریخ میلادی. اگر تعریف نشده باشد معادل همان `dateFormat` در نظر گرفته می‌شود
* `minDate`: **Object** - مشخص کننده کمترین تاریخ قابل انتخاب توسط کاربر. حتمن می‌بایست یک شئ moment.js باشد
* `dropDownYears`: **Number** - تعداد سال‌هایی که در لیست پایین افتادنی می‌بایست ظاهر شوند. مقدار پیش فرض ۱۰ عدد است
* `maxDate`: **Object** - مشخص کننده بیشترین تاریخ قابل انتخاب توسط کاربر. حتمن می‌بایست یک شئ moment.js باشد
* `allowFuture`: **Boolean** - اجازه انتخاب روزهای آینده (بعد از فردا) را ممکن می‌کند


## مشارکت
برای مشارکت در بهبود این کد پیش‌نیازهای لازم را نصب نموده و سپس دستور زیر را وارد نمایید.

`gulp watch`

## تقدیر و سپاس
* «رمی چاناود» بخاطر کد پروژه اصلی:
[RemiAWE](https://github.com/RemiAWE/ng-flat-datepicker)
* «بهرنگ نوروزی نیا» بخاطر پروژه تقویم جلالی بر مبنای مومنت:
[behrang](https://github.com/jalaali/moment-jalaali)
40 changes: 25 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
ng-flat-datepicker
ng-flat-jalaali-datepicker
===

Lightweight Angular.js datepicker directive built with Moment.js.
Lightweight Angular.js datepicker directive built with Moment.js for jalaali Calendar.

![ng-flat-datepicker screenshot](http://i.imgur.com/m9Aawf2.png)
![ng-flat-jalaali-datepicker screenshot](http://s7.picofile.com/file/8252672284/taghvim.png)

## Demo

[See demo](http://remiawe.github.io/ng-flat-datepicker/)
[See demo](http://thg303.github.io/jalaali-datepicker-demo/)

## Features
* Custom ng-model date format: custom string or js date
Expand All @@ -19,46 +19,56 @@ Lightweight Angular.js datepicker directive built with Moment.js.
## Requirements
* Angularjs >=1.2
* Moment.js
* Moment-jalaali.js >=0.4.0

## Installation

1. `npm install --save ng-flat-datepicker`
2. Link `/dist/ng-flat-datepicker.js`and `/dist/ng-flat-datepicker.css`
3. Add the module `'ngFlatDatepicker'` as dependency of your angular module.
1. `npm install --save ng-jalali-flat-datepicker`
2. Link `/dist/ng-flat-jalaali-datepicker.js`and `/dist/ng-flat-jalaali-datepicker.css`
3. Add the module `'ngJalaliFlatDatepicker'` as dependency of your angular module.

## Usage

This is an attribute only directive.

```html
<input type="text" ng-model="date" ng-flat-datepicker>
<input type="text" ng-model="date" ng-flat-jalaali-datepicker>
```

```html
<button ng-model="date" ng-flat-datepicker>Pick a date</button>
<button ng-model="date" ng-flat-jalaali-datepicker>Pick a date</button>
```

## Options

### Attributes:
* `datepicker-config`: **Object** - The datepicker's config object.

* `gregorian-formatted-picked-date`: **String** - The picked date in Gregorian calendar
* `gregorian-picked-date`: **Object** - The picked date in Gregorian calendar as a moment.js object
```html
<input type="text" ng-model="date" datepicker-config="yourCustomConf" ng-flat-datepicker>Pick a date</button>
<input type="text" ng-model="date" datepicker-config="yourCustomConf" gregorian-formatted-picked-date="gfdate" gregorian-picked-date="gdate" ng-flat-jalaali-datepicker>Pick a date</button>
picked date is {{gfdate}}
```

### Config object properties:

* `dateFormat`: **String** - The Moment.js format of the date in the `ng-model`. Fallback to js date Object if no format is given. Eg: `'DD/MM/YYYY'`.
* `dateFormat`: **String** - The Moment.js format of the date in the `ng-model`. Fallback to js date Object if no format is given. Eg: `'jDD/jMM/jYYYY'`.
* `gregorianDateFormat`: **String** - The string date format. if it's not present the `dateFormat` will be used instead.
* `minDate`: **Object** - The minimum selectable date. Must be a Moment Date Object.
* `dropDownYears`: **Number** - The number indicates how many years should appear in the year drop down list.
* `maxDate`: **Object** - The maximum selectable date. Must be a Moment Date Object.
* `allowFuture`: **Boolean** - Maximum selectable date is tomorrow

### Locale
Default locale is english but you can load any locale of your choice (Angular and Moment), the datepicker use the currents locales.
Default locale is Farsi/Persian but you can load any locale of your choice (Angular and Moment), the datepicker use the currents locales. for persian translation of this document see [README.fa.md] (README.fa.md)

## Contributions
Just install the dev dependencies and start a `gulp watch`
Just go to the project directory and:

1. Install the dev dependencies:
`npm install`
2. then start watch task: `gulp watch`

## Credits
Design: [YannickAWE](https://github.com/YannickAWE)
* Design: [YannickAWE](https://github.com/YannickAWE)
* moment-jalaali: [Behrang] (https://github.com/jalaali/moment-jalaali)
35 changes: 21 additions & 14 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,40 @@
<html>
<head>
<meta charset="utf-8">
<title>Ng-flat-datepicker demo</title>
<title>ng-jalaali-flat-datepicker demo</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../dist/ng-flat-datepicker.css">
<link rel="stylesheet" href="../dist/ng-jalaali-flat-datepicker.min.css">
<style>
* { font-family: 'Open Sans'; }
* { font-family: 'tahoma'; direction: rtl;}
</style>
</head>
<body ng-app="testApp" ng-strict-di>

<div ng-controller="mainController">

<h1>Ng datepicker demo</h1>
<h1>نمایش دیت پیکر برای تقویم جلالی </h1>

<input type="text" name="date" ng-flat-datepicker datepicker-config="datepickerConfig" ng-model="date">
or
<button ng-flat-datepicker ng-model="date2" type="button" name="button">Pick a date</button>
<input type="text" name="date" ng-jalaali-flat-datepicker datepicker-config="datepickerConfig" gregorian-formatted-picked-date="gfdate" gregorian-picked-date="gdate" ng-model="date">
یا
<button ng-jalaali-flat-datepicker ng-model="date2" type="button" name="button">تاریخی انتخاب کنید</button>

<p>Ng-model input: {{ date | json }}</p>
<p>Ng-model button: {{ date2 | json }}</p>
<p>مقادیر حاصل از فیلد متنی
<ul ng-show="gdate">
<li> {{ date | json }} </li>
<li> {{ gdate | json }} </li>
<li> {{ gfdate }} </li>
</ul>
</p>
<p>حاصل انتخاب تاریخ با دکمه:
<ul ng-show="date2">
<li>{{ date2 | json }}</li>
</ul>
</p>
</div>

<!-- JS -->
<script src="../node_modules/moment/moment.js"></script>
<!-- <script src="../node_modules/moment/locale/fr.js"></script> -->
<script src="../node_modules/angular/angular.js"></script>

<script src="../dist/ng-flat-datepicker.js"></script>
<script src="../dist/prerequisities.min.js"></script>
<script src="../dist/ng-jalaali-flat-datepicker.min.js"></script>

<script src="js/app.js"></script>
</body>
Expand Down
6 changes: 4 additions & 2 deletions demo/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,16 @@
* Test code for ng-datepicker demo
*/
angular
.module('testApp', ['ngFlatDatepicker'])
.module('testApp', ['ngJalaaliFlatDatepicker'])
.controller('mainController', ['$scope', mainController]);

function mainController ($scope) {

$scope.datepickerConfig = {
allowFuture: false,
dateFormat: 'DD/MM/YYYY'
dateFormat: 'jYYYY/jMM/jDD',
gregorianDateFormat: 'YYYY/DD/MM',
minDate: moment.utc('2008', 'YYYY')
};
}

Expand Down
Loading