Adding javascript calender to custom field

[zgantar@…]

It would be nice to be able to append javascript calendar to custom field in ticket! I tried it myself but I'm having some problems. First I added javascript and css to header.cs:

 <link rel="stylesheet" href="<?cs var:chrome.href ?>/common/css/datepickercontrol_mozilla.css" type="text/css" /> 
 <script type="text/javascript" src="<?cs
   var:chrome.href ?>/common/js/datepickercontrol.js"></script>

Then added some more code, that is needed for this javascript datepickercontrol.js to newticket.cs: (day and month names are in slovene so don't bother with them!)

<input type="hidden" id="DPC_TODAY_TEXT" value="danes">
<input type="hidden" id="DPC_BUTTON_TITLE" value="Odpri koledar...">
<input type="hidden" id="DPC_MONTH_NAMES" value="['januar', 'februar', 'marec', 'april', 'maj', 'junij', 'julij', 'avgust', 'september', 'oktober', 'november', 'december']">
<input type="hidden" id="DPC_DAY_NAMES" value="['ned', 'pon', 'tor', 'sre', 'čet', 'pet', 'sob']">
<input type="hidden" id="DPC_BUTTON_POSITION" value="out">

But the real problem bigins next, how to append this datepickercontrol to inputfield!

• in Trac 8.4:

The datepickercontrol showed after adding some more code in macros.cs to ticket_custom_props:

   if c.type == 'text' ?><?cs

   	if c.name == 'datum'?>
    	<input type="text" name="custom_<?cs var c.name ?>" value="<?cs var c.value ?>" id="custom_<?cs var c.name ?>" datepicker="true"/>(oblika: dd.mm.llll)      
      <?cs else ?>
      <input type="text" name="custom_<?cs var c.name ?>" value="<?cs var c.value ?>" id="custom_<?cs var c.name ?>"<?cs
      /if ?><?cs

But it was in the wrong place, not where it was soposed to be, and I couldn't fix it. Everything else worked like it was soposed to!

• in Trac 0.9b2

The problem here is that I can't write something like I did in macros.cs because the code moved to newticket.cs and was also changed a bit! So I don't know how to write an if statement because of this changes, mainly because I can't seem to get the right name out of:

var:name(field)

Please help!!

[jeunice@…]

We were able to hack ticket.cs and newticket.cs to link in ​jscalendar. It would be nice if Trac understood "date" as a specific field type, and automatically included such a function. Until then, see attached files as a "how to hack it in" template.

[jeunice@…]

Sorry about the duplicate files! Trac gave me an error on the pure ticket.cs, so I uploaded the zip without realizing that the .cs had gone up successfully, error notwithstanding. ;-)

[jeunice@…]

example ticket.cs (change fields and location of jscalendar files to suit your local needs)

[jeunice@…]

example ticket.cs (change fields and location of jscalendar files to suit your local needs)

[whueskes@…]

Thanks for the example ticket.cs

I have changed it a bit so it uses a hidden field and display area, so users cannot change it directly (to avoid invalid dates entered) and disabled weekend days. Here is the relevant part of the ticket.cs file:

<?cs if:field.type == 'text' ?>
 <?cs if:name(field) == 'completeby' ?>
  <input type="hidden" id="<?cs var:name(field) ?>" name="<?cs var:name(field) ?>" />
  <span style="background-color: rgb(255, 255, 255); cursor: default;"
        onmouseover="this.style.backgroundColor='#ff0';"
        onmouseout="this.style.backgroundColor='#fff';"
        id="<?cs var:name(field)?>_f">
   <?cs if:string.length(ticket[name(field)]) == 0 ?>
    Click to enter date
   <?cs else ?>
    <?cs var:ticket[name(field)] ?>
   <?cs /if?>
  </span>
  <script type="text/javascript">
    Calendar.setup({
        inputField     :    "<?cs var:name(field)?>", // id of the input field
        ifFormat       :    "%Y-%m-%d",       // format of the input field
        showsTime      :    false,            // will display a time selector
        displayArea    :    "<?cs var:name(field)?>_f",  // id of display span
        daFormat       :    "KW%W %d.%m.%Y",  // format to display
        singleClick    :    true,             // double-click mode
        step           :    1,                // show all years in drop-down boxes
        dateStatusFunc :    function (date) { // disable weekend days 
                              return (date.getDay() == 6 || date.getDay() == 0) 
                                                                ? true : false;
                            }
    });
  </script>
 <?cs elif:name(field) == 'nextactiondue' ?>

  ...same as above...

 <?cs else ?>
  <input type="text" id="<?cs var:name(field) ?>" name="<?cs var:name(field) ?>"
         value="<?cs var:ticket[name(field)] ?>" />
 <?cs /if ?>
<?cs elif:field.type == 'select' ?>
 ... 

[whueskes@…]

made a mistake in my previous addition. The hidden field should have a value too:

  <input type="hidden" id="<?cs var:name(field) ?>" 
         name="<?cs var:name(field) ?>"  
         value="<?cs var:ticket[name(field)] ?>" />

otherwise any change will delete the date.

[sid]

With the addition of jQuery in 0.11, you can add a ​datepicker plugin that will help with this.

[Christian Boos]

See #1942.

[anonymous]

I am displaying 2 datepickercontrol controls on my form.

But my problem is that, it doesn't display first datepicketcontrol on the proper position, but it displays the second one properly.

If I remove the first control from the form, it starts displaying the second control improperly.

It displays the control image at the bottom of the page.

Please anyone has any solution, then please help me.

[Christian Boos]

spam or not spam?

If you think the above comment was a spam, let me know, I'll add outsourcing2india.com to the BadContent.

bithika@…, if this was not a spam, then please refrain removing people from the CC: list, making what looks like random changes and in general commenting on a closed ticket… In addition, you most probably have hit the wrong Trac instance.

[Matthew Good]

I've deleted the field changes in the last anonymous comment since most of them were not valid.