Tom Marien bio photo

Tom Marien

Passionate .NET/Node Developer, Team Leader, living in Belgium

Email Twitter LinkedIn Github Subscribe

Usually when doing javascript, you’ll see a lot of script inside a page. For instance when we add a datapicker on a text input, you could add a script block to the page and do the necessary initialization there:

<h1>Modify your settings</h1>

@using (Html.BeginForm())
    <div class="control-group">
        <label class="control-label">Birthdate</label>
        <div class="controls">
            <div class="input-append">
                <input type="text" name="birthDate" id="birthDate" />
                <span class="add-on">
                    <i class="icon-calendar"></i>

<script type="text/javascript">

    $(document).ready(function() {

            dateFormat: 'dd-mm-yy'



Now what if we needed to do this more then just once? Let’s change our html to a more unobtrusive way:

<input type="text" name="birthDate" id="birthDate" data-role="datepicker" />

Now just add a new javascript file to your website and include it in our html.

(function ($) {

  $(document).ready(function () {
  	//datepicker convention
          dateFormat: 'dd-mm-yy'


In this file we make sure we alias ‘$’ to jQuery as another plugin we use could have aliased it differently.

If you are worried about performance of the selector used here, you can always use a class in your convention