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