0

I have used the bootstrap "Date-time-picker" & customized that for time selection only, but i need to get the "custom time" as input, not "default time". (Eg: i need to get the time "8.00" on click. Currently it is display the default system time) Thanks in advance. See my code:

$(function () { 
$('#datetimepicker1').datetimepicker({
format: 'LT',
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">



<div class="container"> 
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" name="from1" placeholder="Morning">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"> </script>
vishnu
  • 2,848
  • 3
  • 30
  • 55

3 Answers3

2

refere this link:- https://jdewit.github.io/bootstrap-timepicker/

use below html code..

<div class="container"> 
    <div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control" name="from1" placeholder="Morning" id="txttime" value="" onclick="timeset();">
    <span class="input-group-addon">
    <span class="glyphicon glyphicon-time"></span>
    </span>
    </div>
    </div>

write in Js part on click function

function timeset()
{


     var time = new Date();
time = time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
alert(time);
   $("#txttime").val(time);
}
Darshak
  • 859
  • 7
  • 18
1

See the code below. Here when onclicked on timepicker set the value 8:00 AM

$(function () { 
    $('#datetimepicker1').datetimepicker({
       format: 'hh:mm',
    });
   $('.input-group-addon').mouseup(function(){
        $('#dateT').val('8:00 AM');
   });
});

See the JSFiddle.

Ataur Rahman Munna
  • 3,887
  • 1
  • 23
  • 34
  • 1
    Glad to help you. :) @Vishnu – Ataur Rahman Munna Jan 24 '17 at 06:37
  • 1
    @Vishnu i think there is a problem with this: when you click on right icon, the input field gets desired time value but the value inside the timepicker window is not synced with it (it shows the current time!). i'm not sure if it is acceptable as user see different times in textbox and the picker window... – S.Serpooshan Jan 24 '17 at 06:46
  • @Ataur Rahman Munna - yes, it will be an issue to the client expectation.. i think "S.Serp" done that in the answer... – vishnu Jan 24 '17 at 06:53
  • 1
    Ok. I see the issue. it will works fine if you also used `mouseup` event or `mousedown` event instead of `click` event. @S.Serp thanks for the issue, though the time show correctly after second click. anyways,nice catch. I updated my answer as well as fiddle. – Ataur Rahman Munna Jan 24 '17 at 07:11
1

Update: Edited to set time when user clicks the right clock icon. Note: i use mousedown event instead of click such that the datetimepicker control show also that custom time initially, otherwise it may show a different time (if the input text be empty before click) and this can be confusing for user...

$(function () { 
  
  //$("#txttime").val("8:00 AM"); //*** initial time here
  
  $('#datetimepicker1').datetimepicker({
    //format: 'hh:mm A' //12 hour format
    format: 'HH:mm'     //24 hour format
  });

  $('#datetimepicker1 .input-group-addon').mousedown(function(){
    if (!$.trim($('#txttime').val())) $('#txttime').val('08:00');
  });
  
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">

<p>&nbsp;</p>

<div class="container"> 
  <div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control" placeholder="Morning" id="txttime" name="txttime" value="">
    <span class="input-group-addon" id="">
      <span class="glyphicon glyphicon-time"></span>
    </span>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
S.Serpooshan
  • 7,608
  • 4
  • 33
  • 61
  • But in your code time set at 8:00 AM when the page load, not after click the time picker. – Ataur Rahman Munna Jan 24 '17 at 06:30
  • @AtaurRahmanMunna it is not so clear if he want to get that Custom Time only After click – S.Serpooshan Jan 24 '17 at 06:32
  • Thanks for your updates.. its perfectly working.. one thing, how to change it 12hr format to 24hr? answer to me if possible please... – vishnu Jan 24 '17 at 07:04
  • 1
    you can use `format: 'HH:mm'` for 24 hour format. i have updated the answer again for you – S.Serpooshan Jan 24 '17 at 07:13
  • also for 12 hour format, it is better to use this: `format: 'hh:mm A'`. [see here](http://momentjs.com/docs/#/displaying/format/) for other date-time format strings (datetimepicker use `moment.js` to parse the format strings). – S.Serpooshan Jan 24 '17 at 07:32