najlepsiwebdesigner / foundation-datepicker Goto Github PK
View Code? Open in Web Editor NEWFoundation datepicker jQuery plugin
Home Page: http://foundation-datepicker.peterbeno.com
License: Apache License 2.0
Foundation datepicker jQuery plugin
Home Page: http://foundation-datepicker.peterbeno.com
License: Apache License 2.0
Hello,
when user selects a date it correctly fires 'changeDate' event but when the user clears the field it doesn't fire the same event so I'm not able to know that previously selected date was cleared
I have this in my javascript:
$(function(){
$('.datepicker').fdatetimepicker({
format: 'mm-dd-yyyy'
});
});
However after I select a day in the calendar, it asks me to select an hour. How do I stop this behaviour?
You can see a live version of this here: http://monitor.zanview.com/ (Click login)
Your documentation doesn't seem to mention that the module only works on <input type="text"/>
fields. The natural choice for a date field would be <input type="date"/>
.
Currently there are no check that the field selected by default is disabled or not.
I'm seeing that the next and previous arrows are missing. On your demo site, the chevrons depend on font-awesome.css
. Does this plugin have an undocumented dependency on font-awesome?
I keep getting this error [ Uncaught TypeError: undefined is not a function ], and I am stuck with this for days now. Anyone have any idea?
Thanks!
Properties clearBtn and orientation doesn't work. No "Clear Button" shows up on datepicker after clearBtn:true has been used, and also orientation doesn't "take".
As of right now the only version you can pull down with bower is master. This is nice but for people using bower who would like to make sure the code does not change over time it would be nice if a version was tagged out.
There is something not correct that i have seen (i might be wrong...)
the options
minViewMode
viewMode
are not correct (in the documentation).
Did some debugging around them I could find that if i change viewMode
to
startView : 'year'
The datepicker start view starts working
But I am not able to figure out how to get the minviewmode
to work.
help in correct direction would be really appreciated...
Can it be done?
I'm new to the RoR world and ruby as well so what I might ask is stupid. What I want to do is to use the foundation-datepicker but I get
TypeError: $(...).fdatepicker is not a function
error and the calendar does not appear as it is obvious.
My application.js file has the following:
//= require jquery
//= require jquery_ujs
//= require foundation
//= require foundation-datetimepicker
//= require turbolinks
//= require_tree .
$(function(){ $ (document).foundation(); });
$(function(){ $ ('#user_birthday').fdatepicker(); });
and I have also added
@import 'foundation-datetimepicker';
in the foundation_and_overrides.scss file.
Is there any conflict that I don't get? Maybe with jquery?
Hi It seems that foundation datepicker is providing changing the year feature but it is very difficult for user to identify from where he/she can change the year.
So it seems that it is not user friendly interface. Instead there should be like following:
<< < March 2015 > >>
Where double << is for year change and < is for month change. So that navigation is easy for user.
Hi!
Could you please suggest how to remove properly datepicker? Is there any method for that?
Hi, first of all, thank you for this amazing plugin!
Second, I had run w3-validation(HTML5) are there seems to be a problem at the table template because the colspan is the same (we use the same template for days, months, years), BUT the actual column number is different when we browse through days, months, years.
I have already done the required changes. I don't know if it is worth doing it for anyone else, but my application is required to be W3-valid for HTML5.
How can I send you my patch ? Thanks!
Calender week calculated wrongly. This week, 2015-04-08 is week 15 but foundation datepicker says it is 14.
Can be corretced with this code starting on line 406 in foundation-datepicker.js:
while(prevMonth.valueOf() < nextMonth) {
if (prevMonth.getUTCDay() == this.weekStart) {
html.push('<tr>');
if(this.calendarWeeks){
// ISO 8601: First week contains first thursday.
// ISO also states week starts on Monday, but we can be more abstract here.
var
// Start of current week: based on weekstart/current date
ws = new Date(+prevMonth + (this.weekStart - prevMonth.getUTCDay() - 7) % 7 * 864e5),
// Thursday of this week
th = new Date(Number(ws) + (7 + 4 - ws.getUTCDay()) % 7 * 864e5),
// First Thursday of year, year from thursday
yth = new Date(Number(yth = UTCDate(th.getUTCFullYear(), 0, 1)) + (7 + 4 - yth.getUTCDay())%7*864e5),
// Calendar week: ms between thursdays, div ms per day, div 7 days
calWeek = (th - yth) / 864e5 / 7 + 1;
html.push('<td class="cw">'+ calWeek +'</td>');
}
}
Hi,
thank you for foundation calendar.
I tried to do Czech localization but did not find the "parameter" solution.
Here is the czech localization:
cz: {
days: ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota", "Neděle"],
daysShort: ["Ne", "Po", "Út", "St", "Čt", "Pá", "So", "Ne"],
daysMin: ["Ne", "Po", "Út", "St", "Čt", "Pá", "So", "Ne"],
months: ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"],
monthsShort: ["Led", "Úno", "Bře", "Dub", "Kvě", "Čer", "Čnc", "Srp", "Zář", "Říj", "Lis", "Pro"],
today: "Dnes"
}
I got I18N working like this:
$('#EventStart, #EventEnd').fdatetimepicker({
format: 'dd/mm/yyyy hh:ii',
weekStart: 1,
language: 'nl'
});
Then I included the language file:
<script src="js/vendor/foundation-datetimepicker/js/locales/bootstrap-datetimepicker.nl.js"></script>
In the file I had to rename
$.fn.datetimepicker.dates['nl']
to
$.fn.fdatetimepicker.dates['nl']
If I click input twice, the datepicker is hide. But then click again input, the datepicker dont show until click outside from input then click again input.
Hi, I wonder how I can disable minutes in the datetimepicker?
This plugin is awesome. And I am using it.
I can't find any instruction of installing it via Bower in github-repo/demo page.
It will be great to have it documented.
When field is clicked calendar popup is shown at the bottom of the page instead of docking to input field. I'm using foundation 4 and tried also yours datetime picker that works absolutely fine.
code is preemptively simple:
<code>
<script src="javascripts/foundation-datepicker.js"></script>
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/foundation-datepicker.css">
<link rel="stylesheet" href="stylesheets/datepicker.css"> <!-- renamed example.css -->
.....
<input type="text" class="datepicker span2" id="CheckIn" value="21/02/2013" />
.....
<script>
$(function(){
$('#CheckIn').fdatepicker({
format: 'dd/mm/yyyy'
});
});
</script>
</code>
no any errors in firebug
Linux - Chromium
I have a text field for the date picker on my form. I was seeing what happens when I manually enter a large year and I found out that I get an infinite loop after adding a year with six 9's. There is no issue with your script disabled. I can't figure out what is causing the loop.
Any plans to support Zepto?
Or is the focus to porting the bootstrap plugin?
Tried the two examples at http://foundation-datepicker.peterbeno.com/example/example.html
The initial display when click on the two examples are different from http://www.eyecon.ro/bootstrap-datepicker/
Thanks.
When constructing fdatepicker with startDate & endDate keys, the days outside of the range are properly greyed out. However the months in the month view (Jan - Dec) outside of the range are not greyed out. They are correctly unselectable, just not greyed out which is confusing. The same holds for the years in the year view.
Hi, I don't have datepicker working on Chrome on my Nexus 5 Android device. Is it inherently not supported on mobile browsers, or did I miss something?
It's working flawlessly on my desktop browsers.
It seems that there is no support for changing year in foundation date-picker.
This is basic functionality and it should be present. It is really irritating for user to go from current month to next 3 to 4 years.
Just a little thing on your docs page: you mention 'yyy' as an option when you really mean 'yyyy'.
Has anyone used this with Foundation 5? I'm getting weird CSS behaviour on the datepicker inputs on my forms
Hi, thanks for setting up this project - very useful.
I've noticed that the disabled elements aren't styled though, which is very confusing when used in conjunction with the startDate and endDate options!
The addition of:
.datepicker.dropdown-menu .disabled { color:#999 }
solves it for me
Hi there,
After so long, I get the following error on the page:
Uncaught TypeError: Cannot call method 'parents' of undefined foundation-datepicker.js:323
Datepicker.place foundation-datepicker.js:323
jQuery.event.dispatch jquery-1.9.1.js:12670
elemData.handle jquery-1.9.1.js:1234
I have tried to upload jQuery from 1.6.4 and use the uncompressed version of jQuery but still no joy. It works fine when I use this in development but when I push it out to development I get this error. Any ideas?
Edit:
Perhaps it is worth noting I am using KnockoutJS along side this as well.
Hi,
Can you suggest a way to use this with AngularJS?
Thanks,
Yoram
Dates that have been disabled can still be selected by using the keyboard navigation options and selecting them.
Which makes theming it annoying :(
Hi -
I'm trying to figure out how I can disable specific dates in the calendar and not just past dates. I want to be able to block out dates that are already booked based on an array of dates I return. The looping part I'm not having a problem with but just disabling a specific date I"m struggling with.
Thanks,
Jim
If you were to plugin 33-45-21 or any other random string like that into the input then it will cause it to crash if you attempt to reinitialize the date picker.
I have textbox with a large-ish margin at the bottom, and the dropdown doesn't open flush again it, but rather with a gap in the middle. Is there an instance where this would be the intended behaviour, or would it be better to always ignore the bottom margin?
I've modified the code to suit my needs:
place: function(){
if(this.isInline) return;
var zIndex = parseInt(this.element.parents().filter(function() {
return $(this).css('z-index') != 'auto';
}).first().css('z-index'))+10;
var textbox = this.component ? this.component : this.element;
var offset = textbox.offset();
var height = textbox.outerHeight() + parseInt(textbox.css('margin-top'));
this.picker.css({
top: offset.top + height,
left: offset.left,
zIndex: zIndex
});
},
Hey man, please update your website with the new method 'update' for setting date on fdatepickers (it's still 'setValue' on the website).
Thanks!
Hi All
How can i make the calendar start from the current date and disable the past days?
Many thanks in advance
using foundation 4, causing the daypicker to look messy, just like this
the colspan seems not working. but after some research, the problem is, the class that is used in the picker (switch) is conflicting with a new class from foundation 4 (http://foundation.zurb.com/docs/components/switch.html)
i don't know what is the best solution. currently, i just rename the class from "switch" to other "safe" name.
Great job! Wondering if you have any pointers on how to use this repo for a standalone calendar that appears w/o input boxes.
Mark
But if I click on the area around the 'x' the calendar is closed.
Hi,
Can you please modify your bower.json file to include the stylesheet. It dissapears when we try to do a build.
"main": ["js/foundation-datepicker.js","stylesheets/foundation-datepicker.css"],
Thanks!
ps this is on version 1.0.0
When the input field that triggers the datepicker is sitting at the bottom of the page, datepicker is opening outside the browser window, forcing the user to scroll down the page to see it. Is there a way to make datepicker to open inside the viewable browser window, ie: above the element?
On the example page it states that the starting view mode it specified using "viewMode" within the options. Having looked at the code, I think the option that should be set is actually called "startView", so I think the example page need to be corrected? You could also mention that it can be set using the "date-start-view" attribute on the element itself.
in the normal jquery datepicker i just do
which does not work here.
Any help?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.