uxsolutions / bootstrap-datepicker

A datepicker for twitter bootstrap (@twbs)
Apache License 2.0
12.66k stars 6.06k forks source link

Datepicker format not working #1622

Open jacomensink opened 9 years ago

jacomensink commented 9 years ago

I want to support different display formats, but it's important to send one date format. When i use this function i get an error.

format: { /* Say our UI should display a week ahead, but textbox should store the actual date. This is useful if we need UI to select local dates, but store in UTC */ toDisplay: function (date, format, language) { var d = new Date(date); d.setDate(d.getDate() - 7); return d.toISOString(); }, toValue: function (date, format, language) { var d = new Date(date); d.setDate(d.getDate() + 7); return new Date(d); } },

return an e.replace is not a function in my console.

Azaret commented 9 years ago

Which version of bootstrap-datepicker are you using ? of jQuery ? What options for the datepicker do you set ? For what I tested your example works fine: http://jsfiddle.net/azaret/pwjospd8/2/

marcelo2605 commented 8 years ago

Same problem here:

jQuery 1.11.2 Datepicker 1.5.0

var d = new Date();
$('.datepicker').datepicker({
     format: {
    toDisplay: 'dd-mm-yyyy',
    toValue: 'yyyy-mm-dd'
      },
      todayHighlight: true,
      startDate: d,
      autoclose: true
});
Azaret commented 8 years ago

I see. As stated in the documentation, only those two options are currently supported:

$('.datepicker').datepicker({
  format: 'yyyy-mm-dd'
});
$('.datepicker').datepicker({
  format: {
    toDisplay: function () {},
    toValue: function () {}
  }
});

So this is not a bug, rather a feature request. I let you flag this @acrobat @hebbet.

goodforenergy commented 8 years ago

Sorry, I think I'm missing something here. I'm experiencing the same issue and I'm not sure how this isn't a bug. I can't understand how that fiddle is working - I'm running with the same versions and I'm getting "format.replace is not a function".

harijoe commented 8 years ago

+1 goodforenergy. This is either or bug or a lack of clarity in documentation.

jhairau commented 8 years ago

@jacomensink, @goodforenergy & @marcelo2605

I believe that you need to specify toDisplay and toValue as functions and not strings, that should resolve your error message in console.

goodforenergy commented 8 years ago

@jhairau I was using the example from the documentation verbatim. I investigated a little further and I think this is just a versioning issue. If you are using bootstrap-datepicker version 1.4, when specifying format in this way was not supported, you will get the error message Uncaught TypeError: format.replace is not a function.

I think this is a documentation issue. The documentation should state that those options were added in 1.5. Upgrading my version to 1.5 fixed the issue.

acrobat commented 8 years ago

@goodforenergy yes indeed that is an known issue, but we are going to fix that soon! See #1532, it's currently planned for 1.6 but I'm thinking about moving it forward to a 1.5.X release

goodforenergy commented 8 years ago

@acrobat gotcha - sounds good :+1:

redayoub commented 8 years ago

I'm having the same problem, I want to display date as 'dd/mm/yyyy' and set the value to 'yyyy-MM-dd', but I always get for example:

The specified value "27/05/2016" does not conform to the required format, "yyyy-MM-dd".

Here's the code I'm using:

$('.dateInput').datepicker({
    format: {
        toDisplay: function (date, format, language) {
            var date = new Date(date),
            month = '' + (date.getMonth() + 1),
            day = '' + date.getDate(),
            year = date.getFullYear();

            if (month.length < 2) month = '0' + month;
            if (day.length < 2) day = '0' + day;
            return [day, month, year].join('/');
        },
        toValue: function (date, format, language) {
            var date = new Date(date),
            month = '' + (date.getMonth() + 1),
            day = '' + date.getDate(),
            year = date.getFullYear();

            if (month.length < 2) month = '0' + month;
            if (day.length < 2) day = '0' + day;

            return [year, month, day].join('-');
        }
    }
});

Any help please?

SaharZehavi commented 8 years ago

@redayoub i have the same problem.

abrahammj commented 8 years ago

FWIW: I had the same issue and it was jQueryUI datepicker taking control over bootstrap one.

castamir commented 8 years ago

http://jsfiddle.net/shhb5La2/15/

miguelnetoarte commented 8 years ago

Datepicker with error in leap year. It is displaying the wrong date from July. Does anyone know how to solve this ?

CJYate commented 8 years ago

@abrahammj how do you work around that? I think it might be what I'm seeing...

abrahammj commented 8 years ago

@CJBrew You can choose not to include jQuery UI datepicker from its Download Builder (https://jqueryui.com/download/). I was able to completely remove jQuery UI in my case. But if you need to load jQuery UI datepicker in the page (for whatever reason), then may be require.js can help.

Azaret commented 7 years ago

toDisplay aim to set the output format of dates, for both UI and input. toValue aim to set the input format, which the plugin will use in order to parse date wrote in the input.

The issue of @redayoub is a bug where if you set different format in both function it will loop between the two and finally remove the date because the format is not the same. This specific bug will be addressed in the 2.0.

I'm gonna lock this ticket as comments are not anymore related to OP issue.