How to set default date for DATE and TIME fields

Asked

Viewed 1,044 times

0

In the modal next containing two fields of the type date, "Of: dd/mm/aaaa and even: dd/mm/aaaa" I want to set the "From" date for the current date, "Until" for a day difference and in the field time set a default time.

Fields of the type Date:

<div class="col-md-6">
    <div class="form-group">
        <label class="col-sm-4 control-label" for="data-inicio-excecao"> Data * </label>
        <div class="col-sm-8">
            <input type="date" class="form-control" id="data-inicio-excecao" name="data-inicio-excecao" tabindex="2" />
        </div>
    </div>
</div>
<div class="col-md-6">
    <div class="form-group">
        <label class="col-sm-4 control-label" for="data-termino-excecao"> Até </label>
        <div class="col-sm-8">
            <input type="date" class="form-control" id="data-termino-excecao" name="data-termino-excecao" tabindex="3" />
        </div>
    </div>
</div>

Fields of the type Team:

<div class="col-md-6">
    <div class="form-group">
        <label class="col-sm-4 control-label" for="hora-inicio-excecao"> Hora Início * </label>
        <div class="col-sm-8">
            <input type="time" class="form-control" id="hora-inicio-excecao" name="hora-inicio-excecao" tabindex="4" />
        </div>
    </div>
</div>
<div class="col-md-6">
    <div class="form-group">
        <label class="col-sm-4 control-label" for="hora-termino-excecao"> Até </label>
        <div class="col-sm-8">
            <input type="time" class="form-control" id="hora-termino-excecao" name="hora-termino-excecao" tabindex="5" />
        </div>
    </div>
</div>

How can I do this using Jquery?

jquery html html5

  • What have you done? Put the code there to make it easier to help you.

  • 1

    Only use new Date(). toLocaleString() and place value within your inputs.

  • can give me an example Paul?

  • I added an answer with the dates. For the time, explain better what you need, I edit the answer.

  • I need when the modal opens, the Start Time is 8:00 and the Time Until is 6:00, by default. It is possible to change.

1 answer

0


For your dates, you can use the function Date() which is a feature of Javascript.

Thus, you select the current date and add the values in the respective fields. Your code would look like this:

 
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$( document ).ready(function() {
    var dt = new Date();//Instancia a data
	var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();//hora
    var diaAtual = dt.getDate() + "/" + (dt.getMonth()+1) + "/" + dt.getFullYear();//Dia atual concatenado
      var diaAte = (dt.getDate()+1) + "/" + (dt.getMonth()+1) + "/" + dt.getFullYear();//dia +1 concatenado
    $('#data-inicio-excecao').val(diaAtual); //Atribui o valor do dia atual
    $('#data-termino-excecao').val(diaAte); //Atribui o valor do dia +1
    console.log(day);
});
});//]]> 

</script>

<style type="text/css"></style></head>
<body>
  <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="data-inicio-excecao"> Data * </label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="data-inicio-excecao" name="data-inicio-excecao" tabindex="2">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label" for="data-termino-excecao"> Até </label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="data-termino-excecao" name="data-termino-excecao" tabindex="3">
                                </div>
                            </div>
                        </div>

Browser other questions tagged jquery html html5

You are not signed in. Login or sign up in order to post.