Today link with datepicker like the one in django admin page

Question

I am looking to create a datetime calender same as in django admin page using jQuery. I am using datepicker() api for this and it works cool

jQuery ui datepicker

Below is what I can do with this :

but I am still looking to have a today link like it is provided in django admin page, as shown in figure below in red:

Is it possible to do using same datepicker ? Or maybe we would need to do something else ?

Any suggestions ?

Code which I am using in current datepicker is below :

<script>
$(function() {
                $("[name*='exp_date']").datepicker({ changeMonth: true , changeYear: true,
                 dateFormat: "yy-mm-dd" ,gotoCurrent: true,appendText: "(yyyy-mm-dd)" ,
                 autoSize: true , prevText: "Earlier" ,showButtonPanel: true , showCurrentAtPos: 3, showOptions: { direction: "up" }, weekHeader: "Wk" });
        });


    </script>

<style>
.ui-datepicker-trigger { position:relative;top:5px; height:20px ; }

Answer 1

You can always customize it with a bit of javascript and make it work as you want. Check this fiddle

$("#todaylink").on("click", function(){
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();

    if(dd<10) {
        dd='0'+dd
    } 

    if(mm<10) {
        mm='0'+mm
    } 

    today = mm+'/'+dd+'/'+yyyy;

    $("#today").val(today);

});

Javascript based on this question.

Answer 2

You could just use jQuery to populate the input box with todays date.

Here's a fiddle for an example: http://jsfiddle.net/9XtfX/

JS

function setDate() {
    var now = new Date(); 
    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);
    var today = now.getFullYear()+"-"+(month)+"-"+(day) ;

    $('#todaysDate').val(today);
}

$('#setDate').click(function(){
    setDate();
});

HTML

<form action="#" method="post" class="" id="form">
    <input type="text" id="todaysDate" name="todaysDate" value="" />
    <input type="button" id="setDate" value="Today"></input>    
</form>