How to add a new Input Field Type?
hansolo Offline
Junior Member
**
Posts: 22
Joined: Sep 2015
Post: #1
How to add a new Input Field Type?
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!
09-16-2015 06:57 PM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #2
RE: How to add a new Input Field Type?
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.


[Image: leelink.gif]
MYBB1.6 & XThreads
(This post was last modified: 09-16-2015 09:47 PM by leefish.)
09-16-2015 09:46 PM
Visit this user's website Find all posts by this user Quote this message in a reply
nier3 Offline
Member
***
Posts: 125
Joined: Jul 2012
Post: #3
RE: How to add a new Input Field Type?
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:

[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

(This post was last modified: 09-17-2015 12:46 AM by nier3.)
09-16-2015 10:25 PM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #4
RE: How to add a new Input Field Type?
@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.


[Image: leelink.gif]
MYBB1.6 & XThreads
09-16-2015 11:04 PM
Visit this user's website Find all posts by this user Quote this message in a reply
nier3 Offline
Member
***
Posts: 125
Joined: Jul 2012
Post: #5
RE: How to add a new Input Field Type?
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.

(This post was last modified: 09-17-2015 12:36 AM by nier3.)
09-17-2015 12:35 AM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #6
RE: How to add a new Input Field Type?
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 )


[Image: leelink.gif]
MYBB1.6 & XThreads
09-17-2015 01:29 AM
Visit this user's website Find all posts by this user Quote this message in a reply
nier3 Offline
Member
***
Posts: 125
Joined: Jul 2012
Post: #7
RE: How to add a new Input Field Type?
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

09-17-2015 01:46 AM
Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #8
RE: How to add a new Input Field Type?
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.


09-17-2015 06:31 AM
Find all posts by this user Quote this message in a reply
leefish Offline
Hamster
*****
Posts: 1,009
Joined: Apr 2010
Post: #9
RE: How to add a new Input Field Type?
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


[Image: leelink.gif]
MYBB1.6 & XThreads
(This post was last modified: 09-17-2015 07:58 AM by leefish.)
09-17-2015 07:47 AM
Visit this user's website Find all posts by this user Quote this message in a reply
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #10
RE: How to add a new Input Field Type?
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.

09-18-2015 06:59 AM
Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

 Standard Tools
Forum Jump: