CODEWITHSUNDEEP
javascriptjquerybootstrap-datetimepicker
Python Team
Python Team

Reputation: 1171

Add Today Button in datetimepicker with the below code

I would like to add Today button in datetimepicker calender. I have an idea to add with the syntax "todayBtn:true". But i dont know how to implement it while showing with the below code

<html>
    <body>
        <input class="form-control date"  data-date-format="yyyy-mm-dd  hh:ii"    data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
    </body>
</html>
<script>
   $("#shankar").click(function () {
       $("#shankar").datetimepicker('show').on('changeDate',function(ev) {               
           $('.datetimepicker').hide();
       });
    });
</script>

Upvotes: 1

Views: 12788

Answers (4)

po0l
po0l

Reputation: 98

If you mean this datetimepicker it would be as simple as that:

<html>
    <body>
        <input type="text" id="shankar" class="form-control" name="from_validity" placeholder="select to validity">
     </body>
</html>

<script>
    $(function() {
        $("#shankar").datetimepicker({
            showTodayButton: true,
            format: 'YYYY-MM-DD hh:mm'
        });
    });
 </script>

Upvotes: 0

wi7sonjoseph
wi7sonjoseph

Reputation: 71

Set following properties for your datepicker (todayBtn:"linked").

$('#dateFieldId').datepicker({
   todayBtn: "linked",
   todayHighlight : true,
   orientation: "left",
   autoclose: true
});

Upvotes: 7

Andy
Andy

Reputation: 531

Try showButtonPanel: true

$(function() {
    $( "#shankar" ).datepicker({
        showButtonPanel: true
    });
});

JSfiddle

Upvotes: 0

S M
S M

Reputation: 3233

Include jquery-ui javascript and css and add the code refer : http://jqueryui.com/datepicker/#buttonbar

$(function() {
    $( "#shankar" ).datepicker({
        showButtonPanel: true
    });
});

And to put Todays date in the panel:

$('button.ui-datepicker-current').live('click', function() {
        $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
    });

Refer here: https://forum.jquery.com/topic/jquery-ui-datepicker-today-button

Upvotes: 0

Related Questions