I am using bootstrap datetimepicker. Its need moment.js.
To make it local I have use this moment with locale
I need my year should be Buddhist year-2016 means 2559(2016+543). How can I achieve this using moment.
My html is :
$('#startDate').datetimepicker({
format: 'DD-MM-YYYY',
locale: 'th',
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-md-6 date">
<input type='text' class="form-control" id='startDate' />
</div>
I need this:
Related
JS datetimepicker onChange event not working at all.
I've tried OnSelect, OnClose, OnChange, OnHide, OnChangeMonth
to trigger datetimepicker event, but none of them works.
<input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#Datetimepicker" autocomplete="off" style="width: 200px;" />
$("#Datetimepicker").datetimepicker({
format: 'MMM,YYYY',
defaultDate: today,
onSelect: function () {
alert("It works!");
}
})
$("#Datetimepicker").datetimepicker("change",function(){
alert("It works!")});
$("#Datetimepicker").datetimepicker("changeDate",function(){
alert("It works!")});
I've tried many ways, but still none of them working. Do I need to provide some other js library in order to make it work? Appreciate your help.
As mentioned by #Bluety you have to use the events provided by the library.
In your case you can use change.datetimepicker event. The event handler function receives old date and new date which can be used for any comparisons you might need.
$("#Datetimepicker").on("change.datetimepicker", ({date, oldDate}) => {
//Use date and oldDate here
})
Also note that, in your case the input element is same as datepicker target, This can lead to duplicate events triggered 👇.................................................................................................👇
id="Datetimepicker" data-toggle="datetimepicker" data-target="#Datetimepicker"
You can run the snippet below and change the date to see multiple alerts for one event.
$("#Datetimepicker").datetimepicker({
format: 'MMM,YYYY',
defaultDate: new Date()
}
);
$("#Datetimepicker").on("change.datetimepicker", ({date, oldDate}) => {
console.log("New date", date);
console.log("Old date", oldDate);
alert("Changed date")
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<div id="target" style="position:relative" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#Datetimepicker" autocomplete="off" style="width: 200px;" />
</div>
To avoid this, you can use the parent as data-target. This is how the examples look in the documentation as well
<div id="target" style="position:relative" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#target" autocomplete="off" style="width: 200px;" />
</div>
Run the snippet below and change dates to see single alert.
$("#target").datetimepicker({
format: 'MMM,YYYY',
defaultDate: new Date()
});
$("#target").on("change.datetimepicker", ({
date,
oldDate
}) => {
console.log("New date", date);
console.log("Old date", oldDate);
alert("Changed date")
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<div id="target" style="position:relative" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="Datetimepicker" data-toggle="datetimepicker" data-target="#target" autocomplete="off" style="width: 200px;" />
</div>
When I look at the documentation I see that events have been defined by the library.
You can use the "on" function of jQuery with a custom event "change.datetimepicker" defined by the library and indicated in the documentation (https://tempusdominus.github.io/bootstrap-4/Events/).
$("#Datetimepicker").on("change.datetimepicker",function(){
alert("It works!")});
Try this:
$("#Datetimepicker").datetimepicker().on('changeDate', function(e) {
console.log('hey');
});
For the users that have the newer version of this lib (tempus dominus) you can do something like this:
$('#yourElement').on(tempusDominus.Namespace.events.change, (e) => {
console.log(e,'do stuff..');
});
How to set multiple date in the calendar with mvvm.
I have my calendar :
<div id="calendar1" data-role="calendar"
data-bind="value: Cvalue,
dates: Csource,
events:{change: ConChange}">
</div>
JS, view model:
Cvalue:null,
Csource:[],
Conchange:function(){
}
Csource contains:
[
{"nome":"1"},{"data":"21/112017"},
{"nome":"2"},{"data":"22/112017"},
{"nome":"3"},{"data":"26/112017"},
{"nome":"4"},{"data":"28/112017"},
{"nome":"5"},{"data":"29/112017"}
]
Cain i see this dates with different color in the calendar?
and at onChange of day, i'd like to print the name of date;
something like this attached image:
A plugin called multiDatesPicker will meet your requirement
$('#mdp-demo').multiDatesPicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<input id="mdp-demo">
http://jsfiddle.net/e31m02L9/2/
How can I have DateTimePicker pick a month instead of a date and time? (So the value is YYYY-MM)
Looking at online documentation I was told to use startView:
$('#datetimepickerday').datetimepicker({
startView: "month"
});
But it gives the following error:
Yes, you have to use viewMode instead of startView and set format option to YYYY-MM. If you specify format: 'YYYY-MM' with eonasdan datetimepicker the default behaviour is to show the months dropdown (no need to explicitly set viewMode)
Here a working example:
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM',
viewMode: 'months'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I need to resolve an issue that has been bugging my bug list for a while but can't find anything solid in Google. All I want is to remove the colon from the time so I can display it in REAL military time.
So, this is wrong --> 13:25 hrs
This is right --> 1325 hrs
I am using Jquery Date Picker form the Jquery UI library and datetimepicker-addon.js from here
HTML
<div class="container">
<input type="text" name="my_date" id="my_date" value="" />
</div>
JS
$(function(){
$("#my_date").datetimepicker({
timeFormat: "HH:mm 'hrs'",
showButtonPanel: false
});
});
Here is a handy dandy CODEPEN
I appreciate the help
In the timeFormat of the datetimepicker remove the colon
$(function(){
// when the document has loaded
// attach the datetimepicker
$("#my_date").datetimepicker({
timeFormat: "HHmm 'hrs'",
showButtonPanel: false
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-sliderAccess.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div class="container">
<input type="text" name="my_date" id="my_date" value="" />
</div>
Currently, I'm using Bootstrap 3 Datepicker from this source
I have 2 datetimepicker on my system. (startTime, endTime).
I tried but don't know how to set minDate for endTime from startTime value whenever startTime value changed. Even it don't jump on change event.
Please point me what am I missing.
Here is my code
Many thanks.
You need to use the change event and minDate() function like
$('#txtStartTime').datetimepicker({
showTodayButton: true,
format: 'MM/DD/YYYY HH:mm',
sideBySide: true,
maxDate: moment()
}).on('dp.change', function(e) {
$('#txtEndTime').data("DateTimePicker").minDate(e.date)
});
$('#txtEndTime').datetimepicker({
showTodayButton: true,
format: 'MM/DD/YYYY HH:mm',
sideBySide: true
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">.</div>
<div class="col-md-3">
<input class="form-control datetimepicker" id="txtStartTime" type='text' />
</div>
<div class="col-md-3">
<input class="form-control datetimepicker" id="txtEndTime" type='text' />
</div>