JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<script src="http://bsdp-assets.blackcherry.us/1.3.0/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="http://bsdp-assets.blackcherry.us/1.3.0/datepicker3.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div class="input-daterange input-group" id="datepicker">
    <input type="text" class="input-sm form-control" name="start" /> <span class="input-group-addon">to</span>

    <input type="text" class="input-sm form-control" name="end" />
</div>
<button>Start on Easter</button>

JavaScript

$('.input-daterange')
    .datepicker()
    .on('changeDate', function(e){
        console.log(e.target, "is now", e.date);
    });

$('button').on('click', function(e){
    var easter = new Date('04-20-2014');
    // move head b/c picker assumes/requires local time
    var tzms = easter.getTimezoneOffset() * 60 * 1000;
    var shifted = new Date( easter + tzms );
    console.log(easter)
    console.log(shifted)
    $('.input-daterange [name="start"]')
        .datepicker('update', shifted)
        .datepicker('updateDates')
});