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

Fix for 1. Date resets to current date 2. Set 0 for Hour & minute #36

Open
wants to merge 30 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
0e26d5d
Bug Fix for setting hour and minutes as 0
subramaniam-s17 Nov 21, 2016
d103818
Date resets while setting time
subramaniam-s17 Nov 21, 2016
ffef861
Fixing future-only date selection feature
subramaniam-s17 Nov 21, 2016
94ee01b
updating readme file with updated index file
subramaniam-s17 Nov 21, 2016
151914d
Implementing Date Range selection feature
subramaniam-s17 Nov 22, 2016
c314439
Handling start date & end date individually for better options
subramaniam-s17 Nov 23, 2016
6478942
Bug fix: Pre selected time resets to default time
subramaniam-s17 Nov 23, 2016
ffc2813
Updating documentation for v0.2.0
subramaniam-s17 Nov 23, 2016
95d0ecf
fixing package.json typo
subramaniam-s17 Nov 23, 2016
e609879
Example layout fix
subramaniam-s17 Nov 23, 2016
2bd0f20
Updating minified js
subramaniam-s17 Nov 23, 2016
e3f9329
updating version with name for making a differentiation with parent p…
subramaniam-s17 Nov 23, 2016
f49b902
Updating readme file
subramaniam-s17 Nov 23, 2016
cb28df3
updating package name
subramaniam-s17 Nov 23, 2016
d84eeea
Updating minified lib file name to v2
subramaniam-s17 Nov 23, 2016
144730c
reverting back to old lib file name
subramaniam-s17 Nov 23, 2016
ae2b550
Adding onchange call back functionality
subramaniam-s17 Dec 8, 2016
28872d0
Bug fix: callback implementation for cleaning up data as well
subramaniam-s17 Dec 8, 2016
7c2cbdc
"-" replaced with "/" for compatibility with mozilla
mewdew Dec 12, 2016
d47a3b8
"-" replaced with "/" for compatibility with firefox
mewdew Dec 13, 2016
205dbbc
.idea deleted
mewdew Dec 13, 2016
c681e63
deleting workspace.xml
mewdew Dec 13, 2016
982cb34
Hour and Minute input alignment fixed
mewdew Dec 13, 2016
9dd27f6
Hour and minute input alignment fixed
mewdew Dec 13, 2016
157f897
Updating minified file
subramaniam-s17 Jan 1, 2017
9579eec
fixing Calender layout dropdown logic based on window height
subramaniam-s17 Jan 2, 2017
e533413
Implementing appending popup under input box instead of appending un …
subramaniam-s17 Jan 2, 2017
02bd551
1 Replaced element.remove() with element.parentElement.removeChild be…
Jan 25, 2017
fb5044e
Merge pull request #1 from urkaver/master
subramaniam-s17 Jan 26, 2017
6fcdbde
Releasing v0.2.2 with IE fixes
subramaniam-s17 Jan 26, 2017
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
41 changes: 41 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,44 @@ build/Release
# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules

# Folders
target/
.settings/
node_modules/

# Java class files
*.class
*.com
*.dll
*.exe
*.o
*.so

# Package Files #
*.7z
*.dmg
*.gz
*.iso
*.jar
*.war
*.ear
*.rar
*.tar

# Logs and databases #
######################
*.log
*.sqlite

# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
hs_err_pid*

# Eclipse Files
.classpath
.project

# Intellij Files
.idea
*.iml

777 changes: 777 additions & 0 deletions .idea/workspace.xml

Large diffs are not rendered by default.

34 changes: 24 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
Simple DateTime Picker For AngularJS
===================================
Simple Date / DateTime Picker For AngularJS
===========================================

No JQuery, No Bootstrap, Just AngularJS (ver. 1.3+)
No JQuery, No Bootstrap, Just AngularJS (ver. 1.4+)

[DEMO](https://rawgit.com/kineticsocial/angularjs-datetime-picker/master/index.html)
[![Imgur](http://i.imgur.com/UJfYMN6.png?1)](https://rawgit.com/kineticsocial/angularjs-datetime-picker/master/index.html)
[DEMO](https://rawgit.com/mani-s17/angularjs-datetime-picker/master/index.html)
[![Imgur](http://i.imgur.com/UJfYMN6.png?1)](https://rawgit.com/mani-s17/angularjs-datetime-picker/master/index.html)

To Get Started
--------------

For Bower users,
For npm users,

`$ bower install angularjs-datetime-picker`
`$ npm i angularjs-datetime-picker-v0.2.0`

1. Include `angularjs-datetime-picker.js` and `angularjs-datetime-picker.css`

Expand All @@ -32,19 +32,30 @@ Attributes
- date-format: optional, date format e.g. 'yyyy-MM-dd'
- year: optional, year selected, e.g. 2015
- month: optional, month selected, e.g. 5
- day: optiona, day selected, e.g. 31
- day: optional, day selected, e.g. 31
- hour: optional, hour selected, 23
- minute: optional, minute selected, 59
- date-only: optional, if set, timepicker will be hidden
- future-only: optional, if set, forces validation errors on dates earlier than now
- future-only: optional, if set, Date which is older than today's Date will be not be selectable (Past time for same date is not handled)
- start-date optional, if set, date which is on or after start-date will be selectable
- end-date optional, if set, date which is on or before end-date will be selectable
- start-date & end-date: optional, if set, date which is in between the range will only be selectable
Note:
future-only tag has more precedence than start-date & end-date tags

Examples
--------

<input ng-model="date1" datetime-picker date-only />
<input ng-model="date0" datetime-picker date-only />

<input ng-model="date1" datetime-picker date-only future-only />

<input ng-model="date6" datetime-picker start-date="11-20-2016" size="30" />

<input ng-model="date6" datetime-picker end-date="02-25-2017" size="30" />

<input ng-model="date6" datetime-picker start-date="11-20-2016" end-date="02-25-2017" size="30" />

<input ng-model="date2" datetime-picker date-format="yyyy-MM-dd" date-only />

<input ng-model="date3" datetime-picker date-format="yyyy-MM-dd HH:mm:ss" />
Expand All @@ -53,3 +64,6 @@ Examples

<input ng-model="date5" datetime-picker date-format="yyyy-MM-dd HH:mm:ss" year="2014" month="12" day="31" />


This project has been forked from [KineticSocial-angularjs-datetime-picker](https://github.com/kineticsocial/angularjs-datetime-picker) an inactive project.
We are actively working on this project to enhance & fix issues.
9 changes: 4 additions & 5 deletions angularjs-datetime-picker.css
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,14 @@
right: 10px;
}
.angularjs-datetime-picker > .adp-days {
width: 210px; /* 30 x 7 */
margin: 10px;
padding: 10px;
text-align: center;
}
.angularjs-datetime-picker > .adp-days > .adp-day-of-week, .angularjs-datetime-picker > .adp-days > .adp-day {
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid transparent;
width: 30px;
width: 14%;
line-height: 28px;
float: left;
}
Expand Down Expand Up @@ -70,5 +69,5 @@
}

.angularjs-datetime-picker input[type=range] {
width: 150px;
}
width: 100%;
}
85 changes: 63 additions & 22 deletions angularjs-datetime-picker.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
var datetimePickerEl;
var _this = this;
var removeEl = function(el) {
el && el.remove();
el && el.parentElement.removeChild(el);
$document[0].body.removeEventListener('click', _this.closeDatetimePicker);
};

Expand All @@ -51,6 +51,12 @@
if (options.dateOnly === '' || options.dateOnly === true) {
div.attr('date-only', 'true');
}
if (options.futureOnly === '' || options.futureOnly === true) {
div.attr('future-only', 'true');
} else {
options.startDate && div.attr('start-date', options.startDate);
options.endDate && div.attr('end-date', options.endDate);
}
if (options.closeOnSelect === 'false') {
div.attr('close-on-select', 'false');
}
Expand All @@ -61,26 +67,25 @@
datetimePickerEl.triggerEl = options.triggerEl;

$document[0].body.appendChild(datetimePickerEl);

//show datetimePicker below triggerEl
var bcr = triggerEl.getBoundingClientRect();

/*angular.element(triggerEl).after(datetimePickerEl);*/

options.scope.$apply();

//show datetimePicker below triggerEl with respect to window size
// comment below code to add popup with input and un comment above code
var bcr = triggerEl.getBoundingClientRect();
var datePickerElBcr = datetimePickerEl.getBoundingClientRect();

datetimePickerEl.style.position='absolute';
if(bcr.width > datePickerElBcr.width){
datetimePickerEl.style.left= (bcr.left + bcr.width - datePickerElBcr.width + window.scrollX) + 'px';
datetimePickerEl.style.left= (bcr.left + bcr.width - datePickerElBcr.width + window.pageXOffset) + 'px';
} else {
datetimePickerEl.style.left= (bcr.left + window.scrollX) + 'px';
datetimePickerEl.style.left= (bcr.left + window.pageXOffset) + 'px';
}

if (bcr.top < 300 || window.innerHeight - bcr.bottom > 300) {
datetimePickerEl.style.top = (bcr.bottom + window.scrollY) + 'px';
datetimePickerEl.style.top = (bcr.bottom + window.pageYOffset) + 'px';
} else {
datetimePickerEl.style.top = (bcr.top - datePickerElBcr.height + window.scrollY) + 'px';
datetimePickerEl.style.top = (bcr.top - datePickerElBcr.height + window.pageYOffset) + 'px';
}

$document[0].body.addEventListener('click', this.closeDatetimePicker);
Expand Down Expand Up @@ -115,9 +120,10 @@
' <div class="adp-days" ng-click="setDate($event)">',
' <div class="adp-day-of-week" ng-repeat="dayOfWeek in ::daysOfWeek" title="{{dayOfWeek.fullName}}">{{::dayOfWeek.firstLetter}}</div>',
' <div class="adp-day" ng-show="mv.leadingDays.length < 7" ng-repeat="day in mv.leadingDays">{{::day}}</div>',
' <div class="adp-day selectable" ng-repeat="day in mv.days" ',
' <div class="adp-day" ng-repeat="day in mv.days" ',
' today="{{today}}" d2="{{mv.year + \'-\' + (mv.month + 1) + \'-\' + day}}"',
' ng-class="{',
' selectable: isDateSelectable(day, mv.month, mv.year),',
' selected: (day == selectedDay),',
' today: (today == (mv.year + \'-\' + (mv.month + 1) + \'-\' + day)),',
' weekend: (mv.leadingDays.length + day)%7 == 1 || (mv.leadingDays.length + day)%7 == 0',
Expand All @@ -127,9 +133,9 @@
' <div class="adp-day" ng-show="mv.trailingDays.length < 7" ng-repeat="day in mv.trailingDays">{{::day}}</div>',
' </div>',
' <div class="adp-days" id="adp-time"> ',
' <label class="timeLabel">Time:</label> <span class="timeValue">{{("0"+inputHour).slice(-2)}} : {{("0"+inputMinute).slice(-2)}}</span><br/>',
' <label class="hourLabel">Hour:</label> <input class="hourInput" type="range" min="0" max="23" ng-model="inputHour" ng-change="updateNgModel()" />',
' <label class="minutesLabel">Min:</label> <input class="minutesInput" type="range" min="0" max="59" ng-model="inputMinute" ng-change="updateNgModel()"/> ',
' <span class="timeLabel">Time:</span> <span class="timeValue">{{("0"+inputHour).slice(-2)}} : {{("0"+inputMinute).slice(-2)}}</span><br/>',
' <span class="hourLabel">Hour:</span> <input class="hourInput" type="range" min="0" max="23" ng-model="inputHour" ng-change="updateNgModel(selectedDay)" />',
' <span class="minutesLabel">Min:</span> <input class="minutesInput" type="range" min="0" max="59" ng-model="inputMinute" ng-change="updateNgModel(selectedDay)"/> ',
' </div> ',
'</div>'].join("\n");

Expand Down Expand Up @@ -226,26 +232,55 @@
}
}

var today = new Date();
if (!scope.selectedDate || isNaN(scope.selectedDate.getTime())) { // no predefined date
var today = new Date();
var year = scope.year || today.getFullYear();
var month = scope.month ? (scope.month-1) : today.getMonth();
var day = scope.day || today.getDate();
var hour = scope.hour || today.getHours();
var minute = scope.minute || today.getMinutes();
var hour = scope.hour || scope.hour === 0 ? scope.hour : today.getHours();
var minute = scope.minute || scope.minute === 0 ? scope.minute : today.getMinutes();
scope.selectedDate = new Date(year, month, day, hour, minute, 0);
}
scope.inputHour = scope.selectedDate.getHours();
scope.inputMinute = scope.selectedDate.getMinutes();

// Default to current year and month
var elScope = ctrl.triggerEl.scope();
var preSelectedDate = dateFilter(elScope.$eval(attrs.ngModel), dateFormat);
scope.selectedDate = preSelectedDate ? new Date(preSelectedDate) : scope.selectedDate;
scope.inputHour = preSelectedDate ? new Date(preSelectedDate).getHours() : scope.selectedDate.getHours();
scope.inputMinute = preSelectedDate ? new Date(preSelectedDate).getMinutes() : scope.selectedDate.getMinutes();
scope.mv = getMonthView(scope.selectedDate.getFullYear(), scope.selectedDate.getMonth());
scope.today = dateFilter(new Date(), 'yyyy-M-d');
scope.today = dateFilter(today, 'yyyy-M-d');
if (scope.mv.year == scope.selectedDate.getFullYear() && scope.mv.month == scope.selectedDate.getMonth()) {
scope.selectedDay = scope.selectedDate.getDate();
} else {
scope.selectedDay = null;
}

scope.isDateSelectable = function (day, month, year) {
var someday = new Date((month+1) + '/' + day + '/' + year);
someday.setHours(0,0,0,0);
if (attrs.futureOnly) {
var today = new Date();
today.setHours(0,0,0,0);
return someday >= today;
} else if (!isNaN(Date.parse(attrs.startDate)) && !isNaN(Date.parse(attrs.endDate))) {
var startDate = new Date(attrs.startDate);
var endDate = new Date(attrs.endDate);
startDate.setHours(0,0,0,0);
endDate.setHours(0,0,0,0);
return startDate <= someday && someday <= endDate;
} else if (!isNaN(Date.parse(attrs.startDate)) && isNaN(Date.parse(attrs.endDate))) {
var startDate = new Date(attrs.startDate);
startDate.setHours(0,0,0,0);
return startDate <= someday;
} else if (isNaN(Date.parse(attrs.startDate)) && !isNaN(Date.parse(attrs.endDate))) {
var endDate = new Date(attrs.endDate);
endDate.setHours(0,0,0,0);
return someday <= endDate;
} else {
return true;
}
};
});

scope.addMonth = function (amount) {
Expand Down Expand Up @@ -310,7 +345,9 @@
link: function(scope, element, attrs, ctrl) {
// Attach validation watcher
scope.$watch(attrs.ngModel, function(value) {
if( !value || value == '' ){
var callback = element.scope().$eval(attrs.onChangeCallback);
if( !value || value == '' ) {
callback && typeof callback === 'function' && callback();
return;
}
// The value has already been cleaned by the above code
Expand All @@ -320,6 +357,7 @@
if( attrs.hasOwnProperty('futureOnly') ){
ctrl.$setValidity('future-only', date < now? false : true);
}
callback && typeof callback === 'function' && callback();
});

element[0].addEventListener('click', function() {
Expand All @@ -334,7 +372,10 @@
minute: attrs.minute,
dateOnly: attrs.dateOnly,
futureOnly: attrs.futureOnly,
closeOnSelect: attrs.closeOnSelect
startDate: attrs.startDate,
endDate: attrs.endDate,
closeOnSelect: attrs.closeOnSelect,
onChangeCallback: attrs.onChangeCallback
});
});
}
Expand Down
Loading