Tag: datepicker
Nabin Nepal (Starx) datepicker jquery
July 1, 2013

$('body').click function is working before Datepicker (jquery) beforeShow method

Dmlcskn’s Question:

dmlcskndmlcskn

$(‘body’).click function is working before Datepicker (jquery) beforeShow method.
How can I trigger first onselect method of Datepicker (jquery). I mean

   $('body').click(function (evt) {

    // do something
    }

 $('#UxDatePickerFrom').datetimepicker({

beforeShow: function (inst) {
                // do something on select
            })

but if I select datepicker , body click is working first which is unwanted.

StarxStarx

$('body').click(); is a global click handler for all the elements with it, so where ever you click on the body or on the date picker the function will execute.

Your solution is to change the click handler to affect more specialized group of elements and not all of it.

$("#yourspecificelement").click(function() {
    // ....
});
Nabin Nepal (Starx) date datepicker mysql php
April 1, 2012

PHP if date equals then

Question by huddds

hudddshuddds

Hi I’m trying use a datepicker on a field I have. I’m trying to set the date field up so the user can only edit this field if the date value in the database is set to deafault (0000-00-00). If there is a value that’s not equal to default I want to show the date created.

Here’s the code I have attempted:

          if( $post['Date'] = var_dump(checkdate(00, 00, 0000))){ 
          echo "<input type="text" class="datepicker" name="pDate" style="border:#000099; margin:10px;" value="";
          echo $post['Date'];
          echo ""> <input id="start_dt" class="datepicker">";
          }
          if( $post['Date'] != var_dump(checkdate(00, 00, 0000))){ 
          echo "<span>date created: </span>";
          echo $post['Date'];

          }

It’s not working atm so any help or a point in the right direction would be great.
Please also take into account I haven’t added any proper styling so I’m only after help with the functionality.

Many thanks.

Answer by Starx

StarxStarx

var_dump() is used for debugging purpose rather than inside conditional expression. Next, using = assigns the values not checks for them. You are assigning the values of var_dump() results to $post['Date'] So change them to ==

You should be trying to to something like this

  if( $post['Date'] == checkdate(00, 00, 0000)){ 
      echo "<input type="text" class="datepicker" name="pDate" style="border:#000099; margin:10px;" value="".$post['Date']"">";
      echo "<input id="start_dt" class="datepicker">";
  } else {
      echo "<span>date created: </span>";
      echo $post['Date'];
  }
Nabin Nepal (Starx) datepicker jquery jquery-ui
March 25, 2012

How to set languages for two jquery ui datepickers

Question by Vincent

VincentVincent

I have two jquery ui datepickers in my page and I would like to apply a specific language for each one of them (let says german for one datepicker and italian for the other datepicker)

Now here is the problem: the last language file that is called apply its settings to all the datepickers (in this case, italian is applied in both inputs).
I’m using the following code, what should I change to apply a specific language to each of the datepickers? thanks

<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-de.js"></script>

<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-it.js"></script>

$(function(){

    $.datepicker.setDefaults($.datepicker.regional['de']);
    $( "#en" ).datepicker();

    $.datepicker.setDefaults($.datepicker.regional['it']);
    $( "#it" ).datepicker();


    });

Answer by Starx

StarxStarx

This is how you do it: [Read Manual]

$.datepicker.setDefaults($.datepicker.regional['de']); 
                      //  ^ first set a default locale
$("#en").datepicker($.datepicker.regional['en']);  
                 // ^ then different locale for different
$("#it").datepicker($.datepicker.regional['it']);
Nabin Nepal (Starx) datepicker jquery
March 15, 2012

Jquery Datepicker add 2 years to year not based on month/day

Question by user1272083

user1272083user1272083

I have implemented the jQuery datepicker to allow the selection of dates on a form, it should allow the selection of date based on the current date + 2 years however in the final year it will not proceed past the current date or month.

As such if today is 15/03/2012 the maximum available date would be 15/03/14. However, I require the entire of 2014 to be selectable. As such, the maximum should be 31/12/14.

How would I best go about this to enable it to auto update as it currently does?

<script type="text/javascript">
    <!-- 
         $(function() {
           $('.datepicker').datepicker({
                numberOfMonths: 3,
                showButtonPanel: true,
                defaultDate: "+1w",
                changeMonth: true,
                changeYear: true,
                numberOfMonths: 3,
                minDate: "-0",
                maxDate: "2y",
                dateFormat: 'dd-mm-yy'
    });
    });
    -->

Answer by Starx

StarxStarx

Use yearRange options. Use it like 

yearRange: 'c:c+2'

Here, c represnts current year and c+2 the next two years.

$('.datepicker').datepicker({
    numberOfMonths: 3,
    showButtonPanel: true,
    defaultDate: "+1w",
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 3,
    yearRange: 'c:c+2',
    dateFormat: 'dd-mm-yy'
});

Here is a demo for the above example.

Nabin Nepal (Starx) datepicker event-handling jquery jquery-datepicker uidatepicker
March 14, 2012

Adding datepicker event handler multiple times

Question by esviko

esvikoesviko

Using jQuery I’m trying to add the datepicker event handler to an input element.

    <div id="Box_tmpl" style="border:solid 1px #777; background:#ddd; display: none;">
        <a class="remove-box" href="#">remove</a>
        <div>
            <label for="PeriodStart">Period (start):</label>
            <input id="PeriodStart" class="start-end-date" name="period_start" readonly="readonly" />
        </div>
        <div>
            <label for="PeriodEnd">Period (end):</label>
            <input id="PeriodEnd" class="start-end-date" name="period_end" readonly="readonly" />
        </div>
    </div>

    <a class="add-box" href="#" style="margin: 6px 0 10px auto;">add</a>

    <div id="Boxes">
        <div style="border:solid 1px #777; background:#ddd;">
            <a class="remove-box" href="#">remove</a>
            <div>
                <label for="PeriodStart">Period (start):</label>
                <input id="PeriodStart" class="start-end-date" name="period_start" readonly="readonly" />
            </div>
            <div>
                <label for="PeriodEnd">Period (end):</label>
                <input id="PeriodEnd" class="start-end-date" name="period_end" readonly="readonly" />
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function(){
            $('.start-end-date').datepicker({ dateFormat: "yy-mm-dd" });

            $('.remove-box').click(function(){
                $(this).parent().remove();
            });

            $('.add-box').click(function(){
                $('#Box_tmpl').clone().removeAttr('id').show().appendTo('#Boxes');
                $('.start-end-date').datepicker({ dateFormat: "yy-mm-dd" });
                $('.remove-box').click(function(){
                    $(this).parent().remove();
                });
                return false;
            });
        });
    </script>

Adding a new box works.
Adding the remove-box event handler within the new box works.
Adding the datepicker event handler withing the new box DOES NOT work. I don’t understand why…
Creating a new element using $().clone() does the new element inherit the old element’s event handlers? If it does, may be my problem is adding the datepicker event handler multiple times to the same element… I’m running out of ideas

Answer by StilgarBF

StilgarBFStilgarBF

you have to use

$().clone(true)

http://api.jquery.com/clone/

withDataAndEventsA Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well.

for your question in the comment: when initializing, the datepicker adds a class “hasDatepicker” to the input. you can not reinitialize an Input with that class,
So if you want NOT to clone the events, you have to .removeClass('hasDatepicker') from your cloned input, then initialize it.

the code in your fiddle has to be changed:

$('#Box_tmpl').clone().removeAttr('id').find('input.start-end-date').removeClass('hasDatepicker').end().show().appendTo('#Boxes');
$('.start-end-date').datepicker({ dateFormat: "yy-mm-dd" });

note: .end() rewinds to the state it was until find()

Answer by Starx

StarxStarx

In order to bind the event to the dynamically created or cloned elements use .on()

$('#Boxes').on('click', '.remove-box', function(){
   $(this).parent().remove();
});

Demo

...

Please fill the form - I will response as fast as I can!