Move js code from html page to js file and call that code in my html page

Question

Hi guys i am trying to move my js code from my phtml page to js page and i would like to call to that page in to my phtml page. And i am working in zend.

Can anyone help me how can i do that.

here is my phtml code:

   <div class="reminderForm">
    <form id="reminderForm_<?php echo $this->ticketId;?>">
        <h4><?php echo $this->translate('set_reminder'); ?></h4>
        <span class="formz-required">*</span>
        <?php echo $this->form->remark;?>
        <?php if ($this->isAllowed('ticket.index.reminder-type')) : ?>
            <span class="remark-element-span formz-required">*</span>
            <?php echo $this->form->reminderType;
        endif; ?>
        <span class="remark-element-span formz-required">*</span>
        <?php
            echo $this->form->reopenTicket;
            echo $this->form->ticketId; 
        ?>
        <div class="button-block">
            <span><?php echo $this->form->cancel; ?></span>
            <span><?php echo $this->form->save; ?></span>
        </div>
    </form>
</div>
<?php 
echo $this->inlineScript()->appendScript(<<<EOS
    $(".reopenTicket").datetimepicker({
        showOn: "button",
        buttonImage: "/themes/bas/icons/fatcow/16x16/calendar.png",
        dateFormat:'dd-mm-yy',
        timeFormat: 'HH:mm',
        buttonImageOnly: true, 
        controlType: 'select',
        showWeek: true,
        firstDay: 1,
        oneLine : true
    });
    var today = new Date();
    var tomorrow = new Date(); 
    tomorrow.setDate(today.getDate()+1);
    tomorrow.setHours(8);
    tomorrow.setMinutes(0);
    $(".reopenTicket").datetimepicker("setDate", new Date(tomorrow));
EOS
);
?>

And here is my js file :

    var REMINDER = {};

REMINDER.Followupreminder = {

};

inside that

 REMINDER.Followupreminder = {

};

function i would like to call that js code.

Can anyone help me how can i do that. Thanks in advance.

Answer 1

once you provided additional info (initial request was out of context) here's something similar to your sample:

var REMINDER = {};

REMINDER.Followupreminder = {

    init: function(){
        // put your any initialization here
        this.bindUI();
    },

    bindUI: function(){
        // if bindUI isn't being used from outside - you may call this.initDatePicker() directly from init()
        this.initDatePicker();
    },

    initDatePicker: function () {
        console.log('Congratulations! Your code has been moved and executed!');
        $(".reopenTicket").datetimepicker({
            showOn: "button",
            buttonImage: "/themes/bas/icons/fatcow/16x16/calendar.png",
            dateFormat: 'dd-mm-yy',
            timeFormat: 'HH:mm',
            buttonImageOnly: true,
            controlType: 'select',
            showWeek: true,
            firstDay: 1,
            oneLine: true
        });
        var today = new Date();
        var tomorrow = new Date();
        tomorrow.setDate(today.getDate() + 1);
        tomorrow.setHours(8);
        tomorrow.setMinutes(0);
        $(".reopenTicket").datetimepicker("setDate", new Date(tomorrow));
    }
};

$(function(){
    REMINDER.Followupreminder.init();
});