Skip to content

Instantly share code, notes, and snippets.

@jeremyrajan
Created July 28, 2013 15:51
Show Gist options
  • Save jeremyrajan/6099043 to your computer and use it in GitHub Desktop.
Save jeremyrajan/6099043 to your computer and use it in GitHub Desktop.

Revisions

  1. jeremyrajan created this gist Jul 28, 2013.
    59 changes: 59 additions & 0 deletions datepicker
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    <html>
    <head>
    <script>
    <!--script which will change the date in the input box according to selection-->
    <!-- This date selector doesnot carry fancy stuff :). A very basic date selector. -->
    function changedate()
    {
    var date = document.getElementById("date"),
    sel_date = date.options[date.selectedIndex];

    var month = document.getElementById("month"),
    sel_month = month.options[month.selectedIndex];

    var year = document.getElementById("year"),
    sel_year = year.options[year.selectedIndex];

    document.getElementById("fix_date").value = sel_date.value+ "/" + sel_month.value + "/" + sel_year.value;
    }
    </head>
    <body>
    <table>
    <tr>
    <td>Date</td>
    <td>
    <input onclick="document.getElementById('picker').style.display='block';" name="fix_date" type="text" id="fix_date" value="<?php echo date('d/m/Y'); ?>"/>
    <div class="picker" id="picker" style="display:none;">
    <select name='date' id="date" onchange="changedate();">
    <?php
    for($i=1;$i<=31;$i++)
    {
    echo "<option>$i</option>";
    }
    ?>
    </select>

    <select name="month" id="month" onchange="changedate();">
    <?php
    for($j=1;$j<=12;$j++)
    {
    echo "<option>$j</option>";
    }
    ?>
    </select>

    <select name="year" id="year" onchange="changedate();">
    <?php
    for($k=2013;$k<=2015;$k++) //Year limit is btw 2013 and 2015, this can be changed.
    {
    echo "<option>$k</option>";
    }
    ?>
    </select>
    <span class="close_picker" id="close" onclick="document.getElementById('picker').style.display='none';">x</span>
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>