How to add a new Input Field Type?

[hansolo]

Hi All,

I want to add a new Input Field Type, specifically I want to add a calendar-style date picker.

Does anyone have any hints how I would go about this?

Many Thanks!

[leefish]

A friend of mine who uses xThreads was messing about with this - she did get quite far with it as I recall, but I think it was a little buggy :/  I have pm'd her to ask if she can help.

[nier3]

Hi, I use this code. I use this to move threads on date of expiration. If you want only datepicker on input field, please follow this more easy tutorial:
http://mybbhacks.zingaburga.com/showthre...http://mybbhacks.zingaburga.com/showthread.php?tid=5195&pid=1879

---------------------------------

- Download your language and add on your server: https://github.com/jquery/jquery-ui/tree/master/ui/i18n

- In newthread template, after {$headerinclude} and <script type="text/javascript" src="{$mybb->asset_url}/jscripts/post.js?ver=1800"></script> add:

Code:

1 2 3 4 5 6 7 8 9 10 11 12

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="your-link-to script-datepicker-XX.js"></script> <script type="text/javascript"> jQuery(function() { jQuery("#datepicker").datepicker({ dateFormat: "yy/mm/dd" }).val() $.datepicker.setDefaults($.datepicker.regional[YOUR-LANGUAGE-EG-IT]); }); </script>

---

- Settings in Custom Thread Fields for this date input field:

Input filed type: textbox
Text Mask Filter: Custom (regex) and write this: ^((?:19|20)\d\d)/(0?[1-9]|1[012])/(0?[1-9]|[12]\d|3[01])$
Input Formatter: <?=strtotime({VALUE})?>
Input Field HTML: yes and write this:

Code:

<input type="text" class="textbox"{NAME_PROP}{MAXLEN_PROP}{WIDTH_PROP_SIZE}{TABINDEX_PROP}{REQUIRED_PROP} value="{VALUE}" id="datepicker" />

---

Display Format: <?=date('d-m-Y', {VALUE})?>

You should to have a thing like this:



Anyway this isn't perfect, when you edit a thread with this input field you will have to always edit this right date, because the date will be a string:



I still don't understand how to fix this

An old thread about this is also here: http://mybbhacks.zingaburga.com/showthre...http://mybbhacks.zingaburga.com/showthread.php?tid=4

[leefish]

@nier3 - I dont know if you need the line <script src="//code.jquery.com/jquery-1.10.2.js"></script>  because you are already loading jquery in the headerinclude. No need to increase load times if it is compatible with jquery-1.11 which is what mybb uses.

[nier3]

Thank you Lee, without that script still works. Anyway I have to edit the post, because that code works with string date and if hansolo wants only a datepicker on date all that edits doesn't need.

If you want only a datepicker on date:

"Date" in Text Mask Filter
Input Formatter: {VALUE}

Use Custom Input HTML yes and then

Code:

<input type="text" class="textbox"{NAME_PROP}{MAXLEN_PROP}{WIDTH_PROP_SIZE}{TABINDEX_PROP}{REQUIRED_PROP} value="{VALUE}" id="datepicker" />

---

Display Format: {VALUE}

Then in newthread and edit post add/edit:

- After headerinclude:

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/post.js?ver=1800"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="your-link-to script-datepicker-XX.js"></script> <script type="text/javascript"> jQuery(function() { jQuery("#datepicker").datepicker({ dateFormat: "dd/mm/yy" }).val() $.datepicker.setDefaults($.datepicker.regional['XX-your-language']); }); </script>

---

This should works without too changes.

[leefish]

Deb , after about an hour we got this datepicker working on editpost and new thread using a conditional in the custom HTML. Please can you share that code (am exhausted )

[nier3]

Thank you Lee for the help

If you use the string date (useful is you want move thread on date expiration, the first post I added here):

Text Mask Filter: Custom (regex) and ^((?:19|20)\d\d)/(0?[1-9]|1[012])/(0?[1-9]|[12]\d|3[01])$

Input Formatter: <?=strtotime({VALUE})?>

Use Custom Input HTML yes and in Input Field HTML:

Code:

<if THIS_SCRIPT != 'editpost.php' then><input type="text" class="textbox"{NAME_PROP}{MAXLE​​N_PROP}{WIDTH_PROP_SIZE}{TABINDE​X​_PROP}{REQUIRED_PROP} value="<?=strtotime({VALUE})?>" id="datepicker" /><else><input type="text" class="textbox"{NAME_PROP}{MAXLE​​​​​​​N_PROP}{WIDTH_PROP_SIZE}{TA​B​I​N​D​E​X​_PROP}{REQUIRED_PROP} value="<?=date('Y/m/d', (int){VALUE})?>" id="datepicker" /></if>

---

Display Format: <?=date('d-m-Y', {VALUE})?>

When you add date in newthread and edit date in editpost still you'll have US format date (yy/mm/dd) but patience.. "he who grasps at too much loses everything"

[RateU]

Very nice

I just want to add an idea to work also (hopefully) when editing draft and post preview (or when inline post error triggered):

Code:

<if (THIS_SCRIPT == 'editpost.php' && !$mybb->input['my_post_key']) || (THIS_SCRIPT == 'newthread.php' && $mybb->input['action'] == 'editdraft') then><?=date('m/d/Y',{VALUE})?><else>{VALUE}</if>

---

Also (if not saving it as string), maybe it is better (in my opinion) to set the Underlying Data Type to Integer.

I use pikaday though.

[leefish]

RateU - good to see you back

Good improvements -I had forgotten about post preview and drafts.

Yea, I think it was the sort that Nier3 was after?

http://mybbhacks.zingaburga.com/showthre...http://mybbhacks.zingaburga.com/showthread.php?tid=4398&pid=1715

[RateU]

Since 1.8 uses jQuery, in my opinion, it is a bit easier to customize the input field (there are many js plugins use jQuery).
For example, for this type of fields:
http://mybbhacks.zingaburga.com/forumdisplay.php?fid=25
maybe we can use color picker.