Formatting date ranges

How do I get the datepicker used by the date field in a form to format the dates in an international manner. In particular, I need yyyy-mm-dd (or php y-m-d).

However, the datepicker provides the US format at all times. That is the default placeholder is mm/dd/yyyy.

I have read in this Forum that the underlying magic is the jQuery datepicker, but what is the best practice for providing the customisation in form.md. For example, I would like to start the years for the opening calendar 40 years ago (this site is to cater for seniors).

I looked for the jQuery plugin in the page source for the page, but it doesn't appear anywhere, so I'm not sure how to hook into it.

In the form I have:

date: "y-m-d"
form:
  name: new-user-form
  fields:
    - name: name
      label: Name
      placeholder: Client Name
      autofocus: on
      type: text
      validate:
        required: true
    - name: dob
      label: 'Date of Birth'
      type: date
       validate:
        required: true
        min: "1938-01-01"
        max: "2000-12-31"

This testing was on Ubuntu 17.10 server. Grav and all plugins most uptodate.

Hi @finanalyst

I don't think Grav's datepicker has the option to be opened on a given year.
However, you could probably create your own field, and initialize it with your parameters in order to achieve this. Or maybe do that with some javascript.

Hope it helps,

Paul

It would help if you could provide some code. 'some javascript' is not useful.

One thing I cant find is the selector used to anchor the jQuery plugin. Tried looking at the page source, but can't find the relevant code.

What do you mean by 'your own field'?

Here is an example:
In your blueprint, add an id to your datetime field.

Then you can set a date with

<script type="text/javascript">
            $(function () {
                $('#theidfromyourblueprint').datetimepicker({
                    defaultDate: "11/1/1940",
                    viewMode: "years"
                });
            });
</script>

With this, the date should default to 1940, and will be displayed with a "year" view.

http://eonasdan.github.io/bootstrap-datetimepicker/Options/

Thank you. This helps alot. Putting an I'd on the date field is what I was missing

you're welcome.

You could ask for others opinions, but I think it could be useful to add these options to the datetime in order to do that with the blueprint.

This has worked for me and is deployed in the wild (Date of Birth field):

https://gist.github.com/hughbris/4815199651b53c1edebed5f99c67af76

Builds on Paul's example. Good luck!

I created form.md file and created a date field, then put id=dob_select into the yaml for the date field. I copied the script section above, and no result.
I also changed $(function() to $(document).ready(function() , but no result.
Trying hughbris (below) approach.

Updated that Gist to add a couple of functions required it depends on, and correctly closed the JQuery callback wrapper.

I've been trying to get this to work and failed.
a) Antimatter does seem to use datepicker and not datetimepicker (grepping datepicker yields hits in the themes directory, whilst datetimepicker does not).
b) I have been able to inject <script>...</script> code after the form, and the selector matches the id on the input field. However, using inspector in Mozilla's webdeveloper tools, I get: TypeError $(...).datepicker is not a function

Relevant code:
In form.md I have

form:
  name: new-user-form
  fields:
    - name: name
      label: Name
      placeholder: Client Name
      autofocus: on
      type: text
      validate:
        required: true
    - name: birthdate
      label: Date of Birth
      type: date
      id: dob_select
      novalidate: true
      validate:
        required: true
  buttons:
    - type: submit
      value: "Register New User"
    - type: reset
      value: Reset
  process:
    - sqlite-insert:
        table: clients
    - display: info
  reset: true
---
<script type="text/javascript">
$(document).ready(function() {
    $("#dob_select").datepicker("option", "defaultDate", "-30y");
});
</script>

(sqlite-insert is a custom action which works in other contexts). I have also tried the line

   $("#dob_select").datepicker({defaultDate: "-30y"});

with the same result.
A screenshot shows the problem.

c) I noticed in Hugh's example, the input field is set to textand classes are added to which the selector is attached. I have tried this approach too, but I get the same result regarding the datepicker not being a function, but the datepicker functionality is missing.

Note that I changed the form.html.twig template in order for the page content (the <script> element) to be injected after the form element.

c) I noticed in Hugh’s example, the input field is set to textand classes are added to which the selector is attached. I have tried this approach too, but I get the same result regarding the datepicker not being a function, but the datepicker functionality is missing.

Something to add here. It was a while ago and I remember having a good reason to set this as text. It was originally a date input, which obviously would be the preferable/semantic/logical HTML input type. I think I changed it because jQuery required it.

After making the change, I also remember that the type seemed to be stuck in some sort of form cache, which was difficult to reset. So the input was still being processed by Grav like a date input. Eventually by changing the form's name, Grav was (perhaps) "fooled" into perhaps recompiling the form and it worked as intended. I have been meaning to try reproducing this for investigation as a bug, but it's a difficult one, and I have forgotten to do that.

So try changing the form name property, it might force Grav to handle it correctly if you have the same issue.

My Issue are resolved.
a) <input type="date"> is standard html5 and the interface is implemented differently by different browsers.
b) A default (starting date) can be set by assigning to value, eg., value="1960-03-25" using yyyy-mm-dd format.
c) The format of the placeholder is dependent on the locale setting (I had to change the locale of my computer environment).
d) datepicker is only used by the admin plugin. So it is not available to other pages, unless it is loaded specially, eg. by putting it in the theme.
e) For the form, all that is needed is to add default: "1960-03-21" as one of the fields in the date definition.