CODEWITHSUNDEEP
phpjquerybuttontwitter-bootstrapdatepicker
JK87
JK87

Reputation: 379

Twitter Bootstrap Datetimepicker go to date using a normal button

I'm working on a planner using bootstrap, php and jquery and i'd like to use a datetimepicker (http://www.eyecon.ro/bootstrap-datepicker/) to go to a different date on the planner and view the tasks of that day. I want to use a normal button to trigger the datepicker. Then, whenever the user picked a date, use GET to create a link like index.php?page=planner&date=2013-08-03. I'm trying not to use an input field, but whenever a date is clicked to create a GET link immediately if possible..

Example image:

How to create a button working like this? example

I'm using the following HTML:

<a id="diff-date" class="btn btn-large btn-primary" href="#">Date <i class="icon-calendar icon-white"></i></a>

An the following JQuery:

$(function() {
    $('#diff-date').datetimepicker({
      pickTime: false
    });
  });

Without succes so far.. I hope someone can help!

EDIT

Normally I use this HTML:

<label>Datum:</label>
<div id="datum" class="input-append">
     <input data-format="dd-MM-yyyy" type="text" name="datum" placeholder="Kies een     datum..." /><span class="add-on"><i data-date-icon="icon-calendar"></i></span>
</div>

And this JQuery:

$(function() {
    $('#datum').datetimepicker({
      pickTime: false
    });
});

To achieve this:

example 2

Upvotes: 1

Views: 7534

Answers (2)

monophobik
monophobik

Reputation: 11

You're confusing:

http://tarruda.github.io/bootstrap-datetimepicker/

With this:

http://www.eyecon.ro/bootstrap-datepicker/

They're not the same.

Upvotes: 1

JoDev
JoDev

Reputation: 6873

Try this :

$(document).ready(function() {
    $('#diff_date').datepicker().on('changeDate', function(ev){
      var choosenDate = ev.date;
      //Add a specific treatment for the date here...
      $('#diff-date').datepicker('hide');
    });
    $('#diff_date').click(function() {
        $('#diff-date').datepicker('show');
    });
}

And change the html of your link like :

<a id="diff-date" class="btn btn-large btn-primary" href="#" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Date <i class="icon-calendar icon-white"></i></a>

Just for information, this is the code used in the site to make a link with a calendar :

var startDate = new Date(2012,1,20);
var endDate = new Date(2012,1,25);
$('#dp4').datepicker()
    .on('changeDate', function(ev){
        if (ev.date.valueOf() > endDate.valueOf()){
                    $('#alert').show().find('strong').text('The start date can not be greater then the end date');
        } else {
            $('#alert').hide();
            startDate = new Date(ev.date);
            $('#startDate').text($('#dp4').data('date'));
        }
        $('#dp4').datepicker('hide');
    });

And the Html for that 

Start date<a href="#" class="btn small" id="dp4" data-date-format="yyyy-mm-dd" data-date="2012-02-20">Change</a>

Upvotes: 0

Related Questions