Date fields always returns an 'Invalid date' error with diferrent date formats #134

Closed
winstonf88 opened this Issue Nov 19, 2012 · 15 comments

Comments

Projects
None yet
2 participants

When using a diferrent date format other than 'yy-mm-aa' the colander.Date always raises an 'invalid date' error.

@ghost

ghost commented May 30, 2013

I am having the same problem but only with Chrome browser. Indeed, Chrome provides its own datepicker popup on top of the one provided with JQuery ui and their date format conflict each other even it seems the same (because display and submitted date format are not necessarily the same).

I think this problem could be avoided by using a HTML input with type="text" instead of type="date" in the template but that would go against the progress made to build semantic HTML markup.
So in order in order to maintain the semantic, and also because modern browsers are providing more and more features, I thing we could just let browsers deal with datepickers and render a HTML input with type="date" but without the jQuery ui datepicker.

So what about adding a new deform.widget.SimpleDateInputWidget that inherits from deform.widget.TextInputWidget and that just uses new templates (like deform.widget.PasswordWidget does)?

Owner

mcdonc commented May 30, 2013

I'm not sure the OP's issue had much to do with the followup, but assuming it did, can you try http://deformdemo.repoze.org/dateinput/ and see if you have the same problem?

The original questionwill need some clarification (a traceback would be helpful).

@ghost

ghost commented May 30, 2013

Sorry, what does "OP" means?

Regarding the test you are asking, I have used two browsers:

  • Chromium Version 27.0.1453.93 (200836)
  • Firefox Version 21.0

Here is the markup received by the browsers:

  <!-- mapping_item -->

  <label
         class="desc"
         title=""
         for="deformField1"
         >Date<span class="req"
                        id="req-deformField1">*</span>
  </label>


    <input type="date"
           name="date"
           value="2010-05-05"
           id="deformField1"/>
    <script type="text/javascript">
      deform.addCallback(
        'deformField1',
        function(oid) {
              if (!Modernizr.inputtypes['date'] ||
                   "date" != "date"){
                $('#' + oid).datepicker({'dateFormat': 'yy-mm-dd'});
              }
        }
      );
    </script>

Now looking at the markup used by the browsers to render the web page (not necessarily the same as the one received), here is what I have:

Under Chromium, I have <input type="date" name="date" value="2010-05-05" id="deformField1"> and the date picker is the one from the browser itself.

Under Firefox, I have <input type="date" id="deformField1" value="2010-05-05" name="date" class="hasDatepicker"> and the date picker is the one from jQuery ui.

@ghost

ghost commented May 30, 2013

Regarding my own web project, I also looked at the markup used by the browsers to render the web page.

Here is what I have when setting an explicit widget=DateInputWidget() when building the schema node:

Under Chromium, I have <input type="date" name="begindate" value="" id="deformField2" class="hasDatepicker"> and both date pickers from the browser itself and from jQuery ui are presents.

Under Firefox, I have <input type="date" id="deformField2" value="" name="begindate" class="hasDatepicker"> and only the jQuery ui date picker is present. Anyway, I think Firefox does not implement an internal date picker.

Owner

mcdonc commented May 30, 2013

OK, this is the expected behavior. If you want different behavior, you can write your own widget.

@ghost

ghost commented May 30, 2013

I guess "this" means the results I have with http://deformdemo.repoze.org/dateinput/ and not the ones I have with my own project, isn' it?
If so, then I would like to be able to reproduce the example provided in http://deformdemo.repoze.org/dateinput/ within my own project but I cannot I don't know why.

@ghost

ghost commented May 30, 2013

Following my mistake about issue (#165), I have performed some new tests for this issue (#134).

I am in a country where the date format is dd/mm/yyyy and I want to use this format in my web application.

I have the same problem mentioned in the initial question and here are the conditions which lead to this error:

  • I use colander.Date for the schema node type
  • I set an explicit widget like this widget=deform.widget.DateInputWidget(options={'dateFormat':'dd/mm/yy'})
  • I use Firefox Version 21.0

When I set the focus on the date input, then the jQuery ui date picker appears. I click on a date and then this date appears in the input box with format dd/mm/yyyy and is submitted with the same format dd/mm/yyyy. This is considered invalid for colander.Date which is why the initial error is raised.

When I use Chromium Version 27.0.1453.93 (200836) however, I have both the jQuery ui and Chromium date pickers. Clicking on the JQuery ui date picker does nothing at all but when clicking on the Chromium one, then the selected date appears in the input box with format dd/mm/yyyy and is submitted with the ISO format yyyy-mm-dd.

But it seems that the display format has nothing to do with the option I set in the deform.widget.DateInputWidget. Indeed, under the following conditions:

  • I use colander.Date for the schema node type
  • I set an explicit widget like this widget=deform.widget.DateInputWidget() or I don't set any widget.
  • I use Chromium Version 27.0.1453.93 (200836)

Under those new conditions, both jQuery ui and Chromium date pickers appears and I can set a date by clicking on any of them. In both cases, the date appears in the input box with format dd/mm/yyyy and is submitted with the ISO format yyyy-mm-dd.

So, my first problem is that I don't know why I always have two date pickers under Chromium with my web application while I have only the Chromium date picker with the test application http://deformdemo.repoze.org/dateinput/. Actually I know why, the Chromium date picker appears because the input has the type="date" and the jQuery ui date picker appears because the class hasDatepicker is added to the input. So my real question is why is the class hasDatepicker added?

My second problem, is that I don't see any possibility to use deform.widget.DateInputWidget with a specific format (like options={'dateFormat':'dd/mm/yy'}) and get the same behavior in all browsers.

Owner

mcdonc commented May 30, 2013

Please try upgrading whatever version of Deform you're using. 0.9.6 apparently had some bugfixes related to this.

@ghost

ghost commented May 30, 2013

I am using deform==0.9.7

Owner

mcdonc commented May 30, 2013

Sorry, then I don't know what the issue is if it works on deformdemo.repoze.org for you. You might try checking deform out of github and trying the master, I suppose, although there's nothing in the changelog indicating any bugs related to this were fixed.

@ghost

ghost commented May 30, 2013

Ok I might try that, regarding my first problem.

However, regarding the second problem, do you know a way to use a specific format with deform.widget.DateInputWidget which produce the same results for any browser?

Owner

mcdonc commented May 30, 2013

I'd suggest that you probably need to look at the code and try different things. I don't know offhand.

@ghost

ghost commented May 30, 2013

This is what I proposed earlier:

So what about adding a new deform.widget.SimpleDateInputWidget that inherits from deform.widget.TextInputWidget and that just uses new templates (like deform.widget.PasswordWidget does)?

Owner

mcdonc commented May 30, 2013

I'd suggest doing that in your own code if you need it.

Owner

mcdonc commented Aug 10, 2013

Closing because there's no clear path for resolution of any particular bug. If futher discussion needs to happen it should happen on the maillist or if there's a new bug of some kind it should be reported here.

@mcdonc mcdonc closed this Aug 10, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment