Bootstrap Snippet How to Add a Date-Picker input area on click or Calendar Mounth to a Bootstrap Form and usage moment.js using HTML Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript, uzun yaşamın sırları">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.tr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
</head>
<body style="background-color:#E6E6FA">
<div class="container">
    <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
    <!-- Form code begins -->
    <h3>Hi! Please Double Click Calendar icon button</h3>
    <form method="post">
      <div class="form-group"> <!-- Date input -->
        <label class="control-label" for="date">Date [Tarih]</label>
      <div class="input-group date" id="dp3" data-date="12-02-2017" data-date-format="mm-dd-yyyy">
      <input name="date" class="form-control" type="text" value="12-02-2017">
      <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar" id="butt"></i></span>
    </div>
      </div>
                  
                        
                  
      <div class="form-group"> <!-- Submit button -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
moment.locale('tr');
//var ahmet = moment("25/04/2012","DD/MM/YYYY").year();
var date = new Date();
bugun = moment(date).format("DD/MM/YYYY");
      var date_input=$('input[name="date"]'); //our date input has the name "date"
      var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      var options={
        //startDate: '+1d',
        //endDate: '+0d',
        container: container,
        todayHighlight: true,
        autoclose: true,
        format: 'dd/mm/yyyy',
        language: 'tr',
        //defaultDate: moment().subtract(15, 'days')
        //setStartDate : "<DATETIME STRING HERE>"
      };
      date_input.val(bugun);
      date_input.datepicker(options).on('focus', function(date_input){
     $("h3").html("focus event");      
      }); ;
      
      
 date_input.change(function () {
    var deger = $(this).val();
    $("h3").html("<font color=green>" + deger + "</font>");
  });      
      
 
      
$('.input-group').find('.glyphicon-calendar').on('click', function(){
//date_input.trigger('focus');
//date_input.datepicker('show');
 //$("h3").html("event : click");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"How to Add a Date-Picker input area on click or Calendar Mounth to a Bootstrap Form and usage moment.js"
Bootstrap 3.0.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"How to Add a Date-Picker input area on click or Calendar Mounth to a Bootstrap Form and usage moment.js" Bootstrap 3.0.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"How to Add a Date-Picker input area on click or Calendar Mounth to a Bootstrap Form and usage moment.js"
Bootstrap 3.0.0 Snippet by muhittinbudak