najlepsiwebdesigner / foundation-datepicker Goto Github PK

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.

Hey man, please update your website with the new method 'update' for setting date on fdatepickers (it's still 'setValue' on the website).

Thanks!

Currently there are no check that the field selected by default is disabled or not.

Hi!

Could you please suggest how to remove properly datepicker? Is there any method for that?

Hi All
How can i make the calendar start from the current date and disable the past days?

Many thanks in advance

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

When bringing up the date picker, it shows up under the active tab as shown in these screenshots:

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...

Has anyone used this with Foundation 5? I'm getting weird CSS behaviour on the datepicker inputs on my forms

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"/>.

in the normal jquery datepicker i just do
$.datepicker.setDefaults( $.datepicker.regional[ "de" ] );

which does not work here.
Any help?

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.

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.

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.

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.

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"
}

Can it be done?

Hi,
Can you suggest a way to use this with AngularJS?
Thanks,
Yoram

Just a little thing on your docs page: you mention 'yyy' as an option when you really mean 'yyyy'.

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.

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

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".

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']

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.

Dates that have been disabled can still be selected by using the keyboard navigation options and selecting them.

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.

Any plans to support Zepto?

Or is the focus to porting the bootstrap plugin?

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?

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.

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.

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!

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?

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)

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>');
                }
            }

But if I click on the area around the 'x' the calendar is closed.

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?

• concerns at least FF 24.0 and IE 10
• date constructor returns invalid date obj when trying to pass a date obj with year <= 99 (http://jsfiddle.net/kFLU5/1/)

There's a gap between the datepicker and the input. I've check the DOM and there's no style in the input. The problem should be on JS file.

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

Which makes theming it annoying :(

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

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
  });
},

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.

Hi, I wonder how I can disable minutes in the datetimepicker?

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

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.

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.

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!

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

Go to demo site, scroll to "with large margin"
if you clicl select with "disabled" mouse pointer, nothing happens.
But if you first click area under "with large margin" section, then its possible to invoke calendar on select with "disabled" mouse pointer.