How to set multiple date in the calendar with mvvm? - javascript

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">

Related

How to do date time picker with respected timezone with selected dropdown?

I need a calendar with time select as well as timezone selection. Like below image:
Here is my code:
$('#datetimepicker').datetimepicker({
// format:'d.m.Y H:i',
// timepicker:false,
// allowTimes: []
// onSelectDate:function(ct,$i){ // only to select time the changed date highlighted
// alert(ct.dateFormat('d/m/Y'));
// },
inline:true,
step: 30,
lang:'ru',
disabledWeekDays: [0,6]
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<div>
<input id="datetimepicker" type="text" >
</div>
I got the datetimepicker plungin to do this. But can't able to add calendar based on timezone. Here i'm attached my working code, but not added any timezone dropdown here. Can anyone suggest to achieve this:
One option is to use control groups. In the snippet below, I used the CSS classes ui-controlgroup and ui-controlgroup-vertical to achieve this. However, you can also use scripting as shown in the documentation. As you will observe, I took the liberty to demonstrate the dropdown using specific timezones, but, you can use Moment in conjunction with Luxon to achieve your needs. The datetimepicker plugin does not have a built-in ability to refresh after update, but I attempted a hack using blur to achieve that.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/>
<script src="https://cdn.jsdelivr.net/npm/luxon#1.22.0/build/global/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<body>
<!-- https://jqueryui.com/controlgroup/ -->
<div class="ui-controlgroup ui-controlgroup-vertical">
<input id="datetimepicker" type="text" class="ui-controlgroup-item">
<select id="timezonepicker" class="ui-controlgroup-item">
<option value="Europe/Moscow" selected>Moscow Standard Time</option>
<option value="Asia/Omsk">Omsk Time</option>
<option value="Asia/Novosibirsk">Novosibirsk Time</option>
</select>
</div>
<script>
$('#datetimepicker').datetimepicker({
inline:true,
step: 30,
lang:'ru',
disabledWeekDays: [0,6]
});
$('#timezonepicker').change(function() {
let newDate = luxon.DateTime.fromISO(luxon.DateTime.local(), {zone: $(this).val()}).toFormat('yyyy/MM/dd hh:mm');
$('#datetimepicker').val(newDate);
$('#datetimepicker').trigger('blur');
});
</script>
</body>
</html>

Load date to input field after selecting from Bootstrap datetimepicker

What I am trying to do is, after selecting a date on Bootstrap Datetimepicker, it should load a value on my input field, but I don't know how to do that. There's my JSFiddle.
This is my jQuery for datetimepicker
$(function () {
$('.datetimepickerinline').datetimepicker({inline: true});
});
I need to use it for all inputs, or in other words, closest input field.
You called so many unwanted libraries. Just try this bootstrap datepicker. Hope this work for you.
$(document).ready(function(){
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
todayHighlight: true,
forceParse: false,
});
});
demo
Here is solution you want: jsfiddle
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val($(this).data('date'));
});
See reference here
Further more, I noticed that you want use moment.js
You can use something like this, using custom format:
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val(moment($(this).data('date')).format('DD/MM/YYYY, h:mm'));
});
You need to apply class 'datetimepickerinline' on your input field.
<input id="" placeholder="press to show calendar" class="input datetimepickerinline">
Try this fiddle : - https://jsfiddle.net/ekm0on2a/11/
you need to add datepicker class in your input field.
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div id="container">
<div class="my-example">
<input id="datepicker" placeholder="press to show calendar" class="input input-datepicker">
<div class="dropdown">
<div class="datetimepickerinline">
</div>
</div>
</div>
</div>
//script
$(function () {
$('#datepicker').datetimepicker({inline: true});
});

Removing the colon from 24 hrs format time in jquery datepicker

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>

how i can change year in buddist year in moment,js

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:

Change the date format to yyyy-mm-dd in Datepicker

I am using Datepicker for my HTML field .
The HTML code is :
<input type="text" id="from-datepicker"/>
The Jquery code to set and get the date picker fields is :
$("#from-datepicker").datepicker({ dateFormat: 'yy-mm-dd'});
$("#from-datepicker").on("change", function () {
var fromdate = $(this).val();
alert(fromdate);
});
This code, however, displays the field in 'mm-dd-yyyy' format.
Can someone tell me where am I going wrong ?
My imported CDNs are :
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">
Thanks in advance.
Yes, change dateFormat to just format and you need 4 sets of 'y's
Sample code:
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">
<script>
$( document ).ready(function() {
$("#from-datepicker").datepicker({
format: 'yyyy-mm-dd'
});
$("#from-datepicker").on("change", function () {
var fromdate = $(this).val();
alert(fromdate);
});
});
</script>
<input type="text" id="from-datepicker"/>
See the format option: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format
toDisplay: function (date, format, language) to convert date object to string, that will be stored in input field
toValue: function (date, format, language) to convert string object to date, that will be used in date selection
UPDATE 2018
As of bootstrap-datepicker version 1.6.4, setting data-date-format attribute to 'yyyy-mm-dd' on an input element works as well.
For e.g.
<input data-provide="datepicker" name="date_selected" data-date-format="yyyy-mm-dd" placeholder="Select date" required>
The option is format
You can set a default value for all your app:
$.fn.datepicker.defaults.format = 'yy-mm-dd';
Or:
$("#from-datepicker").datepicker({format: 'yy-mm-dd'});

Categories