MyBB Hacks

Full Version: How to add a new Input Field Type?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3
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!
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.
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:
  <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:

[Image: Omfqjr8.png]

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:

[Image: h8yDGvZ.png]

I still don't understand how to fix this Frown

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

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

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 Tongue )
Thank you Lee for the help Love Love

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" Biggrin

Very nice Smile

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.

RateU - good to see you back Smile

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
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.
Pages: 1 2 3
Reference URL's