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]](http://i.imgur.com/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]](http://i.imgur.com/h8yDGvZ.png)
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
@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
)
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}{MAXLEN_PROP}{WIDTH_PROP_SIZE}{TABINDEX_PROP}{REQUIRED_PROP} value="<?=strtotime({VALUE})?>" id="datepicker" /><else><input type="text" class="textbox"{NAME_PROP}{MAXLEN_PROP}{WIDTH_PROP_SIZE}{TABINDEX_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" 
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.