how to format the datetime pickup widget ?

[adrianmak]

I want to only pickup date by year and month only.

Day is not necessary in my case.

Is it possible to config the datetime pickup widget only show by year and month?

like

[Inxentas]

When you edit your field, below Input you can find the Date Input Format. Normally you'd set that to Y-m-d or d-m-Y if you use it at all.

However, when you set it to m-Y or Y-m then the day will not be saved in the field. Unfortunately, the picker itself won't change to reflect this behaviour. You also still have to click on the day to update the field itself. I'm not aware of methods to change the picker itself without changing it's code.

[matjazp]

It's doable with datepicker https://stackoverflow.com/questions/2208480/jquery-ui-datepicker-to-show-month-year-only but I don't know how one could "hook" to datepicker inputfield and pass some more options (at least onClose callback). I'm sure js gurus can help here ...

[szabesz]

On 3/6/2018 at 6:58 PM, matjazp said:

It's doable with datepicker

I just use a Text field with a regex pattern for validation: ^(20\d{2}|19\d{2}|0(?!0)\d|[1-9]\d)-(1[0-2]|0[1-9]|\d)$ for dates like 2018-01

I think pressing 7 keys to specify the month is a lot faster than fiddling with a datepicker.

[adrianmak]

9 hours ago, szabesz said:

I just use a Text field with a regex pattern for validation: ^(20\d{2}|19\d{2}|0(?!0)\d|[1-9]\d)-(1[0-2]|0[1-9]|\d)$ for dates like 2018-01

I think pressing 7 keys to specify the month is a lot faster than fiddling with a datepicker.

could i customize the error message if a pattern is mismatch?

[szabesz]

3 hours ago, adrianmak said:

could i customize the error message if a pattern is mismatch?

I guess it cannot be changed because it is coming from the browser, eg this is my output in the page source:

<input id="Inputfield_example_textfield" class="InputfieldMaxWidth" name="expense_example_textfield" value="2018-01" type="text" maxlength="7" pattern="^(20\d{2}|19\d{2}|0(?!0)\d|[1-9]\d)-(1[0-2]|0[1-9]|\d)$" data-minlength="6" tabindex="5">

So I wrote short instructions into the Notes property (that appears beneath the input) of the Field. Eg: Date fomat (year-month): 2018-01

[Inxentas]

Why not...

• make a Template for months with a title (Januari-December) and index (1-12) field. Then make 12 pages with this template representing each month.
• make a Field (month) of the Page type. Configure it to accept only 1 choice of the template we made for the month. Voila, a translatable month picker!
• make a Field (year) which can be an Integer with a minimum and maximum value of your choice.

This way you are 100% sure that the input of your client is clean without having to mess with a regex. The downside is that it requires two fields instead of one, and some data management. I find that permissable as you explicitly don't want to store a full datetime. You could configure the template that contains these Fields to display them next to another at 50% width to show the user their intent to be used together. Consider making these fields required.