uxsolutions / bootstrap-datepicker Goto Github PK

Hello,

I saw that the parseFormat() function doesn't allow to have a date format like "ddmmyyyy" as it checks for different commonly used separators. Else, it breaks with an "Invalid date format" error.

I can only pick a date, but without hour and minute, hope you can add time support, thanks.

In IE7, the buttons for months and years do not flow onto single lines, instead they are split into a line each

I use the autoclose option, but the calendor doesn't close when I set a date.

<input class=​"data-datepicker" 
    data-date=​"2012-03-21" 
    id=​"task_last_day_to_submit" 
    name=​"task[last_day_to_submit]​" 
    type=​"text" value=​"2012-03-21">​

$('.data-datepicker').datepicker(
    {"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true});

This is in Google Chrome.

The icon and the input field are not aligned

I have the issue on chrome, opera, firefox and ie9

I have made a fiddle http://jsfiddle.net/tolbard/VS5J6/1/

Hello,
I seeing you showcase, and got very interested. Congratulations, its just amazing!

But, I found a bug. With Chromium 18 (not tested in other browsers), open the first datepicker of your example and passing the months by clicking in the arrow, I randomly got this:

I interested in add you component to a GWT port of bootstrap, do you accept that?
You can see the related issue in our project (gwtbootstrap/gwt-bootstrap#60) and the project itself here: https://github.com/gwtbootstrap/.

Again, nice work, congratulations!

Configure startDate or endDate. You can't select dates outside the permitted ranges with mouse clicks on the calendar dates. But if you use the arrow keys, the you can select date values outside the restricted ranges. Same if you just type a disallowed date into the text input box.

Hi,

I want to localise a datapicker for spanish. I require the file but it is displayed in english anyway.

Is there something else that I need to do?

This is the output in the browser.

$.fn.datepicker.dates
Object
en: Object
es: Object
__proto__: Object

    <script src="/assets/bootstrap-datepicker/bootstrap-datepicker.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-datepicker/locales/es.js?body=1" type="text/javascript"></script>

$(document).ready(function() {
    $(document).on("focus", ".data-datepicker", function(e){
        $(this).datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true});
      });
});

In ie7 the dropdown get totally distorted. It occupies a lot more space than the width of the input.

I passed the 'autoclose: true' option (also tried 'autoClose: true') but it doesn't seem to work. I'm expecting the datepicker would become hidden after selecting a date.

Hi,

How can I set the date to be today, e.q. 26-2-2012, when user opens datepicker?

I tried different ways but nothing updated the selected date on datepicker.

How about allowing relative time values in startDate/endDate, like the jQuery UI datepicker does? It would be nice to be able to do e.g. $('.datepicker').datepicker(endDate: '+2m')

As now bootstrap is module I don't include all less files in my projet. It took me 10min to find than datepicker need this less files.

In chromium, when I use the "show" method of datepicker, I get a stopPropagation Javascript error.

jQuery UI datepicker comes with a method named getDate() that returns a JavaScript Date object. It also provides a method named setDate() that takes a JavaScript Date object or a string.
This would avoid users to parse the string back to a Date object. The best place for this is definitely inside bootstrap-datepicker source code as jQuery UI developers demonstrated.

Another benefit is that it would also solve issue #29.
The jQuery timepicker by Jon Thornton uses this method inside datepair.js. If bootstrap-datepicker implements this method it will be easy for me to adapt Thornton's code to use bootstrap-datepicker instead of jQuery UI datepicker.

We will then end up with a nice Google calendar like date and time picker that follows Bootstrap style.

If a date field is passed with no value, can you make it so that the calendar defaults to the current day instead of February 1, 1970? http://jsfiddle.net/mr5Tf/2/

Is this the best way to changed the default, 1/2/1970, date for an input with no value:

// Dates panel
$('.date-picker').datepicker({'format' : 'dd-mm-yyyy'}).on('show', function(){
  alert($(this).attr('value'));
  if($(this).attr('value') == '')  {
    $(this).attr('value', '20-5-1980');
    $(this).datepicker('update');
  }
});

I've doing some tests here... and seems like autoClose and weekStart dont work (trunk version).

If a date field starts with no value, there's no way to leave the field empty. If I don't click the calendar and click away from the field, can you return no value so the field remains empty? http://jsfiddle.net/mr5Tf/2/

Hi,

I'm trying to decide whether to use Stefan Petre's datepicker, your fork, or some other fork. It's hard to decide, and would help tremendously if you'd add what features are part of the original (Stefan's) datepicker, and what features are distinctive to your fork.

Thanks!

If I half-type a date in the date picker, or delete my entry and tab out of the box, the datepicker defaults to 2-1-1970. This is not a good behavior because sometimes users fill out forms really fast and this might happen. How can I disable this?

It also happens if I type in 4/1/2011 or any date with slashes. Any time the widget doesn't recognize a value, it defaults to 2-1-1970 which is bad because the user might not be aware of this and then a bad date gets entered into the system.

Something like:

<input type="text" id="dp">
<script type="text/javascript">
    $('#dp').datepicker().on('changeDate', function(ev) {
        alert('changeDate triggered');
    });
</script>

Will trigger the alert when a date is selected via mouse, but not via keyboard.

Sorry for not doing the whole fork/pull request thing, but I did a dutch i18n for the datepicked and wanted to share it

;(function($){
$.fn.datepicker.dates['nl'] = {
days: ["zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag", "zondag"],
daysShort: ["zon", "maa", "din", "woe", "don", "vri", "zat", "zon"],
daysMin: ["zo", "ma", "di", "wo", "do", "vr", "za", "zo"],
months: ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
monthsShort: ["Jan", "Feb", "Maa", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"]
};
}(jQuery));

You might want to override what happens when someone presses delete or backspace in the input field whilst the datepicker is open because it goes a bit daft.

You might want to just empty the field value if they press delete or backspace once rather than it remove part of the date and the picker tries to understand what date the partial value is meant to be. I suppose this could/should apply whether the picker is open or not so you don't end up with a partial date in the field.

It's currently possible to manually input an invalid date string, confusing the picker and resulting in invalid data being left in the field.

For example, in the demo http://www.eyecon.ro/bootstrap-datepicker

I can input date value, 2012-11-11, by a keyboard, not following the date format and the final date would be 08-11-11, a invalid value.

An option should be available to restrict keyboard input to navigation only. Somewhat like making it a readonly field.

Hi,

I have the following code:

<input class="data-datepicker" data-date="2012-04-20" id="task_last_day_to_submit" language="es" name="task[last_day_to_submit]" type="text" value="2012-04-20" />

$(document).ready(function() {
    $(document).on("focus", ".data-datepicker", function(e){
        $(this).datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true});
      });
});

But the display is shown in english.

Passing the option as an argumento do work as expected.

$('.data-datepicker').datepicker({"format": "yyyy-mm-dd", "weekStart": 1, "autoclose": true, "language":"es"});

I've set the autoclose value to true, and I can trace that it's set that way on the page, but the calendar isn't closing until I click away from it.

Great job on this! Are you planning to include timepicker as well? Something like a simple textbox with up/down buttons below the calendar would work best.

Thanks for great addition.

Here is my little help. Turkish Translation.

Thanks Again

    tr: {
        days: ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi", "Pazar"],
        daysShort: ["Pz", "Pzt", "Sal", "Çrş", "Prş", "Cu", "Cts", "Pz"],
        daysMin: ["Pz", "Pzt", "Sa", "Çr", "Pr", "Cu", "Ct", "Pz"],
        months: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
        monthsShort: ["Oca", "Şub", "Mar", "Nis", "May", "Haz", "Tem", "Ağu", "Eyl", "Eki", "Kas", "Ara"]
    }

In "parseFormat: function (format) { }" there's a call to format.split which returns an array of different elements under IE vs FireFox/Chrome (IE strips out the empty elements). The issue is explained in more detail here: http://blog.stevenlevithan.com/archives/cross-browser-split

This causes issues in "formatDate: function (date, format, language) { }" where format.separators are used (shift()). Including the redefined split function made by @slevithan fixed the issue, but it's not a good way to fix this problem.

Escape key makes the date's text field lose focus, but doesn't hide the datepicker. Once that happens, there's no way to close the datepicker unless you manually focus the text field and then click elsewhere or tab away.

Spec:

The current day's date should be highlighted or otherwise made to stand out from "normal" days. My current thoughts:

1. Today's date should have a yellow gradient background. Similar to the selected date, only yellow.
2. If today's date is selected, it should show the selected color (the blue gradient). That is, selection overrides "todayness".
3. If today's date is part of a date range (currently wip under the range branch), it should show a flat, darker yellow background.
4. If today's date is a selected part of a date range, it should show a darker yellow gradient background (similar to the related selections, but with a yellow blend).

This will either wait until date ranges (#16) are done and merged into master (probably not going to happen for a while, needs feedback and unit tests), or I'll implement 1 and 2 in master, update range from master, and implement 3 and 4 in range.

Hello,thanks a lot for your great datepicker:)

when selecting a month in the widget,I record the value in a Date object,however,the date.getMonth always return a value which is the selected month minus 1?

I.E:
1.when I selected month 1 in the datepicker(autoclose enabled.)
2.evaluate date.getMonth() in chrome console,I got month 0!!!

I am using the code downloaded from github(2012/03/28),Hope you can figure out what's wrong.

var startDate = new Date(2012,03,27);
var endDate = new Date(2012,03,28);

$ ('#dp-start').datepicker({autoclose: true,language: 'zh'}).on('changeDate', function(ev){
if (ev.date.valueOf() > endDate.valueOf()){
$ ('#alert').show().find('strong').text('出错啦：起始时间不能大于终止时间的哟，亲!');
} else {
$ ('#alert').hide();
startDate = new Date(ev.date);
$ ('#dp-start').datepicker('update');
}
});

$ ('#dp-end').datepicker({autoclose: true,language: 'zh'}).on('changeDate', function(ev){
if (ev.date.valueOf() < startDate.valueOf()){
$ ('#alert').show().find('strong').text('出错啦：终止时间不能小于起始时间哟，亲！');
} else {
$ ('#alert').hide();
endDate = new Date(ev.date);
$ ('#dp-end').datepicker('update');
}
});

It would be a good thing to be able to choose if the datepicker should be shown above the button.

Maybe someone have an easy fix for this by editing the js & css?

I've got a couple of datepicker input fields inside a form that is displayed within a Bootstrap modal window. When I select a date using the datepicker the modal window closes.

This is happening due to the trigger that gets executed on line 146:

https://github.com/eternicode/bootstrap-datepicker/blob/fd9eb6bb7e9a9785f960b3ff98aac105df5e3d32/js/bootstrap-datepicker.js#L146

When I comment out that trigger the datepicker still works fine.

Any thoughts as to what that trigger is for and how to make it work nice inside a modal window?

Scott

correct by moddifying the place function

        place: function(){
            var zIndex = parseInt(this.element.parents().filter(function() {
                            return $(this).css('z-index') != 'auto';
                        }).first().css('z-index'))+10;
            var offset = this.component ? this.component.offset() : this.element.offset();
            this.picker.css({
                top: offset.top + this.height,
                left: offset.left,
                zIndex: zIndex
            });
        },

Hello, i'm using Firefox 11.0 and jQuery 1.7.2 and the master branch is returning this error (line 157):

this.element.find("input").prop is not a function
this.element.find('input').prop('value', formated);

After reading a little bit about the ".prop" method is jQuery site a found out that you are using the wrong method to update the "input" value, you should be using "attr" or not?

http://api.jquery.com/prop/

As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method.

Second my error was concerning that an attribute didn't exist i played a little bit with ".prop" and ".attr" and found that ".prop" throws and exception when the property is not defined check out this code:

$('<input />').prop('value')

$('<input />').attr('value')

Some people (Swedes for example) can't live without week numbers. Personally I hate them.
Please consider an option to add week numbers in front of weeks in the date picker.

This is a very useful mod!

I apologize if this is a duplicate bug.

If you click on the date picker and select a month with the 31st, then lose focus. Then come back to the date picker and move 1 month ahead it will skip an entire month.

Try it here:

http://dl.dropbox.com/u/143355/datepicker/datepicker.html

Thanks and great work.

so we can use the parseDate and formatDate methods

ex
var DPGlobal = $.fn.datepicker.DPGlobal = {

Sorry to reopen but I'm struggling with this. I just downloaded my copy from GIT yesterday so should be latest version. I'd be ok with the default option of "Today" although my preference would be "two days ago" in any case neither method mentioned here worked for me. My HTML looks like this:

<div id="bespoke-date" class="hide" style="padding-top: 8px">
    <div class="input-append date"
            data-date-format="dd-mm-yyyy" 
            id="exercise-date" 
            placeholder="dd-mm-yyyy"
            data-date="12-02-2012" 
            datepicker>
        <input class="span2" size="16" type="text" value="12-02-2012" >
        <span class="add-on"><i class="icon-th"></i></span>
    </div>
</div>

I added the "datepicker" attribute but otherwise it's cut and paste from your example page I believe. I then added the following JavaScript/jQuery:

$( targetString ).find('[datepicker]').datepicker().on("show", function (e) {
    alert ("event: " + alert(JSON.stringify(e, null, 4)) );
    e.date = (3).days().ago().toString("d-M-yyyy");
});

I figured by using the datejs library I would be able to trigger off of the "show" event and set the date. Unfortunately I haven't been able to see if this would even work yet as the event "show" never fires (aka, the alert statement never fires). I do know that the my jQuery selector is getting to the right places as without this block of code the datepicker doesn't pop up at all but it's the events seem to get blocked somehow.

With this avenue seemingly blocked I was willing to give up and go with the "Today as Default" approach. I tried removing the date which btw, is listed both at the INPUT level and surrounding DIV level (as data-date attribute). Is that right? In any case, not having a date in one or both of these fields pretty much broke the control (aka, even typing in a date afterward didn't enable the pop-up date picker).

Please help. I'm probably doing something dumb but I've tried to be smart and have come up wanting.

At the bottom of build_standalone.less, I notice the following code:

// Alternative arrows
// May require `charset="UTF-8"` in your `<link>` tag
.datepicker {
  .prev, .next {font-style:normal;}
  .prev:after {content:"«";}
  .next:after {content:"»";}
}

This causes the datepicker to render a "«" after the left arrow and a "»" after the right arrow next to the month name:

Reproduced in Chrome, Firefox and Safari on Mac OS X.

A ticket for discussing the direction of bootstrap-datepicker

Hello

Is there any reason why it's possible to enter an empty string into date field?

In my Opinion it seems to be a bug.

The reason is Line 149, where the w.currentTarget.value is checked.

Thanks

Is it possible for you to add support for month names and abbreviations in the value? We typically format our dates as "19 Mar 2012" so that our users in the UK don't confuse the dates when viewing the US format of mm/dd/yyyy.

It works well on chrome but not IE8.

The situation on IE8 is that

    I putted a input on a page and attached a picker on the input. If I click the 
input, the picker was showed normally. And next , I click a date on the picker, the
picker was hided but the date of the input not changed.

The situation on chrome is that

     I putted a input on a page and attached a picker on the input. If I click the 
input, the picker was showed normally. And next , I click a date on the picker, the 
picker was still at there and the date of the input was changed.

I guess it's the difference order of event on that two browers.If I comment the line 39 to disable the blur event of the input, looks like below,

39:   //blur: $.proxy(this.hide, this),

, the input of that two browers behaving same that they were all changed.The beside
effect is that they lose the chance to hide picker when the input was lose the focus.

On line 654, the extra comma causes an error in ie 7.

setters_map = {
yyyy: function(d,v){ return d.setFullYear(v); },
yy: function(d,v){ return d.setFullYear(2000+v); },
m: function(d,v){ return d.setMonth(v-1); },
d: function(d,v){ return d.setDate(v); }, //remove this comma
},

i18n was started using hex codes to avoid strange characters in non-unicode browsers.

However, <script> elements allow a charset attribute, which can be set to "UTF-8" or similar to get the correct characters.

As such, hex codes should be swapped out for their unicode equivalents, and a brief note about charset should be added to the readme.