1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

jquery datepicker issue

Discussion in 'JavaScript' started by Ian Haney, Nov 6, 2015.

0
  1. #1
    Hi

    I have a jquery datepicker in my website and it all works perfect in Firefox but for some reason it don't work in Chrome, I click on a day within the datepicker and it just closes the datepicker and does not add the date to the input field

    Is really weird cause works perfect in Firefox, the code is below if someone can see if I am missing anything that needs to make it work in Chrome.

    
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <html>
            <head>   
                <title>
                   
                </title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
               
                <link rel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/blitzer/jquery-ui.css"/>
                <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
               
                <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />

<script src="js/jquery.ui.timepicker.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ui.timepicker.css" />

<script>
  $(function() {
    $("#exrdate").datepicker({
    showButtonPanel: true,
    dateFormat: "yy/mm/dd",
    showOn:"both"
    });
  });
  $(function() {
    $("#exstdate").datepicker({
    showButtonPanel: true,
    dateFormat: "yy/mm/dd",
    showOn:"both"
    }); 
});
  </script>

<script>
$(document).ready(function() {
                  $('#exrtime').timepicker({
                    defaultTime: '12:00',
                      showLeadingZero: true,
                    showNowButton: true,
                     showCloseButton: true,
                    showDeselectButton: true,
                      showOn: 'both',
                  });
               
                $('#exstime').timepicker({
                    defaultTime: '12:00',
                      showLeadingZero: true,
                    showNowButton: true,
                     showCloseButton: true,
                    showDeselectButton: true,
                      showOn: 'both',
                  });
});
</script>

            </head>
            <body>
               
                <form action="" method="post" class="basic-grey">
                <div>
                    <?php if ($id != '') { ?>
                        <input type="hidden" name="id" value="<?php echo $id; ?>" />
                        <p>Repair ID: <?php echo $id; ?></p>
                    <?php } ?>
                   
                    <br>
                    <strong>Customer Name:</strong> <input type="text" name="customer_name"
                        value="<?php echo $customer_name; ?>"/>
                        <br/>
                    <strong>Customer Email:</strong> <input type="text" name="customer_email"
                        value="<?php echo $customer_email; ?>"/>
                        <br>
                        <strong>Customer Phone:</strong> <input type="text" name="customer_phone"
                        value="<?php echo $customer_phone; ?>"/>
                        <br>
                        <strong>Computer Make:</strong> <input type="text" name="computer_make"
                        value="<?php echo $computer_make; ?>"/>
                        <br>
                        <strong>Computer Model:</strong> <input type="text" name="computer_model"
                        value="<?php echo $computer_model; ?>"/>
                        <br>
                        <strong>Assigned to Technician:</strong>
                        <select name="technician">
                        <option value="Phil Roskams">Phil Roskams</option>
                        <option value="Ian Haney">Ian Haney</option>
                        </select>
                        <br>
                        <strong>Repair Status:</strong>
                        <select name="status">
                        <option value="In Queue">In Queue</option>
                        <option value="Working on">Working on</option>
                        <option value="Awaiting Parts">Awaiting Parts</option>
                        <option value="Ready for Collection/Delivery">Ready for Collection/Delivery</option>
                        <option value="Complete">Complete</option>
                        </select>
                        <br>
                        <strong>Expected Repair Date:</strong> <input type="date" name="exrdate" value="<?php echo $exrdate; ?>" id="exrdate"/>
                        <br><br>
     <strong>Expected Repair Time:</strong> <input type="time" name="exrtime" value="<?php echo $exrtime; ?>" id="exrtime"/>
                        <br><br>
                        <strong>Expected Start Date:</strong> <input type="date" name="exstdate" value="<?php echo $exstdate; ?>" id="exstdate" />
                        <br><br>
     <strong>Expected Start Time:</strong> <input type="time" name="exstime" value="<?php echo $exstime; ?>" id="exstime"/>
                        <br><br>
                        <strong>Delivery Type:</strong>
                        <select name="deltype">
                        <option value="Customer Pickup">Customer Pickup</option>
                        <option value="Delivery">Delivery</option>
                        </select>
                        <br>
                        <strong>Comments:
                        <br>
                        <textarea name="comments">
                        <?php echo $comments; ?>
                        </textarea>
                        <br>
                        <strong>Repair Cost:</strong> <input type="text" name="cost"
                        value="<?php echo $cost; ?>"/>
                        <br>
                    <input type="submit" name="submit" value="Add/Update Repair Tracking" />
                </div>
                </form>
            </body>
        </html>
    Code (markup):
    Thank you in advance

    Ian
     
    Ian Haney, Nov 6, 2015 IP
  2. Alexstorm

    Alexstorm Greenhorn

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #2
    Try changing commas to semicolons in your functions and try using " instead of '. It shouldn't matter, but it might.
     
    Alexstorm, Nov 9, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Since Chrome has a perfectly good datepicker, I'd just change it to type="date" and say screw the scripttardery on Chrome anyhow.

    That said your form is semantic gibberish and accessibility rubbish... where's your fieldset? Why are you using STRONG to do LABEL's job?
     
    deathshadow, Nov 9, 2015 IP
  4. melisasanti

    melisasanti Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #4
    oh so ya how to do it. very helpful:cool:
     
    melisasanti, Nov 10, 2015 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #5
    I don't know if it's going to do any good for you, but when I remove the top script altogether, the date picker works just fine:

    http://jsfiddle.net/jaq2tpbo/3/

    It's not styled and there are no buttons, but it works.
     
    qwikad.com, Nov 10, 2015 IP