0

aim is to count difference from two dates im still confuse why it wont work, cause i wrote a code from someone's tutorial.

<!Doctype html>
<html><body style='background:white;'><head><title>tugas akhir</title>

<meta charset='utf-8'>

  <link rel='stylesheet' href='js/jquery-ui.js'>
    <link rel='stylesheet' href='js/jquery.js'>
    <link rel='icon' src='images/lmd.png'>
  <link rel='stylesheet' type='text/css' href='css/me.css'>
  <link rel='stylesheet' type='text/css' href='css/datepicker.css'>
  <link rel='stylesheet' type='text/css' href='css/bootstrap.css'>

  <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='tinymce/tinymce.min.js'></script>
  <script type='text/javascript' src='js/bootstrap-datepicker.js'></script>

  <script>
$(function() {
    $( "#arr_date" ).datepicker({ dateFormat: 'dd-mm-yy' });
    $( "#dep_date" ).datepicker({ dateFormat: 'dd-mm-yy' });
});
$('.button').click(function() {
    var start = $('#arr_date').datepicker('getDate');
    var end   = $('#dep_date').datepicker('getDate');
    var days   = (end - start)/1000/60/60/24;
    $('#ahir').val(days);
});
</script>

<script>
if (typeof jQuery != 'undefined') {

    alert("jQuery library is loaded!");

}else{

    alert("jQuery library is not found!");

}
</script>
</head>

<p>Choose your dates and hit <em>go</em>.</p>
<input type="text" id="arr_date">
<input type="text" id="dep_date">
    <input type="text" id="hasil">
<button class="button">go</button>

</body>
</html>

i want to put the difference date value in id='hasil. i hope you guys can help my problem. Thank you

2
  • can you show us the link of the tutorial
    – user3917239
    Aug 27, 2014 at 7:54
  • In your last edit, you added $('#akhir').val(days);;: what is akhir item? And remove the second ;
    – Nicolas R
    Aug 27, 2014 at 7:55

1 Answer 1

0

Your calculation part is ok, you can check with jsfiddle: http://jsfiddle.net/3ryy5p4x/

If you want to set the value in the input having hasil as id, as you said by text, simply set like this $('#hasil').val(days);

Working sample: http://jsfiddle.net/3ryy5p4x/1/

EDIT: here in your own code, the problem is the structure:

  • Your body start MUST be after all the head section!
  • Your link to stylesheets are referencing javascript files, not stylesheet files
  • You did not referenced jQUery UI which is containing the datepicker component, but bootstrap-datepicker

Correction, using CDN references for the js files (files are on the web, from here: https://code.jquery.com/. If you want to use them locally, copy the content and change the references):

<!Doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>tugas akhir</title>

        <!-- Here, the files should be CSS, not JS! -->
        <link rel='stylesheet' href='js/jquery-ui.css'>

        <link rel='icon' src='images/lmd.png'>
        <link rel='stylesheet' type='text/css' href='css/me.css'>
        <link rel='stylesheet' type='text/css' href='css/datepicker.css'>
        <link rel='stylesheet' type='text/css' href='css/bootstrap.css'>

        <!-- jQuery, here 1.11.1 version, using minified (min) to have a shorter file -->
        <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.1.min.js'></script>
        <!-- jQuery UI script, for datepicker -->
        <script type='text/javascript' src='https://code.jquery.com/ui/1.11.1/jquery-ui.min.js'></script>

        <script>
            $(function() {
                $( "#arr_date" ).datepicker({ dateFormat: 'dd-mm-yy' });
                $( "#dep_date" ).datepicker({ dateFormat: 'dd-mm-yy' });
            });

            $('.button').click(function() {
                var start = $('#arr_date').datepicker('getDate');
                var end = $('#dep_date').datepicker('getDate');
                var days = (end - start)/1000/60/60/24;
                $('#hasil').val(days);
            });
        </script>

        <script>
            if (typeof jQuery != 'undefined') {
                alert("jQuery library is loaded!");
            } else {
                alert("jQuery library is not found!");
            }
        </script>
    </head>
    <body style='background:white;'>
        <p>Choose your dates and hit <em>go</em>.</p>
        <input type="text" id="arr_date" />
        <input type="text" id="dep_date" />
        <input type="text" id="hasil" />
        <button class="button">go</button>
    </body>
</html>
7
  • yes it works. but how if i want to put the value in another textfield like this. this is my work : jsfiddle.net/ambiguous/TCXcX Aug 27, 2014 at 7:59
  • See my fiddle. Your value is stored in the days var, so use jQuery to put it where you want: if the destination has the id sampleId, use $('#sampleId').val(days) for example
    – Nicolas R
    Aug 27, 2014 at 8:03
  • thank you. yes, in jsfiddle it works. but i use jquery 1.11 in my local computer and cant run the same result. can you suggest where i can get jquery plugin that actually works same like in jsfiddle thank you Aug 27, 2014 at 8:16
  • This is the basic behaviour of jQuery since the beginning, no problem with your version. Looking back to your head section, you made errors in it, I will update my answer
    – Nicolas R
    Aug 27, 2014 at 8:22
  • 1
    There may be problems in the references to your css files, I did not remove them but you can comment. And use the console of your navigator to see if there is any error. Basically, if you want I can edit and give you the minimal items to work, then you complete
    – Nicolas R
    Aug 27, 2014 at 9:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.