发表新帖
发表新帖

How to set input type date's default value to today?

后端 未结
关注
30 2998
刺人心
刺人心 2020-11-22 14:00

The HTML5 input types are great, Opera\'s new built-in date picker is a breeze, and Chrome has at least supported the new input type with a spin-wheel implementation.

<
相关标签:
30条回答
  • 名媛妹妹
    2020-11-22 14:35 
    new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)
    0 讨论(0)
  • 半阙折子戏
    2020-11-22 14:37

    The JavaScript Date object provides enough built-in support for the required format to avoid doing it manually:

    Add this for correct timezone support:

    Date.prototype.toDateInputValue = (function() {
    var local = new Date(this);
    local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
    return local.toJSON().slice(0,10);
});


    jQuery:

    $(document).ready( function() {
    $('#datePicker').val(new Date().toDateInputValue());
});​


    Pure JS:

    document.getElementById('datePicker').value = new Date().toDateInputValue();
    0 讨论(0)
  • 梦如初夏
    2020-11-22 14:37 
    <input id="datePicker" type="date" />


    $(document).ready( function() {
    var now = new Date();
 
    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);

    var today = now.getFullYear()+"-"+(month)+"-"+(day) ;


   $('#datePicker').val(today);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="datePicker" type="date" />

    0 讨论(0)
  • 闹比i
    2020-11-22 14:38

    Since Date type only accepts the format "yyyy-MM-dd", you need to format the date value accordingly.

    Here is the solution for this, 

    var d = new Date();
var month = d.getMonth();
var month_actual = month + 1;

if (month_actual < 10) {
  month_actual = "0"+month_actual; 
  }

var day_val = d.getDate();
if (day_val < 10) {
  day_val = "0"+day_val; 
  }

document.getElementById("datepicker_id").value = d.getFullYear()+"-"+ month_actual +"-"+day_val;
    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-22 14:39

    There is no default method within HTML itself to insert todays date into the input field. However, like any other input field it will accept a value.

    You can use PHP to fetch todays date and input it into the value field of the form element.

    <?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";

    // Send to the browser the input field with the value set with the date string
    echo "<input type='date' value='$date_string' />";
?>

    The value field accepts the format YYYY-MM-DD as an input so simply by creating a variable $date_string in the same format that the input value accepts and fill it with the year, month and day fetched from todays date and voilá! You have yourself a preselected date!

    Hope this helps :)

    Edit:

    If you would like to have the input field nested within HTML rather than PHP you could do the following.

    <?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";
?>
<html>
    <head>...</head>
    <body>
        <form>
            <input type="date" value="<?php print($date_string); ?>" />
        </form>
    </body>
</html>

    I realise this question was asked a while back (2 years ago) but it still took me a while to find a definite answer out on the internet, so this goes to serve anyone who is looking for the answer whenever it may be and hope it helps everyone greatly :)

    Another Edit:

    Almost forgot, something thats been a royal pain for me in the past is always forgetting to set the default timezone whenever making a script in PHP that makes use of the date() function.

    The syntax is date_default_timezone_set(...);. Documentation can be found here at PHP.net and the list of supported timezones to insert into the function can be found here. This was always annoying since I am in Australia, everything is always pushed back 10 hours if I didn't set this properly as it defaults to UTC+0000 where I need UTC+1000 so just be cautious :)

    0 讨论(0)
  • 余生分开走
    2020-11-22 14:40

    I had the same problem and I fixed it with simple JS. The input:

    <input type="date" name="dateOrder" id="dateOrder"  required="required">

    the JS

    <script language="javascript">
document.getElementById('dateOrder').value = "<?php echo date("Y-m-d"); ?>";
</script>

    Important: the JS script should be in the last code line, or after to input, because if you put this code before, the script won't find your input.

    0 讨论(0)
 看不清?
提交回复
热议问题